Jquery库可以通过选择器来让我们实现元素的快速定位和对选中元素的DOM操作。现在我们认识到过于频繁的DOM操作会影响应用的性能,但对于VUE、REACT框架不显的时代,Jquery的出现可以说是前端的一大神器,极大的缩减了我们的开发时间和实现难度。说是忆苦思甜也好,说是全面了解前端发展也罢,JQuery的基本操作和封装思想都是我们不可忽视。这篇文章主要是来介绍了解下常用的Jquery选择器分类和选择器使用方法。
Jquery选择一般的被我们分为:基本选择器、层次选择器、过滤选择器、表单选择器这四大类。
基本选择器
基本选择器是Jquery最常见的选择器,一般的我们可以通过元素的id、class、属性、元素名来定位元素。其他的所有选择器也是基于基本选择器的基础上的变形结构,常见的基本选择器类型如:
- ID选择器
- Class选择器
- 元素选择器
- 属性选择器
$("#selector") 选择id值为selector的元素,id值是唯一的所以返回单个元素。 $("p") 选择所有的p标签元素,返回p元素数组 $(".myclass") 选择使用myclass类的css的所有元素 $("*") 选取所有元素。 $("#test,div,.myclass") 选取多个元素。
层次选择器
层次选择器让我们可以通过元素的层级关系来定位元素,如果我们想通过元素之间的关系来获取特定的元素,那么层次选择器是一个非常好的选择。一般的我们会通过相应的链接符号来指代对应元素直接的层级关系,常见的层级关系如下:
- 空格:空格指代元素的子孙元素
- > : 指代元素的子元素
- +,next():指代元素的兄弟节点元素(当前元素之后的同级元素),定位的为单个元素
- ~,nextAll():指代元素的所有兄弟节点元素(当前元素之后的统计元素)
- prev():这是不同于css的一个只想元素同级的上一个元素
- siblings():指代元素的所有统计元素(包括上级和下级)
$("div span") 选取<div>里的所有<span>元素 $("div >span") 选取<div>元素下元素名是<span>的子元素 $("#one +div") 选取id为one的元素的下一个<div>同辈元素 等同于$("#one").next("div") $("#one~div") 选取id为one的元素的元素后面的所有<div>同辈元素 等同于$("#one").nextAll("div") $("#one").siblings("div") 获取id为one的元素的所有<div>同辈元素(不管前后) $("#one").prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素 所以 获取元素范围大小顺序依次为: $("#one").siblings("div")>$("#one~div")>$("#one +div") 或是 $("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")
过滤选择器
Jquery可以通过相应的过滤规则来过滤我们选择的部分元素,我们可以通过css中已有的伪元素、也可以通过jquery特有的伪元素、方法来过滤。通常情况下,我们可以根据过滤的方式的不同又可以将过滤选择器分为:基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器以及表单对象属性过滤选择器,下面我们通过例子来了解他们的使用的不同。
- 基本过滤选择器
基本过滤选择器一般都是通过一些常见的伪元素来过滤选择
$("div:first") 选取所有<div>元素中第1个<div>元素 $("div:last") 选取所有<div>元素中最后一个<div>元素 $("input:not(.myClass)") 选取class不是myClass的<input>元素 $("input:even") 选取索引是偶数的<input>元素(索引从0开始) $("input:odd") 选取索引是基数的<input>元素(索引从0开始) $("input:eq(2)") 选取索引等于2的<input>元素 $("input:gt(4)") 选取索引大于4的<input>元素 $("input:lt(4)") 选取索引小于4的<input>元素 $(":header") 过滤掉所有标题元素,例如:h1、h2、h3等 $("div:animated") 选取正在执行动画的<div>元素 $(":focus") 选取当前获取焦点的元素
- 内容过滤选择器
内容过滤器中所提供的过滤伪元素,如:contains之内的都是jquery中内置式赋予能力的,属于自定义的通过元素的内容来实现元素的过滤的
$("div:contains('Name')") 选取所有<div>中含有'Name'文本的元素 $("div:empty") 选取不包含子元素(包括文本元素)的<div>空元素 $("div:has(p)") 选取所有含有<p>元素的<div>元素 $("div:parent") 选取拥有子元素的(包括文本元素)<div>元素
- 可见性过滤选择器
这个通过例子比较明显的可以看出是通过元素的显示状态来进行过滤的,其实现是将集中不同的属性组合在一起,降低我们操作的复杂程度。
$("div:hidden") 选取所有不可见的<div>元素 $("div:visible") 选取所有可见的<div>元素
- 属性过滤选择器
属性过滤选择器可以说是我们比较常见,也比较常用的方式,jquery服务我们通过元素的属性名来过滤选择的功能,属性名可以是默认的也可以是自定义的。
$("div[id]") 选取所有拥有属性id的元素 $("input[name='test']") 选取所有的name属性等于'test'的<input>元素 $("input[name!='test']") 选取所有的name属性不等于'test'的<input>元素 $("input[name^='news']") 选取所有的name属性以'news'开头的<input>元素 $("input[name$='news']") 选取所有的name属性以'news'结尾的<input>元素 $("input[name*='news']") 选取所有的name属性包含'news'的<input>元素 $("div[title|='en']") 选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素 $("div[title~='en']") 选取属性title用空格分隔的值中包含字符en的<div>元素 $("div[id][title$='test']") 选取拥有属性id,并且属性title以'test'结束的<div>元素
- 子元素过滤选择器
$("div .one:nth-child(2)") 选取class为'one'的<div>父元素下的第2个子元素 $("div span:first-child") 选取每个<div>中的第1个<span>元素 $("div span:last-child") 选取每个<div>中的最后一个<span>元素 $("div button:only-child") 在<div>中选取是唯一子元素的<button>元素
- 表单对象属性过滤选择器
这个可以被单独列为一类,可以说是和表单类组件的特有属性相关,其实这种选择我们也可以通过上述的属性过滤方式来实现,这里只是简化了书写方式,并不常用。
$("#form1 :enabled") 选取id为'form1'的表单内所有可用元素 $("#form2 :disabled") 选取id为'form2'的表单内所有不可用元素 $("input :checked") 选取所有被选中的<input>元素 $("select option:selected") 选取所有的select 的子元素中被选中的元素
表单选择器
表单选择器可以说和上述的表单过滤选择器有点类似,其主要使用还是为了让我们的表单选择操作变得更加的简便和易懂。
$(":input") 选取所有<input>,<textarea>,<select> 和 <button>元素 $(":text") 选取所有的单行文本框 $(":password") 选取所有的密码框 $(":radio") 选取所有单的选框 $(":checkbox") 选取所有的多选框 $(":submit") 选取所有的提交按钮 $(":image") 选取所有的图像按钮 $(":reset") 选取所有的重置按钮 $(":button") 选取所有的按钮 $(":file") 选取所有的上传域 $(":hidden") 选取所有不可见元素
上述的所有选择器或许中间存在交叉重复处,要知道对于Jquery选择器的分类其实无甚特别含义,只是为了我们更好更方便的取记忆使用罢了。所以,真正使用的时候不可过于拘泥于使用的类型,我们真正关注的只有两点:
- 解决实现问题
- 更好的解决实际问题