강력한 jQuery 선택기에 대한 자세한 설명: 기본 선택기와 계층적 선택기

강력한 jQuery 선택기에 대한 자세한 설명: 기본 선택기와 계층적 선택기_jquery

WBOY

풀어 주다： 2016-05-16 17:56:37

원래의

1246명이 탐색했습니다.

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 的标签的一组元素

온라인 데모http://demo.jb51.net/js/2012/jquery_demo/jQuery 기본 선택기 example.html
계층적 선택기
DOM 하위 요소, 하위 요소, 인접 요소, 형제 요소 등과 같은 요소 간의 계층적 관계를 기반으로 특정 요소를 얻으려면 계층적 선택기가 매우 좋은 선택입니다.

계층적 선택기의 규칙은 다음과 같습니다.

계층적 선택기

选择器	描述	返回	示例
$("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的元素后面所有兄弟元素

온라인 데모http://demo.jb51.net/js/2012/jquery_demo/jQuery 계층적 선택기 example.html
계층적 선택기에서는 1번과 2번이 더 일반적으로 사용됩니다. , 후자의 두 개는 jQuery에서 더 간단한 메서드로 대체될 수 있기 때문에 상대적으로 덜 사용됩니다.

next() 메소드를 사용하여 $("prev next") 선택기를 대체할 수 있습니다. 즉, $(".one div")는 $(".one").next(와 동일합니다. "div") .

nextAll() 메소드를 사용하여 $("prev~siblings") 선택기, 즉 $(".one~div") 및 $(".one").nextAll( "div") 동일합니다.

요약
이번 글은 jQuery 선택자 중 기본 선택자와 계층적 선택자를 주로 소개하고, 선택자 유형별 샘플 코드를 제공하여 모든 분들께 도움이 되기를 바랍니다. 나는 또한 jQuery의 초보자이므로 누구든지 사용해 볼 수 있습니다.