【jQuery之路】02.jQuery选择器

目录

前路——CSS

什么是jQuery选择器？

使用jQuery选择器的优势

jQuery选择器分类

1、基本选择器

2、层次选择器

3、过滤选择器

4、表单选择器

特别注意：

---

前路——CSS

在这之前，学习的CSS选择器，其规则大部分前端学习者估计都用的比较熟练了，包括标签选择器、ID选择器、类选择器等等。

具体语法如下：

什么是jQuery选择器？

 其实jQuery选择器完全继承了CSS的风格，利用jQuery选择器，可以非常方便地定位于DOM元素。

例如以下代码。

<p class="demo">jQuery demo</p>
<script type="text/javascript">
	$(".demo").click(function(){//给class为demo的元素添加行为
		alert("jQuery demo!");
    })
</script>

在CSS中，选择的是

.demo{/*给class为demo的元素添加样式*/
....
}

而jQuery的选择是

$(".demo").click(function(){//给class为demo的元素添加行为
//...
})

使用jQuery选择器的优势

1. 简洁的写法
2. 支持CSS1到CSS3的选择器
3. 完善的处理机制

使用jQuery可以避免某些错误

对于下面的代码：

<div>test</div>
<script type="text/javascript">
	if(document.getElementById("aa")){
		document.getElementById("aa").style.color="red";
	}
</script>

JavaScript中，对于本不存在的结点添加行为时，会出现错误，必须添加判断。

但在jQuery中，对于获取页面中不存在的元素不会报错。

<div>test</div>
<script type="text/javascript">
	$('#aa').css("color","red");//这里无需判断$('#aa')是否存在
</script>

特殊情况：当真的需要判断该元素是否存在时，不是像JavaScript那样if(document.getElementById("aa")){}判断

而是应该根据获取元素的长度来判断，如下：

if($("#aa").length>0){
//...
}

或者转换成DOM对象来判断，代码如下：

if($("#aa")[0]){
//...
}

jQuery选择器分类

jQuery选择器包括：基本选择器、层次选择器、过滤选择器和表单选择器。

1、基本选择器

2、层次选择器

这里可以使用nextAll()方法来代替$('prev~siblings')选择器。

3、过滤选择器

①基本过滤选择器

②内容过滤选择器

③可见性过滤选择器

④属性过滤选择器

⑤子元素过滤选择器

⑥表单对象属性过滤选择器

4、表单选择器

表单对象属性

 

特别注意：

1、选择器中含有“•”、“#”、“(”或者是“]”等特殊符号

如以下例子：

<div id="id#b">bb</div>
<div id="id[1]">cc</div>

正确的写法如下：

$('#id\\#b');
$('#id\\[1\\]');

2、属性选择器的@符号问题

jQuery在1.3.1版本中彻底放弃了1.1.0版本遗留的@符号，如果使用的是1.3.1以上的版本的话，就不需要在属性前添加符号@了。

$("div[@title='test']");//错误
$("div[title='test']");//正确写法，去掉@符号