jQuery中的选择器完全继承了CSS的风格。利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器支付支持这一选择器。学会使用选择器是学习jQuery的基础,jQuery的行为规则都必须在获取到元素后才能生效。
一个简单的例子,代码如下:
<script type="text/javascript">
function demo(){
alert('JavaScript Do this');
}
</script>
<p οnclick="demo();">点我吧</p>
上面例子的作用是设置一个p标签,并设置一个onclick事件,当单击事件发生后,执行demo()方法。
如上所示,把JavaScript代码和HTML代码混杂在一起,并没有将网页内容和行为分离。使用jQuery,可以使用如下的方法:
<p class="demo">jQuery Demo</p>
<script type="text/javascript">
$(".demo").click(function(){
alert("jQuery Do this!");
})
此时,可以对CSS的写法和jQuery的写法进行比较。CSS获取到元素的代码如下:
.demo { //给Class为demo的元素添加样式
CSS Rules;
}
jQuery获取到元素的代码如下:
$(".demo") //给Class为demo的元素添加行为
jQuery选择器的写法与CSS选择器的写法十分相似,只不过两者的作用效果不同,CSS选择器找到元素后添加的是样式,而jQuery选择器找到元素后添加的是行为。需要特别说明的是,jQuery中涉及操作CSS样式的部分比单纯的CSS功能更强大,并且拥有跨浏览器的兼容性。