本章简介:
选择器是JQuery的核心之一,JQuery沿用了CSS选择器获取元素的功能,使得开发者能够在DOM中快捷且轻松的获取元素及其集合。
本章按JQuery选择器获取元素的方式不同,大致可以分为通过CSS选择器,条件过滤选择器两种方式获取元素。
本章单词:
sibling 兄弟姐妹
First 第一个
Last 最后
Not 不
Even 偶数
Odd 奇数
Header 头部
6、1 什么是JQuery选择器
1、选择器是JQuery的基础,在JQuery中,对于事件处理,遍历DOM 和 ajax 操作都依赖于选择器。
2、JQuery选择器可通过CSS3选择器,条件过滤选择器两种方式获取元素。
通过CSS3选择器语法规则获取元素,包括基本选择器、层次选择器、属性选择器
通过条件过滤选择器选取元素,包括基本过滤选择器和可见性选择器。
3、JQuery选择器不仅良好的继承了CSS选择器的语法,还继承了其获取元素便捷高效的特点。
4、JQuery选择器与CSS选择器不同之处在于,JQuery选择器获取元素后,为该元素添加的是行为,使页面交互变得更加丰富多彩。
5、JQuery选择器拥有更简洁的写法,和完善的处理机制。
6、2 通过CSS3选择器选取元素
1、基本选择器
JQuery基本选择器和CSS基本选择器相同,它继承了CSS选择器的语法和功能。
主要由元素标签名、class、id、和多个选择器组成,通过基本选择器就可以实现大多数页面元素的查找。
$("h1"); //标签选择器,选择标签元素, 选择所有的 h1 $("#name"); //id选择器,以 # 开头,选择一个 id 为name 的标签 $(".title"); //类选择器,以 点 开头,选择若干个 class 为 title 的标签 $("h1,#name,.title"); //并集选择器 , 写几个选择几个 $("*"); //全局选择器,选择全部的元素,
2、层次选择器
JQuery中的层次选择器与 CSS选择器中的相同,它们都是根据获取元素的与其父元素、子元素、兄弟元素关系而构成的选择器。
JQuery中有四种层次选择器,分别是后代选择器、子选择器、相邻兄弟选择器、同辈元素选择器,其中最常用的是后代选择器。
$("div span"); //后代选择器,空格隔开, 选择 div 里面的 所有span $("div>span"); //子选择器,用大于号表示, 选择 div 里面一层的 span $("div+span"); //相邻兄弟选择器,加号表示, 选择 div 后面一个 span $("div~span"); //同辈元素选择器,用 ~ 表示,选择 div 后面所有的 span
3、属性选择器
属性选择器就是通过 HTML元素的属性选择元素的选择器,它与CSS3的属性选择器语法完全一致。
属性选择器是CSS选择器中非常有用的选择器,它遵循CSS选择器。
$("[href]"); //选择包含指定属性的元素 $("[href='#']"); //选取等于指定属性是某个特定值的元素 $("[href!='#']")//选取不等于指定属性是某个特定值的元素 $("[href^='#']");//选取指定属性是某个特定值开头的元素 $("[href$='#']");//选取指定属性是某个特定值结尾的元素 $("[href*='#']");//选取指定属性值包含某些的元素
6、3 通过条件过滤器选取元素
条件过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类语法相同,即选择器选择器都以一个 冒号 :开头,冒号前是需要过滤的元素。
按照不同的过滤条件,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
1、 基本过滤选择器
$("li:first"); //选择所有的li标签的第一个li标签 $("li:last"); //选择所有的li标签的最后一个li标签 $("li:not(.there)"); //选取class不是 theree 的元素 $("li:even"); //选取索引是偶数的li标签 $("li:odd"); //选取索引是奇数的li标签 $("li:eq(1)"); //选取索引是等于 1 的li标签 $("li:gt(1)"); //选取索引是大于 1 的li标签 $("li:lt(1)"); //选取索引是小于 1 的li标签 $(":header"); //选取网页中的所有标题元素 $(":focus"); //选取网页中当前获取焦点的元素 $(":animated"); //选取网页中当前的所有的动画元素
2、 可见性过滤选择器
$(":visible"); //选取所有可见的元素 $(":hidden"); //选取所有不可见的元素
6、4 JQuery选择器的注意事项
1、选择器中含有特殊符号的注意事项
在W3C规范中,规定属性值不能包含由某些特殊字符
如果遇到像 # or . 等字符的时候,需要使用的方法就是转移符转义。
2、选择器中含有空格的注意事项
选择器中的空格是不可忽视的,多一个空格或少一个空格,可能会得到截然不同的结果。
本章总结:
1、JQuery提供了丰富的选择器以获取DOM元素
2、JQuery的基本选择器包括标签选择器、id选择器、类选择器、并集选择器、全局选择器
3、JQuery的层次选择器可以DOM元素的层次关系来获取元素,包括后代选择器、兄弟选择器、相邻选择器,同辈选择器、父选择器。
4、使用属性选择器可以通过HTML元素的属性来选择元素
5、使用过滤选择器可以通过特定的过滤规则来筛选所需的DOM元素,包括基本过滤选择器,可见性选择器。
6、在编写选择器的时候要注意特殊符号和空格。