锋利的jQuery学习笔记之jQuery选择器

Posted HelloWhy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了锋利的jQuery学习笔记之jQuery选择器相关的知识,希望对你有一定的参考价值。

在介绍jQuery选择器之前,先简单介绍一下CSS选择器--->

一、CSS选择器

常见的CSS选择器有以下几种:

选择器 语法 描述 示例
标签选择器 E{CSS规则} 以文档元素为选择符

td{font-size:10px;}

a{tetx-decoration:none;}

ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;}
类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{background-color:yellow;}
群组选择器 E1,E2,E3{CSS规则}

以多个文档元素作为选择符

p,div,a,span{font-size:10px;}
后代选择器 E F{CSS规则} 以元素E的任意后代元素F作为选择器 div input{font:10px black;}
通配选择器 *{CSS规则} 以文档所有元素作为选择器 *{font-size:10px;}

 

 

 

 

 

 

 

 

 

 

 

二、jQuery选择器

jQuery选择器完全继承CSS选择器,可以快速找到DOM元素并添加对应的行为。

jQuery共有基本选择器、层次选择器、过滤选择器和表单选择器。下面对这几类选择器一一介绍

1、基本选择器

基本选择器
选择器 描述 返回 示例
element 根据给定的元素名称匹配元素 集合元素 $("p")选取所有的p元素
#id 根据给定的id匹配指定的元素 一个元素 $("#nodeName")选取id为nodeName的元素
#className

根据给定的class名称匹配元素

集合元素 $("div.span")选择class为span的所有div
*

匹配所有的元素

集合元素 $("*")选择所有的元素
selecter1,selecter,...,selecterN 将每一个选择器匹配的元素合并后返回 集合元素 $("div,span,p.info")选择所有的div\span和class为info的p元素

 

 

 

 

 

 

 

 

2、层次选择器

层次选择器
选择器 描述 返回 示例
$("ancestor descendant") 选择ancestor里的所有descendant(后代)元素 集合元素 $("div span")选取div里的所有span元素
$("parent > child")

选择parent的child(子)元素

PS:$("ancestor descendant")是选择后代(包括孙辈元素)

     $("parent > child")只选择子元素

集合元素 $("div > span")选择div元素下名为span的子元素
$("pre + next‘) 选择紧接在pre元素后的下一个同辈元素 集合元素 $(".one + div")选择class为one后面的第一个div同辈元素
$("pre ~ siblings") 选择pre元素后面的所有同辈元素 集合元素 $("#two ~ div")选择id为two后面的所有div同辈元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

jQuery中的方法可以代替上面的某些选择器:

  • next()方法等价于$("pre + next")。所以$(".one + div")就等价于$(".one").next();
  • nextAll()方法等价于$("pre ~ siblings")。所以$("#two ~ div")就等价于$("#two").nextAll();
  • siblings()方法是获取当前元素的所有同辈元素,不分前后;

3、过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS的伪类选择器语法相同,即选择器都是以一个冒号(:)开头,按照不同的过滤规则,过滤选择器可以分为:

基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤

 

基本过滤选择器
选择器 描述 返回 示例
:first 选择第一个元素 单个元素 $("div:first")选择所有div中的第一个元素
:last 选择最后一个元素 单个元素

$("div:last")选择所有div中的最后一个元素

:not(selector) 去所有与给定选择器匹配的元素 集合元素 $("div:not(‘.div1‘)")选择class不是div1所有div元素
:even 选择索引值为偶数的元素 集合元素 $("tr:even")选择索引值为偶数的tr元素
:odd 选择索引值为奇数的元素 集合元素 $("tr:odd")选择索引值为奇数的tr元素
:eq(index) 选择索引值等于index的元素 单个元素 $("input:eq(2)")选择索引值为2的元素,即第三个input元素(索引从0开始)
:gt(index) 选择索引值大于index的元素 集合元素 $("inputgt(2)")选择索引值大于2的元素,即第三个input后面的元素(索引从0开始)
:lt(index) 选择索引值小于index的元素 集合元素 $("input:lt(2)")选择索引值小于2的元素,即第三个input前面的元素(索引从0开始)
:header 选择所有的标题元素,例如h1,h2等 集合元素 $("header")选择网页中所有的标题元素h1到h6
:animated 选择当前正在执行动画的元素 集合元素 $("div:animated")选择正在执行动画的div元素
:focus 选择所有获取焦点的元素 集合元素 $(":focus")选择网页中所有获取焦点的元素

 

 

 

 

 

 

 

 

 

 

 

 

 

内容过滤选择器:它的过滤规则主要体现在它所包含的子元素或文本内容上。

内容过滤选择器
选择器 描述 返回 示例
:contains(text) 选择文本内容包含text的元素 集合元素 $("div:contains(‘学生‘)")选择文本内容包含“学生”的所有div元素
:empty 选择不包含子元素或内容为空的元素 集合元素 $("div:empty")选择不包含子元素或者内容为空的div元素
:has(selector) 选择包含匹配选择器元素的元素 集合元素 $("div:has(p)")选择包含p元素的div元素
:parent

选择含有子元素或者文本的元素

集合元素 $("div:parent")选择含有子元素或者文本内容不为空的div元素

 

 

 

 

 

 

可见性过滤选择器根据元素的可见和不可见性来选择元素。

可见性过滤选择器

选择器 描述 返回 示例
:hidden 选择所有的隐藏元素 集合元素

$(":hidden")选择页面所有的隐藏元素

PS:隐藏元素包括样式属性display为none,visibility为hidden及隐藏的表单域

:visible 选择所有的可见元素 集合元素 $("div:visible")选择所有可见的div元素

 

 

 

 

 

属性过滤选择器是根据元素属性选择相应的元素

属性过滤选择器
过滤器 描述 返回 示例
[attribute] 选择包含该属性的元素 集合元素 $("div[id]")选择含有id属性的div元素
[attribute=value] 选择属性值等于value的元素

集合元素

$("div[id=‘div1‘]")选择id属性值等于div1的div元素
[attribute!=value] 选择属性值不等于value的元素 集合元素 $("div[id!=‘div1‘]选择id属性值不等于div1的div元素
[attribute^=value] 选择属性值以value开头的元素 集合元素 $("div[id^=‘div1‘]选择id属性值以div1开头的div元素
[attribute$=value] 选择属性值以value结尾的元素 集合元素

$("div[id$=‘div1‘]选择id属性值以duv1结尾的div元素

 

[attribute*=value] 选择属性值包含value的元素 集合元素 $("div[id*=‘div1‘]选择id属性值包含div1的div元素
[attribute|=value] 选择属性值为value或以value为前缀(该字符串后面跟一个连字符’-‘)的元素 集合元素 $("div[id|=‘div1‘]选择id属性值为div1或者以div1为前缀的div元素
[attribute~=value] 选择属性用空格分隔的值中包含一个给定值的元素 集合元素 $("div[id~=‘div1‘]选择id属性用空格分隔的值中等于div1的div元素
[attribute1][attribute2][attribute3] 用属性选择器合并成一个复合属性选择器,满足多个条件,没选择依一次,缩小一次选择 集合元素 $("div[id][title=‘hello‘])选择含有id属性并且title的属性值为hello的div元素

 

子元素过滤选择器是针所有父元素进行过滤,而不只是某一个指定的父元素

子元素过滤选择器
选择器 描述 返回 示例
:nth-child(index/even/odd/equation) 选择每个父元素下第index的子元素或者奇偶于元素(index从1开始) 集合元素 :eq(index)只匹配一个元素,而:nth-child(index)将匹配每一个父元素中索引值为index的子元素,且前者的索引从0开始,后者索引从1开始。

:first-child

选择每个父元素的第一个子元素 集合元素

:first只返回单个元素,而:first-child将返回每一个父元素中的第一个元素

$("ul li:last-child")选择每个ul中的第一个元素

:last-child 选择每一个父元素的最后一个子元素 集合元素

:last只返回打个元素,而:last-child将返回每一个父元素中的最后一个元素

$("ul li:first-child")选择每个ul中的最后一个元素

:only-child 如果某个元素是它父元素中的唯一子元素,那么它将被匹配,否则不会被匹配 集合元素 $("ul li:only-child")获取的是ul中的唯一子元素li

 

表单元素属性过滤器,主要是对所选择的的表单元素进行过滤。

表单对象属性过滤器
选择器 描述 返回 示例
:enabled 选择所有可用的表单元素 集合元素 $("#form1 :enabled")选择id=form1的表单内所有可用元素
:disabled 选择所有不可用的表单元素 集合元素 $("#form1 :disabled")选择id=form1的表单内所有不可用元素
:checked 选择所有被选中的元素(包括单选框、复选框) 集合元素 $("#input:checked")选择所有被选中的input元素
:selected 选择所有被选中的选项元素(下拉列表) 集合元素 $("select option:selected")选择i所有被选中的选项元素

 至此,所有的过滤选择器就介绍完了,下面介绍最后一种选择器-----表单选择器

3、表单选择器

利用表单选择器可以方便地获取到某个或某种类型的元素

表单选择器
选择器 描述 返回 示例
:input 选择所有的input、textarea、button、select元素 集合元素 $(":input")选择所有的input、textarea、select、button元素
:text 选择所有的单行文本框 集合元素 $(":text")选择所有的单行文本框
:password 选择所有的密码框 集合元素 $(":password")选择所有的密码框
:radio 选择所有的单选框 集合元素 $(":radio")选择所有的单选框
:checkbox 选择所有的复选框 集合元素 $(":checkbox")选择所有的复选框
:submit 选择所有的提交按钮 集合元素 $(":submit")选择所有的提交按钮
:image 选择所有的图片按钮 集合元素 $(":image")选择所有的图片按钮
:reset 选择所有的重置按钮 集合元素 $(":reset")选择所有的重置按钮
:button 选择所有的按钮 集合元素 $(":button")选择所有的按钮
:file 选择所有的上传域 集合元素 $(":file")选择搜有的上传域
:hidden 选择所有的隐藏域 集合元素 $(":hidden")选择所有的隐藏域(这个已经在之前的不可见性过滤器中讲到过)

 以上就是jQuery中所有的选择器及使用方法,这么多的选择器,要想每一个都能理解,关键还在实践。

以上是关于锋利的jQuery学习笔记之jQuery选择器的主要内容,如果未能解决你的问题,请参考以下文章

jQuery总结或者锋利的jQuery笔记二

锋利的JQuery学习笔记之JQuery

锋利的JQuery 学习笔记

《锋利的jQuery》读书笔记

锋利的jQuery读书笔记 第11章

认识 jQuery (第一笔 点出重点)