<!-- 本文例子所引用的jQuery版本爲 jQuery-1.8.3.min.js -->css
一. 複合選擇器對checkbox的相關操做html
|
1
2
3
4
5
|
<
input
type
=
"checkbox"
id
=
"ckb_1"
/>
<
input
type
=
"checkbox"
id
=
"ckb_2"
disabled
=
"true"
/>
<
input
type
=
"checkbox"
id
=
"ckb_3"
/>
<
input
type
=
"checkbox"
id
=
"ckb_4"
/>
<
input
type
=
"button"
id
=
"btn"
value
=
"點擊"
>
|
例.須要把類型爲checkbox，同時"可用"的元素設置成"已選擇"學習
方法①使用屬性過濾選擇器 [type='checkbox'] 和 [disabled!=disabled]this
|
1
|
$(
"input[type='checkbox'][disabled!=disabled]"
).attr(
"checked"
,
true
);
|
注意在這個複合選擇器中，"可用"元素的選擇應使用 disabled!=disabled，而設置屬性時應使用 attr("checked",true)。disabled屬性和checked屬性的用法相似。spa
方法②使用表單選擇器 :checkbox 和屬性過濾選擇器 [disabled!=disabled].net
|
1
|
$(
'input:checkbox[disabled!=disabled]'
).attr(
"checked"
,
true
);
|
方法③使用表單選擇器 :checkbox 和表單對象屬性過濾選擇器 :enabledcode
|
1
|
$(
':checkbox:enabled'
).attr(
"checked"
,
true
);
|
方法④使用.each()遍歷htm
|
1
2
3
4
5
6
7
|
$(
"input[type=checkbox]"
).each(
function
(){
if
($(
this
).attr(
"disabled"
) !=
"disabled"
) {
$(
this
).attr(
"checked"
,
true
);
}
});
|
沒用到複合選擇器。須要注意的和方法①中同樣，在判斷屬性時應該判斷是"disabled"仍是"enable"，而不是false或true。而設置屬性時既能夠用"disabled"或"enable"，也能夠用false或true。對象
二. 複合選擇器的其餘例子ci
|
1
2
3
4
5
6
7
8
9
|
<ul>
<li >第一行</li>
<li class=
"showli"
>第二行</li>
<li class=
"showli"
>第三行</li>
<li>第四行</li>
<li style=
"display:none"
>第五行</li>
<li class=
"showli"
>第六行</li>
<li>第七行</li>
</ul>
|
例. 把第一個class爲showli的li元素背景設爲紅色
|
1
|
$(
"ul li[class=showli]:eq(0)"
).css(
"background"
:
"red"
);
|
結果是'<li class="showli">第二行</li>'的背景變成了紅色。使用了屬性過濾選擇器 [class=showli] 和基本過濾選擇器 eq(0)
例. 把第五個可見的li的背景設爲紅色
|
1
|
$(
"ul li:visible:eq(4)"
).css({
"display"
:
"blaock"
,
"background"
:
"red"
});
|
結果是'<li class="showli">第六行</li>'的背景變成了紅色，display:block是爲了檢測隱藏的li是否會被:visible過濾，display:none下是看不到紅色背景的。使用了可見性過濾選擇器 :visible
例.（比較繞的）把第二個class爲showli的li後面可見的第二個li的背景設成紅色
|
1
|
$(
"ul li.showli:eq(1)"
).nextAll(
"li:visible:eq(1)"
).css({
"display"
:
"block"
,
"background"
:
"red"
});
|
結果是'<li class="showli">第六行</li>'的背景變成了紅色。