首頁 > web前端 > js教程 > jquery選擇器大全 全面詳解jquery選擇器

jquery選擇器大全 全面詳解jquery選擇器

高洛峰
發布: 2016-12-17 16:08:30
原創
1299 人瀏覽過

選擇器並沒有一個固定的定義,在某種程度上說,jQuery的選擇器和樣式表中的選擇器十分相似。選擇器具有以下特點:
1.簡化程式碼的編寫
2.隱式迭代
3.無須判斷物件是否存在
其中「$」是選擇器不可缺少的部分,在jQuery函式庫中,$就是jQuery的一個簡寫形式,例如$("#foo")和jQuery("#foo")是等價的,$.ajax和jQuery.ajax是等價的。如果沒有特別說明,可以把程式中的$符號都理解為jQuery的簡寫形式。
現在我們正式進入jQuery選擇器的學習。根據選擇器的功能習慣將選擇器進行分類,以下將不同類型的分類器進行分類,並且分別進行解釋說明,使讀者達到掌握程度。
一、基本選擇器
基本選擇器包含5種選擇器:#id、element、.class、*和selectorl,selector2.selectorN,下列將配合實例分別介紹每種選擇器的作用及使用方法。
1. #id選擇器
#id選擇器根據給定的ID來匹配一個元素。如果選擇器中包含特殊字符,可以用兩個斜線轉義,其傳回值為Array
2. element選擇器
element選擇器是一個用來搜尋的元素。指向DOM節點的標籤名。其傳回值為Array
3. class選擇器
.class選擇器根據給定的類別來匹配元素,是一個用於搜尋的類別。一個元素可以有多個類,只要有一個符合就能被匹配到,其回傳值為Array

舉例:

<input type="text" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();
登入後複製

即可分別得到元素的值。以上三種為最常見的選擇器,其中ID選擇器是效率最高的,在可能的情況下應該盡量使用它。


4. *選擇器
*選擇器多用於結合上下文來搜索,匹配所有元素的選擇器。其傳回值為Array
5. selector1,selector2,selectorN選擇器
這類選擇器選擇器即將每個選擇器配對到的元素合併後一起回傳。你可以指定任多個選擇器,並將符合的元素合併到一個結果內,其傳回值為:Array。在下例中透過對選擇的項進行CSS操作來使讀者清楚地了解selector1,selector2,selectorN選擇器的作用。
二、層級選擇器
層級選擇器包括5種形式:ancestor、descendant、parent > child、prev + next和prev ~ siblings。以下配合實例分別詳細介紹每種選擇器的作用及使用方法。
1. ancestor descendant選擇器
其指在給定的祖先元素下匹配所有的後代元素,作為參數的ancestor代表任何有效的選擇器,而descendant則用以匹配元素的選擇器,並且它是第一個選擇器的後代。其傳回值為:Array
2. parent>child選擇器
parent>child選擇器代表在給定的父元素下匹配所有的子元素。兩個參數分別代表的意思如下:parent代表任何有效選擇器;child用以符合元素的選擇器,並且它是第一個選擇器的子元素。其傳回值為Array
3. prev+next選擇器
這類選擇器的作用是匹配所有緊接在prev元素後的next元素。兩個參數分別代表的意思如下:prev代表任何有效選擇器;next代表一個有效選擇器並且緊接著第一個選擇器。其傳回值為Array
4. prev ~ siblings選擇器
prev ~ siblings選擇器代表符合prev元素之後的所有siblings元素。兩個參數分別代表的意思如下:prev代表任何有效選擇器;siblings代表一個選擇器,並且它作為第一個選擇器的同儕。其傳回值為Array

舉例:

<div id="divTest">
        <input type="text" value="投资" />
        <input id="next" type="text" />
        <input type="text"  value="担当" />
        <input type="text" title="学习" value="学习" />
        <a>1</a>
        <a>2</a>
</div>
//得到div中的a标签内容 结果为12
jQuery("#divTest a").text();
//输出div直接子节点 结果为投资
jQuery("#divTest>input").val();
//输出id为next的后一个同级别元素 结果为担当
jQuery("#next+input").val();
//同上,并且是有title的元素 结果为学习
jQuery("#next~[title]").val();
登入後複製

三、過濾選擇器
過濾選擇器主要透過特定的過濾規則來篩選出所需的DOM元素,過濾規則與CSS中的偽類選擇器語法相同,即選擇器都以一個冒號開頭。
過濾選擇器涉及的內容較多,總共有6 種類型,但其可以進行歸類。下面我們將對各種類型的選擇器進行詳細講解。
1.基本過濾選擇器
基本過濾選擇器是過濾選擇器中最常用的一種,其主要包括以下幾種形式,在此做詳細說明:
(1):first/:last選擇器。
(2):not選擇器。
(3):even和:odd選擇器。
(4):eq:gt、:lt、選擇器。
(5):header選擇器。
(6):animated選擇器。
舉例:

<div id="divTest">
    <ul>
        <li>投资</li>
        <li>理财</li>
        <li>成熟</li>
        <li>担当</li>
        <input type="radio" value="学习" checked="checked" />
        <input type="radio" value="不学习" />
    </ul>
</div>
//第一个li内容 结果为投资
jQuery("li:first").text();
//最后一个li内容 结果为担当
jQuery("li:last").text();
//input未被选中的值 结果为不学习
jQuery("li input:not(:checked)").val();
//索引为偶数的li 结果为投资 成熟
jQuery("li:even").text();
//索引为奇数的li 结果为理财 担当
jQuery("li:odd").text();
//索引大于2的li的内容 结果为担当
jQuery("li:gt(2)").text();
//索引小于1的li的内容 结果为投资
jQuery("li:lt(1)").text();
登入後複製

2.内容过滤选择器
内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器,这部分过滤器是对上面介绍基本过滤选择器的一个补充,对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。
(1):contains选择器。
(2):empty选择器。
(3):has选择器。
(4):parent选择器。


举例:

<div id="Test">
    <ul>
        <li>hyip投资</li>
        <li>hyip</li>
        <li></li>
        <li>理财</li>
        <li><a>投资</a></li>
    </ul>
</div>   
//包含hyip的li的内容 结果为hyip投资 hyip
jQuery("li:contains(&#39;hyip&#39;)").text();
//内容为空的li的后一个li内容 结果为理财
jQuery("li:empty+li").text();
//包含a标签的li的内容 结果为投资
jQuery("li:has(a)").text();
登入後複製

3.可见性过滤选择器
可见性过滤选择器比较简单,其包含两种选择器,主要是用来匹配所有可见元素和不可见元素。下面将会对这两种选择器进行详细介绍。
(1):hidden选择器。
(2):visible选择器。


举例:

<ul>
    <li>可见</li>
    <li style="display:none;">不可见</li>
</ul>
//不可见的li的内容 结果为不可见
jQuery("li:hidden").text();
//可见的li的内容 结果为可见
jQuery("li:visible").text();
登入後複製

4.属性过滤选择器
属性过滤选择器是用于匹配包含给定属性的元素,当然也可以匹配不包含此属性的元素等。属性过滤选择器共含有以下7种选择器。
(1) [attribute]选择器。
(2)[attribute=value]、[attribute!=value]选择器(此处包含两种)。
(3)[attribute^=value]、[attribute$=value]、[attribute*=value]选择器(此处包含三种)。
(4)[selector][selector2]选择器。
举例:

<input type="text" name="hyipinvest" value="hyip投资" />
<input type="text" name="investhyip" value="投资hyip" />
<input type="text" name="google" value="HYIP" />
//name为hyipinvest的值 结果为hyip投资
alert(jQuery("input[name=&#39;hyipinvest&#39;]").val());
//name以hyip开始的值 结果为hyip投资
alert(jQuery("input[name^=&#39;hyip&#39;]").val());
//name以hyip结束的值 结果为投资hyip
alert(jQuery("input[name$=&#39;hyip&#39;]").val());
//name包含oo的值 结果为HYIP
alert(jQuery("input[name*=&#39;oo&#39;]").val());
登入後複製

5.子元素过滤选择器
html由层层嵌套在一起的标签组成,由于一些标签需要进行单独处理,如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器,具体内容将在下面详细讲解。
(1):nth-child选择器。
(2):first-child、:last-child选择器(两种)。
(3):only-child选择器。
6.表单对象属性过滤选择器
这部分内容相当简单,只包含四种类型的选择器,这些选择器分别用来匹配可用元素或者不可用元素、选中元素等。下面将以实例的形式对此部分内容进行讲解。
(1):enabled、:disabled选择器。
(2):checked选择器。
(3):selected选择器。
表单过滤选择器是用于处理html中表单的选择器,其中不仅仅包括经常用到的按钮、文本域、单选框、复选框等,还涉及了很少用到的图片、隐藏域、文件上传等标签。下面将会对这些选择器进行具体介绍。
(1):input选择器。
(2):text、:password选择器。
(3):radio、:checkbox选择器。
(4):submit、:image、:reset、:button、:file选择器。
(5):hidden选择器。


Query选择器就总结到这里,这些基本上都是在学习过程中遇到的,还有极少部分没有总结出来。经过一段时间实践,相信大家就能够熟练的使用jQuery选择器了。



更多jquery选择器大全 全面详解jquery选择器相关文章请关注PHP中文网!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板