JQuery 选择器

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。

1.CSS选择器：要使用某个样式应用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一任务的表现规则称为CSS选择器。

选择器 

选择器	语法	描述	示例
ID选择器	#ID{CSS规则}	已文档元素的唯一标识符ID作为选择器	#note{font-size:14px;}
类选择器	.className{CSS规则}	以文档元素的CSS作为选择器	div.note{font-size:14px}
组群选择器	E1，E2，E3{CSS规则}	多个选择符应用同样的样式规则	td,p,div,a{font-size:14px}
后代选择器	E F{CSS规则}	元素E的任意后代元素F	#links a{color:red;}
通配符选择器	*{CSS规则}	以文档的所有元素作为选择符	*{font-size:14px}

此外CSS中还有伪类选择器（E:F{CSS}）、子选择器（E>F{CSS}）、临近选择器（E+F{CSS}）和属性选择器（E[attr]{CSS}）

 

2.jQuery选择器：完全继承了CSS的风格。利用jQuery选择器可以，可以非常便捷地找到特定的DOM元素，然后给他添加行为而无需担心浏览器是否支持这一选择器。

$(function(){$(".demo").click(function(){
    alert("jQuery demo!")
})})    

jQuery选择器的优势

1、简洁的写法

2、支持CSS1到CSS3选择器

3、完善的处理机制

注：如果使用jQuery检查某个元素在网页是否存在时，应该使用获取到的元素长度来判断：

if($("#test".length<=0)){
  alert(#test不存在！)  
}

 

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

1基本选择器：jQuery中最常用的选择器，通过ID CLASS和标签名来查找DOM元素。

2层次选择器：通过DOM元素之间的层次关系来获取特定的元素，例如后代元素、子元素、相邻和兄弟元素等。

选择器	描述	返回	示例
$("ancestor descendant")	选取ancestor元素里所有的后代元素	集合元素	$("div span")
$("parent>child")	选取parent元素下的child元素	集合元素	$("div>span")
$("prev+next")	选取紧接在prev元素后的next元素	集合元素	$(".one+div")
$("prev~siblings")	选取prev元素之后的所有siblibngs元素	合集元素	$("#two~div")

3过滤选选择器：通过特定的过滤规则来筛选出所需的DOM元素，规则与CSS中伪类选择器相同：可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器

一、基本过滤选择器

：first 选取第一个元素

：last 选取最后一个元素

：not(selector) 去除所有与给定选择器匹配的元素

：even 偶数选择器，（0开始）

：odd 奇数选择器

：eq(index) 选取索引等于index的元素

：gt(index)选取索引大于index的元素（不等于index）

:lt(index)选取索引小于index的元素

:header 选取所有的标题元素

:animated 选取当前正在执行动画的所有元素

 

转载于:https://www.cnblogs.com/nonameG/p/4966208.html