前端基础-jQuery的内容之选择器

阅读目录

1. ID选择器
2. 类选择器
3. 元素选择器
4. 通配符选择器
5. 层级选择器
6. 基本筛选器
7. 内容筛选器
8. 可见性筛选器
9. 属性筛选器
10. 子元素筛选器
11. 表单元素筛选器
12. 表单对象筛选器
13. this和$(this)

1、jQuery选择器之id选择器

页面的任何操做都须要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。

jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者能够更少的处理复杂选择过程与性能优化，更多专一业务逻辑的编写。

jQuery几乎支持主流的css1~css3选择器的写法，咱们从最简单的也是最经常使用的开始学起

id选择器：一个用来查找的ID，即元素的id属性

$( "#id" )

id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。

原生语法的支持老是很是高效的，因此在操做DOM的获取上，若是能采用id的话尽然考虑用这个选择器

值得注意：

id是惟一的，每一个id值在一个页面中只能使用一次。若是多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。
但这种行为不该该发生;有超过一个元素的页面使用相同的id是无效的

2、jQuery选择器之类选择器

类选择器，顾名思义，经过class样式类名来获取节点

描述：

$( ".class" )

类选择器，相对id选择器来讲，效率相对会低一点，可是优点就是能够多选

配合使用：

$("div.c1")  // 找到有c1 class类的div标签

使用jQuery选择节点，不只仅只是选择上的简单，同时还增长不少关联的便利操做，后续咱们还会慢慢的学到其余的优点。

 

3、jQuery选择器之元素选择器

元素选择器：根据给定（html）标记名称选择全部的元素

描述：

$( "element" )

搜索指定元素标签名的全部节点，这个是一个合集的操做。一样的也有原生方法getElementsByTagName()函数支持

右边编辑器代码所示：

第一组：经过getElementsByTagName方法获得页面全部的<div>元素

var divs = document.getElementsByTagName('div');

divs是dom合集对象，经过循环给每个合集中的<div>元素赋予新的boder样式

第二组：一样的效果，$("p")选取全部的<p>元素，经过css方法直接赋予样式

 

4、jQuery选择器之通配选择器（*选择器）

在CSS中，常常会在第一行写下这样一段样式

* {padding: 0; margin: 0;}

通配符*意味着给全部的元素设置默认的边距。jQuery中咱们也能够经过传递*选择器来选中文档页面中的元素

描述：

$( "*" )

抛开jQuery，若是要获取文档中全部的元素，经过document.getElementsByTagName()中传递"*"一样能够获取到

不难发现，id、class、tag均可以经过原生的方法获取到对应的节点，可是咱们还须要考虑一个兼容性的问题，我这里顺便说起一下，好比:

1. IE会将注释节点实现为元素，因此在IE中调用getElementsByTagName里面会包含注释节点，这个一般是不该该的
2. getElementById的参数在IE8及较低的版本不区分大小写
3. IE7及较低的版本中，表单元素中，若是表单A的name属性名用了另外一个元素B的ID名而且A在B以前，那么getElementById会选中A
4. IE8及较低的版本，浏览器不支持getElementsByClassName

5、jQuery选择器之层级选择器

文档中的全部的节点之间都是有这样或者那样的关系。咱们能够把节点之间的关系能够用传统的家族关系来描述，

能够把文档树看成一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。

选择器中的层级选择器就是用来处理这种关系

子元素 后代元素 兄弟元素 相邻元素

经过一个列表，对比层级选择器的区别

 仔细观察层级选择器之间仍是有不少类似与不一样点

1. 层级选择器都有一个参考节点
2. 后代选择器包含子选择器的选择的内容
3. 通常兄弟选择器包含相邻兄弟选择的内容
4. 相邻兄弟选择器和通常兄弟选择器所选择到的元素，必须在同一个父元素下

6、jQuery选择器之基本筛选器

不少时候咱们不能直接经过基本选择器与层级选择器找到咱们想要的元素，为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。

筛选器不少都不是CSS的规范，而是jQuery本身为了开发者的便利延展出来的筛选器

筛选器的用法与CSS中的伪元素类似，选择器用冒号“：”开头，经过一个列表，看看基本筛选器的描述：

注意事项：

1. :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据以前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
2. gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

7、jQuery选择器以内容筛选器

基本筛选器针对的都是元素DOM节点，若是咱们要经过内容来过滤，jQuery也提供了一组内容筛选器，固然其规则也会体如今它所包含的子元素或者文本内容上

内容过滤器描述以下表：

注意事项：

1. :contains与:has都有查找的意思，可是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
2. 若是:contains匹配的文本包含在元素的子元素中，一样认为是符合条件的。
3. :parent与:empty是相反的，二者所涉及的子元素，包括文本节点

8、jQuery选择器之可见性筛选器

元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden

描述以下：

这2个选择器都是 jQuery 延伸出来的，看起来比较简单，可是元素可见性依赖于适用的样式

:hidden选择器，不只仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

咱们有几种方式能够隐藏一个元素：

1. CSS display的值是none。
2. type="hidden"的表单元素。
3. 宽度和高度都显式设置为0。
4. 一个祖先元素是隐藏的，该元素是不会在页面上显示
5. CSS visibility的值是hidden
6. CSS opacity的指是0

若是元素中占据文档中必定的空间,元素被认为是可见的。 可见元素的宽度或高度，是大于零。

元素的visibility: hidden 或 opacity: 0被认为是可见的，由于他们仍然占用空间布局。

不在文档中的元素是被认为是不可见的，若是当他们被插入到文档中，jQuery没有办法知道他们是不是可见的，由于元素可见性依赖于适用的样式

 

9、jQuery选择器之属性筛选器

属性选择器让你能够基于属性来定位一个元素。能够只指定该元素的某个属性，这样全部使用该属性而无论它的值，这个元素都将被定位，

也能够更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展现它们的威力的地方。

描述以下：

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

[attr="value"]能帮咱们定位不一样类型的元素，特别是表单form元素的操做，好比说input[type="text"],input[type="checkbox"]等
[attr*="value"]能在网站中帮助咱们匹配不一样类型的文件

10、jQuery选择器之子元素筛选器

子元素筛选器不常使用，其筛选规则比起其它的选择器稍微要复杂点

子元素筛选器描述表：

注意事项：

1. :first只匹配一个单独的元素，可是:first-child选择器能够匹配多个：即为每一个父级元素匹配第一个子元素。这至关于:nth-child(1)
2. :last 只匹配一个单独的元素， :last-child 选择器能够匹配多个元素：即，为每一个父级元素匹配最后一个子元素
3. 若是子元素只有一个的话，:first-child与:last-child是同一个
4.  :only-child匹配某个元素是父元素中惟一的子元素，就是说当前子元素是父元素中惟一的元素，则匹配
5. jQuery实现:nth-child(n)是严格来自CSS规范，因此n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前日后计算，后者从后往前计算

11、jQuery选择器之表单元素器

不管是提交仍是传递数据，表单元素在动态交互页面的做用是很是重要的。jQuery中专门加入了表单选择器，从而可以极其方便地获取到某个类型的表单元素

表单选择器的具体方法描述：

注意事项：

除了input筛选器，几乎每一个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可使用属性筛选器替换。好比 $(':password') == $('[type=password]')

 

12、jQuery选择器之表单对象属性筛选器

除了表单元素选择器外，表单对象属性筛选器也是专门针对表单元素的选择器，能够附加在其余选择器的后面，主要功能是对所选择的表单元素进行筛选

表单筛选选择器的描述：

注意事项：

1. 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
2. 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，因此保险起见换用选择器input:checked，确保只会选取<input>元素

十3、jQuery选择器之特殊选择器this

相信不少刚接触jQuery的人，不少都会对$(this)和this的区别模糊不清，那么这二者有什么区别呢？

this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的全部者

下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc

var imooc = {
    name:"多多帅",
    getName:function(){
        //this,就是imooc对象
        return this.name;
    }
}
imooc.getName(); //多多帅

固然在JavaScript中this是动态的，也就是说这个上下文对象都是能够被动态改变的(能够经过call,apply等方法)，具体的你们能够查阅相关资料

一样的在DOM中this就是指向了这个html元素对象，由于this就是DOM元素自己的一个引用

假如给页面一个P元素绑定一个事件:

p.addEventListener('click',function(){
    //this === p
    //如下二者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

经过addEventListener绑定的事件回调中，this指向的是当前的dom对象，因此再次修改这样对象的样式，只须要经过this获取到引用便可

this.style.color = "red"

可是这样的操做其实仍是很不方便的，这里面就要涉及一大堆的样式兼容，若是经过jQuery处理就会简单多了，咱们只须要把this加工成jQuery对象

换成jQuery的作法：

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

经过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，咱们就能够用jQuery提供的快捷方法直接处理样式了

整体：

this，表示当前的上下文对象是一个html对象，能够调用html对象所拥有的属性和方法。 $(this),表明的上下文对象是一个jquery的上下文对象，能够调用jQuery的方法和属性值。
在python语言中，this就是面向对象的self，对象本身，能够调用所拥有的属性和方法

1).基本 ·#id 根据给定的ID匹配一个元素。例如：$("#id") ·element 根据给定的元素名匹配全部元素。例如：$("div") ·.class 根据给定的类匹配元素。例如：$(".style1"); ·* 匹配全部元素。例如：$("*") ·selector1,selector2,selectorN 将每个选择器匹配到的元素合并后一块儿返回。例如：$("#id,div,.style1") 2).表单 ·:button 匹配全部按钮。例如：$(":button") ·:checkbox 匹配全部复选框。例如：$(":checkbox") ·:file 匹配全部文件域。例如：$(":File") ·:hidden 匹配全部不可见元素，或者type为hidden的元素。例如：$("input:hidden") ·:image 匹配全部图像域。例如：$(":image") ·:input 匹配全部 input, textarea, select 和 button 元素。例如：$(":input") ·:password 匹配全部密码框。例如：$(":password") ·:radio 匹配全部单选按钮。例如：$(":radio") ·:reset 匹配全部重置按钮。例如：$(":reset") ·:submit 匹配全部提交按钮。例如：$(":submit") ·:text 匹配全部的单行文本框。例如：$(":text") ·:header 匹配如 h1, h2, h3之类的标题元素。例如：$(":header").css("background", "#EEE"); 2.筛选条件 1).属性筛选 ·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如：$("input[name*='man'") ·[attribute!=value] 匹配全部含有指定的属性，但属性不等于特定值的元素。例如：$(input[name!='man'); ·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如：$("input[name$='man']") ·[attribute=value] 匹配给定的属性是某个特定值的元素。例如：$("input[name='man']"); ·[attribute] 匹配包含给定属性的元素。例如：$("div[id]") ·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如：$("input[name^='man']") ·[selector1][selector2][selectorN] 同时知足多个条件。例如：$("input[id][name$='man']") ·:hidden 匹配全部的不可见元素。例如：$("tr:hidden") ·:visible 匹配全部的可见元素。例如：$("tr:visible") ·:checked 匹配全部选中的被选中元素(复选框、单选框等，不包括select中的option)。例如：$("input:checked") ·:disabled 匹配全部不可用元素。例如：$("input:disabled") ·:enabled 匹配全部可用元素。例如：$("input:enabled") ·:selected 匹配全部选中的option元素。例如：$("select option:selected") 2).内容筛选 ·:contains(text) 匹配包含给定文本的元素。例如：$("div:contains('John')") ·:empty 匹配全部不包含子元素或者文本的空元素。例如：$("td:empty") ·:has(selector) 匹配含有选择器所匹配的元素的元素。例如：$("div:has(p)"); ·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent") 3).层级筛选 ·ancestor descendant 在给定的祖先元素下匹配全部的后代元素。例如：$("form input") ·parent > child 在给定的父元素下匹配全部的子元素。例如：$("form > input") ·prev + next 匹配全部紧接在 prev 元素后的 next 元素。例如：$("label + input") ·prev ~ siblings 匹配 prev 元素以后的全部 siblings 元素。例如：$("form ~ input") ·:first-child 匹配第一个子元素。例如：$("ul li:first-child") ·:last-child 匹配最后一个子元素。例如：$("ul li:last-child") ·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如：$("ul li:nth-child(2)")
·:only-child 若是某个元素是父元素中惟一的子元素，那将会被匹配。例如：$("ul li:only-child") 4).方法筛选 ·:animated 匹配全部正在执行动画效果的元素。例如：$("div:animated"); ·:eq(index) 匹配一个给定索引值的元素。例如：$("tr:eq(1)") ·:even 匹配全部索引值为偶数的元素，从 0 开始计数。例如：$("tr:even") ·:first 匹配找到的第一个元素。例如：$("tr:first") ·:gt(index) 匹配全部大于给定索引值的元素，从 0 开始计数。例如：$("tr:gt(0)") ·:last 匹配找到的最后一个元素。例如：$("tr:last") ·:lt(index) 匹配全部小于给定索引值的元素。例如：$("tr:lt(2)") ·:not(selector) 去除全部与给定选择器匹配的元素。例如：$("input:not(:checked)") ·:odd 匹配全部索引值为奇数的元素，从 0 开始计数。例如：$("tr:odd")

文字版的总结