jQuery 选择器
jQuery网页脚本语言核心之一
概述:
1. 选择器是jQuery的基础
2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器
3. 可简化代码
什么是jQuery选择器?
层叠样式表
良好地继承了css选择器语法,还继承了其获取页面元素便捷高效的特点
于css不同,jQuery选择器获取元素后,为该元素添加的是行为
有良好的兼容性
优势
1. 简洁的写法
(1) $(选择)
2. 完善的处理机制
(1) 简洁,避免某些错误
类型:
可通过css选择器和过滤选择器两种方式选择元素,每种又有不同的方法来获取元素
1. 通过css选择器选取元素
(1) 基本选择器
(2) 层次选择器
(3) 属性选择器
2. 通过 过滤选择呢亲选择元素
(1) 基本过滤选择器
(2) 可见性过滤选择器
详解:
通过css选择器选取元素
jQuery支持大多数css选择器
最常用的有:基本选择器,层次选择器和属性选择器
在jQuery中它们构成的规则于css选择器完全相同
1. 基本选择器
1. 继承了css选择器的语法和功能
2. 主要由元素标签名,class,id和多个选择器组成
3. 可以实现大多数页面元素的查找
4. 主要包括:
(1) 标签选择器
(2) 类选择器
(3) Id选择器
(4) 并集选择器
(5) 全局选择器
补充:jQuery中还有交集选择器:
语法:$(AB)
一个元素,必须保证AB两个属性同时具备(与并集选择器正好相反)
2. 层次选择器
1. 通过DOM之间的层次关系来获取元素
2. jQuery有四种常用的层次选择器:
(1) 后代选择器
(2) 子选择器
(3) 相邻选择器
(4) 同辈选择器
层级选择器之间的相似与不同点:
1)层级选择器都有一个参考节点
2)后代选择器包含子选择器的选择的内容
3)一般兄弟选择器包含相邻兄弟选择的内容
4)相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下.
在层次选择呢亲中,后代选择器和子选择器较为常用,而相邻元素选择器和同辈元素选择器在jQuery中可以用更加简单的方法代替:
(1)使用next()房代替prev-next(相邻元素选择器)
(2)使用nextAll()方法代替prev`siblings(同辈元素选择器)
3. 属性选择器
属性选择器:语法标识:([])
什么是属性选择器?
1. 顾名思义,属性选择器就是通过HTML元素的属性选择元素的选择器
2. 与css中的属性选择器语法构成完全一致
条件属性选择器
条件属性选择器共包括6种,其中[attribute!=value]选择器是jQuery自己拓展的选择器
[attribute!=value]
[attribute!=value]选择器选择属性值不等于value的元素,返回集合元素
[注意]class="test test1"的元素也符合$('[class!="test"]')的情况,因为属性选择器的严格匹配机制
[attribute^=value]
[attribute^=value]选择器选择属性值以value开始的元素,返回集合元素
[attribute$=value]
[attribute$=value]选择器选择属性值以value结束的元素,返回集合元素
[attribute*=value]
[attribute*=value]选择器选择属性值包含value的元素,返回集合元素
[attribute|=value]
[attribute|=value]选择器选择属性值等于value或以value-开头的元素,返回集合元素
[attribute~=value]
[attribute~=value]选择器选择属性值用空格分隔的值中包含value的元素,返回集合元素
[注意]$('[class~="test"]')选择器包含class="test"的元素的情况
通过条件过滤选取元素
过滤:把不要的滤掉,留下需要的
语法标识: (:)
主要通过特定的过滤规则来筛选出所有的DOM元素
同样:过滤规则与css中伪类语法相同,即选择器都以一个冒号(:)开头。冒号前是需要过滤的元素
栗子:
(1)a:hover 表示当鼠标指针移过<a>元素时
(2)Tr:visited 表示当鼠标指针访问过<tr> 元素后
经典栗子:
实现列表隔行变色
注意:奇偶过滤选择器 从0开始
1. 基本过滤选择器
注:$(“:header”) 选取的时所有h1`h6的标签
让文本框获取焦点:$(“input”).focus();
过滤选择器是通过元素所处的位置来获取元素的
2. 可见性过滤选择器
通过元素的显示状态,即元素显示或隐藏来选取元素
:visible:控制眼睛能看到
:hidden:控制本有但隐藏的元素
$(“:hiddden”).show()可以拿出不可见的代码(比如js,jQuery)
Css:type=”hidden” 隐藏域
在可见性选择器中需要注意的是,选择器 :hidden获取的元素不仅包括样式属性display为“none”的元素,还包括文本隐藏域和visibility:hidden之类的元素
3. 补充
表格样式:将相邻边线折成一个,并且填充表格内的空格
jQuery选择器注意事项
1. 选择器中含有特殊符号的注意事项
W3C 规范中,规定属性值中不能含有某些特殊字符,但在实际开发过程中,可能会遇到表达中含有'# 和“.”等特殊字符的情况,如果按照普通的方式去处理就会出错。解决此类错误的方法是使用转义符转义。
HM 代码如下:
<div id="id#a">aa</div> <div id="id [2] ">cc</div>
按照普通的方式来获取,例如:
$("#id#a") ; $("#id[2]");
以上代码不能正确获取到元素,正确的写法如下。
$("#id\\#a") ; $("#id\\[2\\]");
2. 选择器中含有空格的注意事项
选择器中的空格也是不容忽视的,多一个空格或少一个空格,可能会得到截然不同的长。
HTML 代码如下。
<div class="test"> <div style="display:none;">aa</div> <div style="display:none; ">bb</div> <div style="display:none;">cc</div> <div class="test" style="display:none;">dd</div> </div> <div class="test" style="display:none;">ee</div> <div class="test" style="display:none;">ff</div>
使用如下jQuery 选择器分别来获取它们。
//带空格的jQuery选择器 var $t a= $(".test :hidden") ; //不带空格的jQuery选择器 var $t b= $ (".test:hidden") ; var len a = $t_a.length; var len_b= $t_b.length; //输出4 alert("$('.test :hidden') = "+len_a) ; //输出3 alert ("$ ('.test:hidden')= "+1en_b) ;
之所以会出现不同的结果,是因为后代选择器与过滤选择器存在不同。
//带空格的jQuery 选择器 var $t a= $ (".test :hidden") ; 以上代码选取的是class 为“test”的元素内部的隐藏元素。 而代码: /1不带空格的jQuery选择器 var $t b= $(".test:hidden") ; 选取的是隐藏的class 为“test" 的元素。
最后:
(C) 房上的猫 。 保留所有权利。
https://www.cnblogs.com/lsy131479/
如需转载,请注明出处!!!
上一篇: 初识jQuery 基础篇
下一篇: jQuery的基本使用