jQuery選擇器及jquery案例詳解(必看)

更新時(shí)間：2016年05月20日 15:03:02 作者：NOGiveUp

本文給大家介紹jquery選擇器的相關(guān)知識(shí)，并通過(guò)案例給大家介紹jquery知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧

JQuery選擇器

解析：為了更好的或者是更快的從復(fù)雜的DOM樹(shù)中找到我們需要的一類標(biāo)簽

1.層次選擇器

<!-- 當(dāng)點(diǎn)擊h2元素時(shí)，為#menu下的<span>元素添加色為#09F的顏色背景 -->
<!-- <script type="text/javascript">
$(function () {
$('h2').click(function () {
$('#menu span').css('background-color','#09F');
});
});
</script>-->

2.基本選擇器

<!-- 為標(biāo)簽選擇器添加樣式 -->
<script type="text/javascript">
$(function () {
$('h2').click(function () {
$('h3').css('background-color', '#09F');

});
});
</script>

3.基本過(guò)濾選擇器

<script type="text/javascript">
$(function () {
$('h2').click(function () {
//$('li:first').css('background-color', '#09F');//第一個(gè)
//$('li:last').css('background-color', '#09F');//最后一個(gè)
//$('li:not(.three)').css('background-color', '#09F');//class不為three的元素
// $('li:even').css('background-color', '#09F');//索引值為偶數(shù)的元素
// $('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');//所有標(biāo)題的元素
$(':focus').css('background-color', '#09F');//獲取焦點(diǎn)的元素
});
});
</script>

4.可見(jiàn)性過(guò)濾選擇器

<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">點(diǎn)擊按鈕，我會(huì)被隱藏哦~</p>
<p id="txt_show">隱藏的我，被顯示了，嘿嘿~</p>
<input type="button" name="show" value="點(diǎn)擊顯示文字 " />
<input type="button" name="hide" value="點(diǎn)擊隱藏文字 " />
</body>

5.屬性選擇器

<!--改變class屬性的值為odds的元素的背景顏色 -->
<script type="text/javascript">
$(function () {
$("h2").click(function () {
$("[class=odds]").css("background-color", "#FFFFFF");
})
});
</script>

Jquery能做什么

訪問(wèn)和操作DOM元素

控制頁(yè)面樣式

對(duì)頁(yè)面事件進(jìn)行處理

擴(kuò)展新的jQuery插件

與Ajax技術(shù)完美結(jié)合

Jquery的優(yōu)勢(shì)

體積小，壓縮后只有100KB左右

強(qiáng)大的選擇器

出色的DOM封裝

可靠的事件處理機(jī)制

出色的瀏覽器兼容性

使用隱式迭代簡(jiǎn)化編程

豐富的插件支持

jQuery的知識(shí)的分解：

1.關(guān)于window.onload和$(function(){})區(qū)別

解析：window.onload等待頁(yè)面上所有資源（html標(biāo)簽，css，img，js）都加載完成后，才執(zhí)行，包括（文本素材，圖片，js，css）

$(function(){}):等待頁(yè)面上的標(biāo)簽素材加載完成后就開(kāi)始執(zhí)行

第二點(diǎn)：

Window.onload只能調(diào)用一次

$(function(){})可以調(diào)用多次

2.怎么通過(guò)Jquery設(shè)置樣式

1）.通過(guò)$(“選擇器”).css(“屬性名”,”屬性值”);

//這里的書(shū)寫(xiě)的屬性名和css中書(shū)寫(xiě)的一致

2）.$(“選擇器”).html():獲取兩個(gè)標(biāo)簽之間的html代碼

3）.$(“選擇器”).addClass(“屬性值”)

可以動(dòng)態(tài)的改變dom文檔結(jié)構(gòu)。進(jìn)而設(shè)置樣式。

3.DOM對(duì)象和Jquery對(duì)象的轉(zhuǎn)換

jquery對(duì)象轉(zhuǎn)換成 dom對(duì)象

jquery提供了兩種方法將一個(gè)jquery對(duì)象轉(zhuǎn)換成一個(gè)dom對(duì)象，即[index]和get(index)。

ar cr= cr=("#cr"); //jquery對(duì)象
var cr = $cr[0]; //dom對(duì)象 也可寫(xiě)成 var cr=$cr.get(0);
alert(cr.checked); //檢測(cè)這個(gè)checkbox是否給選中

3.dom對(duì)象轉(zhuǎn)換成jquery對(duì)象

對(duì)于一個(gè)dom對(duì)象，只需要用$()把dom對(duì)象包裝起來(lái)，就可以獲得一個(gè)jquery對(duì)象了，方法為$(dom對(duì)象);

代碼:

var cr=document.getElementById("cr"); //dom對(duì)象
var cr= cr=(cr); //轉(zhuǎn)換成jquery對(duì)象

光棒效果案例：

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;//這里設(shè)置間距
var li = $("li");//這里是區(qū)塊名稱
var li_W = li[0].offsetWidth + margin;//取區(qū)塊的實(shí)際寬度（包含間距，這里使用源生的offsetWidth函數(shù)，不適用jQuery的width()函數(shù)是因?yàn)樗荒苋〉脤?shí)際寬度，例如元素內(nèi)有pandding就不行了）
function liuxiaofan() {//定義成函數(shù)便于調(diào)用
var h = [];//記錄區(qū)塊高度的數(shù)組
var n = document.documentElement.offsetWidth / li_W | 0;//窗口的寬度除以區(qū)塊寬度就是一行能放幾個(gè)區(qū)塊
for (var i = 0; i < li.length; i++) {//有多少個(gè)li就循環(huán)多少次
li_H = li[i].offsetHeight;//獲取每個(gè)li的高度
if (i < n) {//n是一行最多的li，所以小于n就是第一行了
h[i] = li_H;//把每個(gè)li放到數(shù)組里面
li.eq(i).css("top", 0);//第一行的Li的top值為0
li.eq(i).css("left", i * li_W);//第i個(gè)li的左坐標(biāo)就是i*li的寬度
}
else {
min_H = Math.min.apply(null, h);//取得數(shù)組中的最小值，區(qū)塊中高度值最小的那個(gè)
minKey = getarraykey(h, min_H);//最小的值對(duì)應(yīng)的指針
h[minKey] += li_H + margin;//加上新高度后更新高度值
li.eq(i).css("top", min_H + margin);//先得到高度最小的Li，然后把接下來(lái)的li放到它的下面
li.eq(i).css("left", minKey * li_W); //第i個(gè)li的左坐標(biāo)就是i*li的寬度
}
$("h3").eq(i).text("編號(hào)：" + i + "，高度：" + li_H);//把區(qū)塊的序號(hào)和它的高度值寫(xiě)入對(duì)應(yīng)的區(qū)塊H3標(biāo)題里面
}
}
/* 使用for in運(yùn)算返回?cái)?shù)組中某一值的對(duì)應(yīng)項(xiàng)數(shù)(比如算出最小的高度值是數(shù)組里面的第幾個(gè)) */
function getarraykey(s, v) { for (k in s) { if (s[k] == v) { return k; } } }
/*這里一定要用onload，因?yàn)閳D片不加載完就不知道高度值*/
window.onload = function () { liuxiaofan(); };
/*瀏覽器窗口改變時(shí)也運(yùn)行函數(shù)*/
window.onresize = function () { liuxiaofan(); };
</script>

以上內(nèi)容是小編給大家介紹的jQuery選擇器及jquery案例的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家想了解更多有關(guān)jquery的知識(shí)敬請(qǐng)關(guān)注腳本之家網(wǎng)站！

您可能感興趣的文章: