Detailed explanation of the powerful jQuery selector: basic selector and hierarchical selector

Detailed explanation of the powerful jQuery selector: basic selector and hierarchical selector_jquery

WBOY

Release： 2016-05-16 17:56:37

Original

1246 people have browsed it

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器(即选择器插件，参考上篇：jQuery插件原来如此简单——jQuery插件的机制及实战)。正是jQuery强大的选择器功能，让它很容易上手，吸引了大批的开发者，本文就来介绍一下强大的jQuery选择器。
jQuery选择器类型
　　jQuery选择器主要分为四类：
　　1、基本选择器
　　2、层次选择器
　　3、过滤选择器
　　4、表单选择器
　　由于过滤选择器内容比较多，因此本文仅介绍前两种，下篇文章将介绍后两种。
一点准备工作
　　为了能让大家看到具体的效果，这里先创建一个示例页面，里面包含各种

和元素，然后用jQuery选择器来匹配元素并调整它们的样式。
　　示例页面代码：

复制代码代码如下:

Demo

id为one,class为one的div

class为mini

id为two,class为one,title为test的div

class为mini,title为other

class为mini,title为test

class为mini

class为mini,title为tesst

包含input的type为hidden的div

正在执行动画的span元素

基本选择器
　　基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能用一次，class允许重复使用。

　　基本选择器规则如下：

基本选择器

选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$("#test")选取 id 为 test 的元素
.class	根据给定的类名匹配元素	集合元素	$(".test")选取所有 class 为 test 的元素
element	根据给定的元素名匹配元素	集合元素	$("p")选取所有的元素
*	匹配所有元素	集合元素	$("*")选取所有的元素
selector1,selector2, ...,selectorN	将每一个选择器匹配到的元素合并后一起返回	集合元素	$("div,span,p.myClass")选取所有，和拥有class为 myClass 的标签的一组元素

Online demonstrationhttp://demo.jb51.net/js/2012/jquery_demo/jQuery basic selector example.html
Hierarchical selector
If you want to pass the DOM To obtain specific elements based on the hierarchical relationship between elements, such as descendant elements, child elements, adjacent elements, sibling elements, etc., then the hierarchical selector is a very good choice.

The rules for hierarchical selectors are as follows:

Hierarchical selector

选择器	描述	返回	示例
$("ancestor descendant")	选取ancestor元素里所有 descendant(后代)元素	集合元素	$("div span")选取里的所有的元素
$("parent>child")	选取parent元素下的child(子)元素	集合元素	$("div>span")选取元素下元素名是的子元素
$("prev next")	选取紧接在prev元素后的next元素	集合元素	$(".one div")选取class为one的下一个兄弟元素
$("prev~siblings")	选取prev元素之后的所有siblings元素	集合元素	$("#two~div")选取id为two的元素后面所有兄弟元素

Online demohttp://demo.jb51.net/js/2012/jquery_demo/jQuery hierarchical selector example.html
In the hierarchical selector, the 1st and 2nd They are more commonly used, and the latter two are relatively less likely to be used because they can be replaced by simpler methods in jQuery.

You can use the next() method to replace the $("prev next") selector, that is, $(".one div") is equivalent to $(".one").next("div") .

You can use the nextAll() method to replace the $("prev~siblings") selector, that is, $(".one~div") and $(".one").nextAll("div") Equivalent.

Summary
This article mainly introduces the basic selectors and hierarchical selectors in jQuery selectors, and gives sample code for each type of selector. I hope it will be helpful to everyone. I am also a beginner of jQuery, so everyone is welcome to try it out.