jQuery 復(fù)合選擇器應(yīng)用的幾個例子
<!-- 本文例子所引用的jQuery版本為 jQuery-1.8.3.min.js -->
一. 復(fù)合選擇器對checkbox的相關(guān)操作
<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,同時"可用"的元素設(shè)置成"已選擇"
方法①使用屬性過濾選擇器 [type='checkbox'] 和 [disabled!=disabled]
$("input[type='checkbox'][disabled!=disabled]").attr("checked",true);
注意在這個復(fù)合選擇器中,"可用"元素的選擇應(yīng)使用 disabled!=disabled,而設(shè)置屬性時應(yīng)使用 attr("checked",true)。disabled屬性和checked屬性的用法類似。
方法②使用表單選擇器 :checkbox 和屬性過濾選擇器 [disabled!=disabled]
$('input:checkbox[disabled!=disabled]').attr("checked",true);
方法③使用表單選擇器 :checkbox 和表單對象屬性過濾選擇器 :enabled
$(':checkbox:enabled').attr("checked",true);
方法④使用.each()遍歷
$("input[type=checkbox]").each(function(){ if ($(this).attr("disabled") != "disabled") { $(this).attr("checked",true); } });
沒用到復(fù)合選擇器。需要注意的和方法①中一樣,在判斷屬性時應(yīng)該判斷是"disabled"還是"enable",而不是false或true。而設(shè)置屬性時既可以用"disabled"或"enable",也可以用false或true。
二. 復(fù)合選擇器的其他例子
<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元素背景設(shè)為紅色
$("ul li[class=showli]:eq(0)").css("background":"red");
結(jié)果是'<li class="showli">第二行</li>'的背景變成了紅色。使用了屬性過濾選擇器 [class=showli] 和基本過濾選擇器 eq(0)
例. 把第五個可見的li的背景設(shè)為紅色
$("ul li:visible:eq(4)").css({"display":"blaock","background":"red"});
結(jié)果是'<li class="showli">第六行</li>'的背景變成了紅色,display:block是為了檢測隱藏的li是否會被:visible過濾,display:none下是看不到紅色背景的。使用了可見性過濾選擇器 :visible
例.(比較繞的)把第二個class為showli的li后面可見的第二個li的背景設(shè)成紅色
$("ul li.showli:eq(1)").nextAll("li:visible:eq(1)").css({"display":"block","background":"red"});
結(jié)果是'<li class="showli">第六行</li>'的背景變成了紅色。
相關(guān)文章
Jquery實現(xiàn)無刷新DropDownList聯(lián)動實現(xiàn)代碼
隨著Jquery1.4的發(fā)布,Jquery運(yùn)用越來越多了,讓我們來實現(xiàn)以前經(jīng)常用到的DropDownList無刷新聯(lián)動。2010-03-03使用JQuery 加載頁面時調(diào)用JS的實現(xiàn)方法
下面小編就為大家?guī)硪黄褂肑Query 加載頁面時調(diào)用JS的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05JQEasy-ui在IE9以下版本中二次加載的問題分析及處理方法
之前項目中才用了Easy-ui,但是在同時使用tree和grid的效果時,因為頁面有倆個URL,分別為Ajax樹去后臺取數(shù)據(jù)和Grid取數(shù)據(jù),在IE9以上以及其他瀏覽器里都沒有問題,在Ie低版本時會出現(xiàn)先加載表格,然后一閃而過加載樹渲染頁面,造成頁面只有tree數(shù)據(jù)而沒有表格grid數(shù)據(jù)。2014-06-06servlet+jquery實現(xiàn)文件上傳進(jìn)度條示例代碼
現(xiàn)在文件的上傳,特別是大文件上傳,都需要進(jìn)度條。這篇文章主要介紹了servlet+jquery實現(xiàn)文件上傳進(jìn)度條示例代碼,有興趣的可以了解一下。2017-01-01jQuery中通過ajax的get()函數(shù)讀取頁面的方法
這篇文章主要介紹了jQuery中通過ajax的get()函數(shù)讀取頁面的方法,需要的朋友可以參考下2016-02-02jQuery實現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動畫
這篇文章主要介紹了jQuery實現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動畫,涉及jQuery動畫效果的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-10-10