JQuery常用選擇器功能與用法實(shí)例分析
本文實(shí)例講述了JQuery常用選擇器功能與用法。分享給大家供大家參考，具體如下：
JQuery基礎(chǔ)回顧
今天對(duì)JQuery內(nèi)容進(jìn)行了回顧，下面進(jìn)行一些總結(jié)：
JQuery是javascript的一個(gè)庫，所以二者可以相互轉(zhuǎn)換，例如JQuery到Javascript，用$()獲取元素，傳給JS的var變量。反之JS的getElement方法獲取var變量后，可以通過$(var)轉(zhuǎn)化成JQuery對(duì)象。
JQuery的選擇器，
id選擇$("#id")，class選擇$(".class")，元素選擇$("elemrnt")，選擇所有$("*")。層級(jí)選擇器有：子選擇器$("parent>child")選中直接子代，后代選擇器$("ancensterdescendant")選中所有的后代元素，相鄰兄弟選擇器$("prev+next")選中prev之后的第一個(gè)next節(jié)點(diǎn)，一般兄弟選擇$("prev~siblings")選中prev之后所有siblings元素。Jquery常用屬性選擇器如下：
|
$(“:first”) |
選中第一個(gè)元素 |
|
$(“:last”) |
選中最后一個(gè)元素 |
|
$(“:eq(n-1)”) |
選中第n個(gè)元素 |
|
$(“:gt(n-1)”) |
選中n個(gè)以后的所有 |
|
$(“:lt(n-1)”) |
選中n個(gè)以前的所有 |
|
$(“:even”) |
選中偶數(shù)個(gè)元素 |
|
$(“:odd”) |
選中奇數(shù)個(gè)的元素 |
|
$(“:not(selector)”) |
選中除selector選擇外的所有 |
|
$(“:animated”) |
選中執(zhí)行動(dòng)畫的元素 |
|
$(“: header”) |
選中標(biāo)題元素，如h1、h2 |
|
$(“:visible”) |
選中可見的元素 |
|
$(“:hidden”) |
選中隱藏的元素 |
子元素選擇器
|
$(“:first-child”) |
選擇第一個(gè)元素 |
|
$(“:last-child”) |
選擇最后一個(gè)元素 |
|
$(“:only-child”) |
選擇沒有兄弟的元素 |
|
$(“:nth-child(n)”) |
選擇第n個(gè)元素 |
|
$(“:nth-last-child(n)”) |
選擇倒數(shù)第n個(gè)元素 |
First與first-child區(qū)別：
<ul> <li>第1個(gè)ul的第1個(gè)li</li> <li>第1個(gè)ul的第2個(gè)li</li> <li>第1個(gè)ul的第3個(gè)li</li> </ul> <ul> <li>第2個(gè)ul的第1個(gè)li</li> <li>第2個(gè)ul的第2個(gè)li</li> <li>第2個(gè)ul的第3個(gè)li</li> </ul>
first表示（所有父元素合并后的）第一個(gè)元素；first-child表示（每個(gè)父元素的）第一個(gè)
$('ul li:first') 返回"第1個(gè)ul的第1個(gè)li"。 查找所有ul下第一個(gè)li元素
$("ul li:first-child") 返回"第1個(gè)ul的第1個(gè)li"與"第2個(gè)ul的第1個(gè)li"。 查找每個(gè)ul下第一個(gè)元素是li元素dom元素。
常用內(nèi)容選擇器如下：
|
$(“:contains(‘text')”) |
選中包含文本text的元素 |
|
$(“:parent”) |
選中包含內(nèi)容（節(jié)點(diǎn)或文本）的元素 |
|
$(“empty”) |
選中不包含任何內(nèi)容的元素 |
|
$(“:has(selector)”) |
選中包含selector選擇器的元素 |
屬性內(nèi)容選擇器：
|
$(“[attribute]”) |
選中包含指定屬性的元素 |
|
$(“[attribute='value']”) |
選中屬性等于指定值的元素 |
|
$(“[attribute!='value']”) |
選中屬性不等于指定值的元素 |
|
$(“[attribute^='value']”) |
選中屬性以指定值開頭的元素 |
|
$(“[attribute$='value']”) |
選中屬性以指定值結(jié)尾的元素 |
|
$(“[attribute*='value']”) |
選中屬性包含指定值的元素 |
|
$(“[attribute|='value']”) |
選中屬性以指定值為前綴+'-‘的元素 |
|
$(“[attribute~='value']”) |
選中屬性以指定值為前綴+空格的元素 |
|
$(“[attribute1] [attributeN]”) |
多個(gè)屬性值括號(hào)可并列復(fù)選 |
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>屬性篩選選擇器</title>
<link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
<div class="left" testattr="true" >
<div class="div" testattr="true" name='p1'>
<a>[att=val]</a>
</div>
<div class="div" testattr="true" p2>
<a>[att]</a>
</div>
<div class="div" testattr="true" name="t-est">
<a>[att|=val]</a>
</div>
<div class="div" testattr="true" name="a b">
<a>[att~=val]</a>
</div>
</div>
<script type="text/javascript">
//查找所有div中，屬性name=p1的div元素
$('div[name=p1]').css("border", "3px groove red");
//查找所有div中，有屬性p2的div元素
$("div[p2]").css("border", "3px groove blue");
//查找所有div中，屬性name中包含一個(gè)連字符"-"為前綴的div元素
$('div[name|="t"]').css("border", "3px groove #00FF00");
//查找所有div中，屬性name中包含一個(gè)連字符"空"和"a"的div元素
$("div[name~='a']").css("border", "3px groove pink");
</script>
<h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
<div class="left" testattr="true" >
<div class="div" testattr="true" name='start-name'>
<a>[att^=val]</a>
</div>
<div class="div" testattr="true" name='name-end'>
<a>[att$=val]</a>
</div>
<div class="div" testattr="true" name="attr-test-selector">
<a>[att*=val]</a>
</div>
<div class="div" name="a b">
<a>[att!=val]</a>
</div>
</div>
<script type="text/javascript">
//查找所有div中，屬性name的值是用start開頭的
$("div[name^='start']").css("border", "3px groove red");
//查找所有div中，屬性name的值是用end結(jié)尾的
$("div[name$='end']").css("border", "3px groove blue");
//查找所有div中，有屬性name中的值包含一個(gè)test字符串的div元素
$("div[name*='test']").css("border", "3px groove #00FF00");
//查找所有div中，有屬性testattr中的值沒有包含"true"的div
$("div[testattr!='true']").css("border", "3px groove #668B8B");
</script>
</body>
</html>
結(jié)果如下：
表單選擇器
|
$(“input:type”) |
選擇類型為type的表單元素 |
|
$(“:enabled”) |
選擇激活的表單元素 |
|
$(“:disabled”) |
選擇不可用的表單元素 |
|
$(“:checked”) |
選擇選中的表單元素 |
|
$(“:selected”) |
選擇選中的option元素 |
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡單拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯(cuò)誤
今天測試偶然發(fā)現(xiàn)jquery.bgiframe.js在IE9環(huán)境下提示錯(cuò)誤，于是很是好奇，想辦法知道究竟，于是搜索了一下，現(xiàn)在與大家分享希望可以幫助你們2013-01-01
jquery實(shí)現(xiàn)回車鍵觸發(fā)事件(實(shí)例講解)
下面小編就為大家分享一篇jquery實(shí)現(xiàn)回車鍵觸發(fā)事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了jQuery回調(diào)方法使用,結(jié)合具體實(shí)例形式分析了jQuery回調(diào)方法的原理、定義及使用方法,需要的朋友可以參考下2017-06-06
jQuery基于ajax實(shí)現(xiàn)星星評(píng)論代碼
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)星星評(píng)論代碼,可實(shí)現(xiàn)實(shí)時(shí)顯示評(píng)論效果的功能,基于Ajax實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jquery 插件實(shí)現(xiàn)瀑布流圖片展示實(shí)例
本文給大家分享的是使用jQuery的masonry庫和infinitescroll庫實(shí)現(xiàn)的瀑布流美女圖片展示的實(shí)例，效果非常不錯(cuò)，這里推薦給大家，有需要的小火把可以參考下。2015-04-04
jQuery實(shí)現(xiàn)左側(cè)導(dǎo)航模塊的顯示與隱藏效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)左側(cè)導(dǎo)航模塊的顯示與隱藏效果,涉及jQuery相應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-07-07
詳細(xì)介紹jQuery.outerWidth() 函數(shù)具體用法
這篇文章通過jQuery示例代碼演示outerWidth()函數(shù)的具體用法，介紹的非常詳細(xì)，有需要的朋友可以借鑒2015-07-07
這篇文章主要介紹了JQuery獲得內(nèi)容和屬性方法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
jQuery HTML設(shè)置內(nèi)容和屬性操作實(shí)例分析
這篇文章主要介紹了jQuery HTML設(shè)置內(nèi)容和屬性操作,結(jié)合實(shí)例形式分析了jQuery HTML設(shè)置內(nèi)容和屬性相關(guān)函數(shù)與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05