[jQuery 權威指南（第二版）]閱讀筆記-jQuery 選擇器[屬性過濾選擇器]

2016-11-04 jashliao Comments 0 Comment

[jQuery 權威指南（第二版）]閱讀筆記-jQuery 選擇器[屬性過濾選擇器]

資料來源:http://www.java1234.com/a/javaziliao/shuji/2014/1206/3343.html

根據所獲取頁面中元素的不同，可以將jQuery 選擇器分為四大類：

■基本選擇器

基本選擇器語法

選擇器	功能描述	返回值
#id	根據給定的ID 匹配一個元素	單個元素
element	根據給定的元素名匹配所有元素	元素集合
.class	根據給定的類匹配元素	元素集合
*	匹配所有元素	元素集合
selector1,selectorN	將每一個選擇器匹配到的元素合併後一起返回	元素集合

Ps 「逗號」隔開表示個別元素，「空格」隔開表示階層關係

範例：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title>使用jQuery基本選擇器</title>

src=”Jscript/jquery-1.8.2.min.js”></script>

body{font-size:12px;text-align:center}

.clsFrame{width:300px;height:100px}

.clsFrame div,span{display:none;float:left;

width:65px;height:65px;border:solid 1px #ccc;margin:8px}

.clsOne{background-color:#eee}

</style>

$(function(){ /* ID匹配元素「三個顯示一個」*/

$(“#divOne”).css(“display”,”block”);

})

$(function(){ /*元素名匹配元素「三個顯示一個」，div下的span */

$(“div span”).css(“display”,”block”);

})

$(function(){ /*類匹配元素*/

$(“.clsFrame .clsOne”).css(“display”,”block”);

})

$(function(){ /*匹配所有元素「全部顯示」*/

$(“*”).css(“display”,”block”);

})

$(function(){ /*合併匹配元素「三個顯示二個」*/

$(“#divOne,span”).css(“display”,”block”);

})

</script>

</head>

<body>

<div class=”clsOne”>CLASS</div>

</div>

</body>

</html>

ps：「div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px}」這行css有用到float:left;讓元件可以橫向擺放

層次選擇器

ancestor descendant	根據祖先元素匹配所有的後代元素	元素集合
parent > child	根據父元素匹配所有的子元素	元素集合
prev + next	匹配所有緊接在prev 元素後的相鄰元素	元素集合
prev ~ siblings	匹配prev 元素之後的所有兄弟元素	元素集合

範例：

<head>

<title>使用jQuery層次選擇器</title>

body{font-size:12px;text-align:center}

div,span{float:left;border:solid 1px #ccc;margin:8px;display:none}

.clsFraA{width:65px;height:65px}

.clsFraP{width:45px;height:45px;background-color:#eee}

.clsFraC{width:25px;height:25px;background-color:#ddd}

</style>

$(function(){ //匹配後代

$(“#divMid”).css(“display”,”block”);

$(“div span”).css(“display”,”block”);//[此範例包含下麵元素2代]

})

$(function(){ //匹配子元素

$(“#divMid”).css(“display”,”block”);

$(“div>span”).css(“display”,”block”);//[此範例包含下麵元素1代]

})

$(function(){ //匹配後面元素

$(“#divMid + span”).css(“display”,”block”);//+ 是指下面的隔壁鄰居，所以這行無效

$(“#divMid + div”).css(“display”,”block”);//+ 是指下麵的隔壁鄰居

//$(“#divMid”).next().css(“display”,”block”);//下面的隔壁鄰居，功能同上

})

$(function(){ //匹配所有後面元素

$(“#divMid ~ div”).css(“display”,”block”);//~ 是指下面的所有隔壁鄰居

//$(“#divMid”).nextAll().css(“display”,”block”);//下面的所有隔壁鄰居，功能同上

})

$(function(){

$(“#divMid”).siblings(“div”).css(“display”,”block”);//siblings-所有鄰居包含之前的

})

</script>

</head>

<body>

</span>

</div>

<div class=”clsFraA”>Right_1</div>

<div class=”clsFraA”>Right_2</div>

</body>

</html>

■過濾選擇器

◆簡單過濾選擇器

<html>

<head>

<title>使用jQuery基本过滤选择器</title>

src=”Jscript/jquery-1.8.2.min.js”></script>

body{font-size:12px;text-align:center}

div{width:241px;height:83px;border:solid 1px #eee}

h1{font-size:13px}

ul{list-style-type:none;padding:0px}

.DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;

border-top:solid 1px #eee;border-bottom:solid 1px #eee}

.GetFocus{width:58px;border:solid 1px #666;background-color:#eee}

#spnMove{width:238px;height:23px;line-height:23px;}

</style>

$(function(){ //增加第一個元素的類別

$(“li:first”).addClass(“GetFocus”);//挑出li的第一個

})

$(function(){ //增加最後一個元素的類別

$(“li:last”).addClass(“GetFocus”);//挑出li的第最後一個

})

$(function(){ //增加去除所有與給定選擇器匹配的元素類別

$(“li:not(.NotClass)”).addClass(“GetFocus”);//不包含該有項目的全部

})

$(function(){ //增加所有索引值為偶數的元素類別,從0開始計數

$(“li:even”).addClass(“GetFocus”);

})

$(function(){ //增加所有索引值為奇數的元素類別,從0開始計數

$(“li:odd”).addClass(“GetFocus”);

})

$(function(){ //增加一個給定索引值的元素類別,從0開始計數

$(“li:eq(1)”).addClass(“GetFocus”);//指定陣列引數「等於」

})

$(function(){ //增加所有大於給定索引值的元素類別,從0開始計數

$(“li:gt(1)”).addClass(“GetFocus”);//指定陣列引數「大於」2～3

})

$(function(){ //增加所有小於給定索引值的元素類別,從0開始計數

$(“li:lt(4)”).addClass(“GetFocus”);//指定陣列引數「小於」的全部0～3

})

$(function(){ //增加標題類元素類別

$(“div h1”).css(“width”,”238″);

$(“:header”).addClass(“GetFocus”);//:header 獲取所有標題類型的元素，如h1、h2……

})

//—

$(function(){

animateIt(); //增加動畫效果元素類別

$(“#spnMove:animated”).addClass(“GetFocus”);

})

function animateIt() { //動畫效果

$(“#spnMove”).slideToggle(“slow”, animateIt);

}

//—

</script>

</head>

<body>

<div>

<h1>基本过滤选择器</h1>

<ul>

</ul>

</div>

</body>

</html>

◆內容過濾選擇器

◆可見性過濾選擇器

◆屬性過濾選擇器

範例：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title>使用jQuery屬性過濾選擇器</title>

src=”Jscript/jquery-1.8.2.min.js”></script>

body{font-size:12px;text-align:center}

div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}

</style>

$(function(){ //顯示所有含有id屬性的元素

$(“div[id]”).show(3000);//指挑出屬性有id的

})

$(function(){ //顯示所有屬性title的值是“A”的元素

$(“div[title=’A’]”).show(3000);//指定特定屬性且還要屬性值一致

})

$(function(){ //顯示所有屬性title的值不是“A”的元素

$(“div[title!=’A’]”).show(3000);//指定特定屬性且還要屬性值不一致，ps沒有該屬性也算符合條件

})

$(function(){ //顯示所有屬性title的值以“A”開始的元素

$(“div[title^=’A’]”).show(3000);

})

$(function(){ //顯示所有屬性title的值以“C”結束的元素

$(“div[title$=’C’]”).show(3000);

})

$(function(){ //顯示所有屬性title的值中含有“B”的元素

$(“div[title*=’B’]”).show(3000);

})

$(function(){ //顯示所有屬性title的值中含有“B”且屬性id的值是“divAB”的元素

$(“div[id=’divAB’][title*=’B’]”).show(3000);//同時滿足條件

})

</script>

</head>

<body>

<div title=”A”>Title A</div>

<div id=”divAB” title=”AB”>ID <br />Title AB</div>

<div title=”ABC”>Title ABC</div>

</body>

</html>

◆子元素過濾選擇器

◆表單物件屬性過濾選擇器

■表單選擇器

jashliao部落格

四它 & 謀定而後動，知止而有得(5W2H1R) ~ 創意發想就是我的超能力

[jQuery 權威指南（第二版）]閱讀筆記-jQuery 選擇器[屬性過濾選擇器]

2016-11-04 jashliao Comments 0 Comment

發表迴響取消回覆

發表迴響 取消回覆

發表迴響取消回覆