目录
前路——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选择器的优势
- 简洁的写法
- 支持CSS1到CSS3的选择器
- 完善的处理机制
使用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']");//正确写法,去掉@符号