강력한 jQuery 선택기에 대한 자세한 설명: 기본 선택기와 계층적 선택기_jquery
- WBOY원래의
- 2016-05-16 17:56:371255검색
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器(即选择器插件，参考上篇：jQuery插件原来如此简单——jQuery插件的机制及实战)。正是jQuery强大的选择器功能，让它很容易上手，吸引了大批的开发者，本文就来介绍一下强大的jQuery选择器。
jQuery选择器类型
jQuery选择器主要分为四类：
1、基本选择器
2、层次选择器
3、过滤选择器
4、表单选择器
由于过滤选择器内容比较多，因此本文仅介绍前两种，下篇文章将介绍后两种。
一点准备工作
为了能让大家看到具体的效果，这里先创建一个示例页面，里面包含各种
和元素，然后用jQuery选择器来匹配元素并调整它们的样式。
示例页面代码：
Demo
id为one,class为one的div
id为two,class为one,title为test的div
包含input的type为hidden的div
正在执行动画的span元素
基本选择器
基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每个id名称只能用一次，class允许重复使用。
基本选择器规则如下：
基本选择器
온라인 데모http://demo.jb51.net/js/2012/jquery_demo/jQuery 기본 선택기 example.html
계층적 선택기
DOM 하위 요소, 하위 요소, 인접 요소, 형제 요소 등과 같은 요소 간의 계층적 관계를 기반으로 특정 요소를 얻으려면 계층적 선택기가 매우 좋은 선택입니다.
계층적 선택기의 규칙은 다음과 같습니다.
계층적 선택기
온라인 데모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의 초보자이므로 누구든지 사용해 볼 수 있습니다.
示例页面代码：
复制代码 代码如下:
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
class为mini
class为mini
class为mini
class为mini
class为mini,title为tesst
class为hide的div
包含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 的
|
계층적 선택기
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的元素 后面所有 兄弟元素
|
계층적 선택기에서는 1번과 2번이 더 일반적으로 사용됩니다. , 후자의 두 개는 jQuery에서 더 간단한 메서드로 대체될 수 있기 때문에 상대적으로 덜 사용됩니다.
next() 메소드를 사용하여 $("prev next") 선택기를 대체할 수 있습니다. 즉, $(".one div")는 $(".one").next(와 동일합니다. "div") .
nextAll() 메소드를 사용하여 $("prev~siblings") 선택기, 즉 $(".one~div") 및 $(".one").nextAll( "div") 동일합니다.
요약
이번 글은 jQuery 선택자 중 기본 선택자와 계층적 선택자를 주로 소개하고, 선택자 유형별 샘플 코드를 제공하여 모든 분들께 도움이 되기를 바랍니다. 나는 또한 jQuery의 초보자이므로 누구든지 사용해 볼 수 있습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.