本文給大家介紹jquery選擇器的相關知識，并通過案例給大家介紹jquery知識，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學習吧
JQuery選擇器
解析：為了更好的或者是更快的從復雜的DOM樹中找到我們需要的一類標簽
1.層次選擇器
<!-- 當點擊h2元素時，為#menu下的<span>元素添加色為#09F的顏色背景 -->
<!-- <script type="text/javascript">
$(function () {
$('h2').click(function () {
$('#menu span').css('background-color','#09F');
});
});
</script>-->
2.基本選擇器
<!-- 為標簽選擇器添加樣式 -->
<script type="text/javascript">
$(function () {
$('h2').click(function () {
$('h3').css('background-color', '#09F');
});
});
</script>
3.基本過濾選擇器
<script type="text/javascript">
$(function () {
$('h2').click(function () {
//$('li:first').css('background-color', '#09F');//第一個
//$('li:last').css('background-color', '#09F');//最后一個
//$('li:not(.three)').css('background-color', '#09F');//class不為three的元素
// $('li:even').css('background-color', '#09F');//索引值為偶數的元素
// $('li:eq(1)').css('background-color', '#09F');//索引值為1的元素
//$('li:gt(1)').css('background-color', '#09F');//索引值大于1的元素
//$('li:lt(1)').css('background-color', '#09F');//索引值小于1的元素
//$(':header').css('background-color', '#09F');//所有標題的元素
$(':focus').css('background-color', '#09F');//獲取焦點的元素
});
});
</script>
4.可見性過濾選擇器
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
// $('p:hidden').show();//顯示文字
$('p:visible').hide();//隱藏文字
});
</script>
<style type="text/css">
#txt_show
{
display:none;color:#00C;
}
#txt_hide
{
display:block;color:#F30;
}
</style>
</head>
<body>
<p id="txt_hide">點擊按鈕，我會被隱藏哦~</p>
<p id="txt_show">隱藏的我，被顯示了，嘿嘿~</p>
<input type="button" name="show" value="點擊顯示文字 " />
<input type="button" name="hide" value="點擊隱藏文字 " />
</body>
5.屬性選擇器
<!--改變class屬性的值為odds的元素的背景顏色 -->
<script type="text/javascript">
$(function () {
$("h2").click(function () {
$("[class=odds]").css("background-color", "#FFFFFF");
})
});
</script>
Jquery能做什么:
訪問和操作DOM元素
控制頁面樣式
對頁面事件進行處理
擴展新的jQuery插件
與Ajax技術完美結合
Jquery的優勢:
體積小，壓縮后只有100KB左右
強大的選擇器
出色的DOM封裝
可靠的事件處理機制
出色的瀏覽器兼容性
使用隱式迭代簡化編程
豐富的插件支持
jQuery的知識的分解：
1.關于window.onload和$(function(){})區別
解析：window.onload等待頁面上所有資源（html標簽，css，img，js）都加載完成后，才執行，包括（文本素材，圖片，js，css）
$(function(){}):等待頁面上的標簽素材加載完成后就開始執行
第二點：
Window.onload只能調用一次
$(function(){})可以調用多次
2.怎么通過Jquery設置樣式
1）.通過$(“選擇器”).css(“屬性名”,”屬性值”);
//這里的書寫的屬性名和css中書寫的一致
2）.$(“選擇器”).html():獲取兩個標簽之間的html代碼
3）.$(“選擇器”).addClass(“屬性值”)
可以動態的改變dom文檔結構。進而設置樣式。
3.DOM對象和Jquery對象的轉換
jquery對象轉換成 dom對象
jquery提供了兩種方法將一個jquery對象轉換成一個dom對象，即[index]和get(index)。
ar cr= cr=("#cr"); //jquery對象
var cr = $cr[0]; //dom對象 也可寫成 var cr=$cr.get(0);
alert(cr.checked); //檢測這個checkbox是否給選中
3.dom對象轉換成jquery對象
對于一個dom對象，只需要用$()把dom對象包裝起來，就可以獲得一個jquery對象了，方法為$(dom對象);
代碼:
var cr=document.getElementById("cr"); //dom對象
var cr= cr=(cr); //轉換成jquery對象
光棒效果案例：
js代碼：
$(function () {
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.style.background = 'red';
};
lis[i].onmouseout = function () {
this.style.background = '';
}
}
});
jQuery的代碼：
$(function () {
$('li').mouseover(function () {
$(this).css('background','red');
}).mouseout(function () {
$(this).css('background', '');
})
});
jQuery瀑布流案例：
<script>
var margin = 10;//這里設置間距
var li = $("li");//這里是區塊名稱
var li_W = li[0].offsetWidth + margin;//取區塊的實際寬度（包含間距，這里使用源生的offsetWidth函數，不適用jQuery的width()函數是因為它不能取得實際寬度，例如元素內有pandding就不行了）
function liuxiaofan() {//定義成函數便于調用
var h = [];//記錄區塊高度的數組
var n = document.documentElement.offsetWidth / li_W | 0;//窗口的寬度除以區塊寬度就是一行能放幾個區塊
for (var i = 0; i < li.length; i++) {//有多少個li就循環多少次
li_H = li[i].offsetHeight;//獲取每個li的高度
if (i < n) {//n是一行最多的li，所以小于n就是第一行了
h[i] = li_H;//把每個li放到數組里面
li.eq(i).css("top", 0);//第一行的Li的top值為0
li.eq(i).css("left", i * li_W);//第i個li的左坐標就是i*li的寬度
}
else {
min_H = Math.min.apply(null, h);//取得數組中的最小值，區塊中高度值最小的那個
minKey = getarraykey(h, min_H);//最小的值對應的指針
h[minKey] += li_H + margin;//加上新高度后更新高度值
li.eq(i).css("top", min_H + margin);//先得到高度最小的Li，然后把接下來的li放到它的下面
li.eq(i).css("left", minKey * li_W); //第i個li的左坐標就是i*li的寬度
}
$("h3").eq(i).text("編號：" + i + "，高度：" + li_H);//把區塊的序號和它的高度值寫入對應的區塊H3標題里面
}
}
/* 使用for in運算返回數組中某一值的對應項數(比如算出最小的高度值是數組里面的第幾個) */
function getarraykey(s, v) { for (k in s) { if (s[k] == v) { return k; } } }
/*這里一定要用onload，因為圖片不加載完就不知道高度值*/
window.onload = function () { liuxiaofan(); };
/*瀏覽器窗口改變時也運行函數*/
window.onresize = function () { liuxiaofan(); };
</script>
以上內容是小編給大家介紹的jQuery選擇器及jquery案例的相關知識，希望對大家有所幫助
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
