jquery selector encyclopedia, comprehensive and detailed explanation of jquery selector

Selectors do not have a fixed definition. To a certain extent, jQuery's selectors are very similar to selectors in style sheets. The selector has the following characteristics:
1. Simplify code writing
2. Implicit iteration
3. There is no need to judge whether the object exists. "$" is an indispensable part of the selector. In the jQuery library, $ is an abbreviation of jQuery. For example, $("#foo") and jQuery("#foo") are equivalent. Yes, $.ajax and jQuery.ajax are equivalent. If there is no special instructions, you can understand the $ symbol in the program as the abbreviation of jQuery.
Now we officially enter the study of jQuery selector. Selectors are classified according to their functional habits. Different types of classifiers are classified below and explained respectively to enable readers to master them.
1. Basic selector
The basic selector includes 5 types of selectors: #id, element, .class, * and selectorl, selector2.selectorN. The following will introduce the role and use of each selector with examples.
1. #id selector
#The id selector matches an element based on the given ID. If the selector contains special characters, they can be escaped with two slashes, and the return value is Array.
2. element selector
The element selector is an element used for searching. The tag name pointing to the DOM node. Its return value is Array.
3. class selector
. The class selector matches elements based on a given class and is a class used to search. An element can have multiple classes. As long as there is one match, it can be matched. The return value is Array.

Example:

<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();

can get the values ​​of elements respectively. The above three are the most common selectors, among which the ID selector is the most efficient and should be used whenever possible.

4. *Selector

*Selectors are mostly used to search based on context and match all elements. Its return value is Array.
5. selector1, selector2, selectorN selector
This type of selector combines the elements matched by each selector and returns them together. You can specify any number of selectors and merge the matched elements into one result. The return value is: Array. In the following example, the readers can clearly understand the functions of selector1, selector2, and selectorN by performing CSS operations on the selected items.
2. Level selector
Level selector includes 5 forms: ancestor, descendant, parent > child, prev + next and prev ~ siblings. The following uses examples to introduce the role and use of each selector in detail.
1. The ancestor descendant selector
refers to matching all descendant elements under a given ancestor element. The ancestor as a parameter represents any valid selector, while descendant is a selector used to match elements, and it is the first selector. descendants. The return value is: Array.
2. parent>child selector
parent>child selector means to match all child elements under a given parent element. The meanings of the two parameters are as follows: parent represents any valid selector; child is the selector used to match the element, and it is a child element of the first selector. Its return value is Array.
3. prev+next selector
The function of this type of selector is to match all next elements immediately following the prev element. The meanings of the two parameters are as follows: prev represents any valid selector; next represents a valid selector immediately following the first selector. Its return value is Array.
4. prev ~ siblings selector
prev ~ siblings selector represents all siblings elements that match the prev element. The meanings of the two parameters are as follows: prev represents any valid selector; siblings represents a selector and it serves as the sibling of the first selector. Its return value is Array.

Example:

<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();

3. Filter selector

Filter selector mainly filters out the required DOM elements through specific filtering rules. The filtering rules have the same syntax as the pseudo-class selector in CSS, that is, the selectors are all preceded by a colon. beginning.
Filter selectors involve a lot of content, with a total of 6 types, but they can be classified. Below we will explain various types of selectors in detail.
1. Basic filter selector
The basic filter selector is the most commonly used type of filter selector. It mainly includes the following forms, which are explained in detail here:
(1): first/: last selector.
(2):not selector.
(3) :even and :odd selectors.
(4):eq:gt, :lt, selector.
(5): header selector.
(6):animated selector.
Example:

<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中文网！