第二章（2.1/2.2）

Posted 2020-08-17

2.1jQuery选择器是什么

1.CSS选择器

选择器	示例	选择器	示例
标签选择器	a{ } p{ } ul{ }	ID选择器	#ID{ }
类选择器	.class{ }	群组选择器	td,p,div,a{ }
后代选择器	#link a{ }	通配符选择器	*{ }

2.jQuery选择器

*jQuery的行为规则都必须再获取到元素后才能生效

例：

<script type=”text/javascript”>
  function demo(){
		Alert(‘JavaScript demo’)
}
</script>
<p onclick = “demo();”>点击我.</p>

上述代码为元素设置onclick事件，但是JS和html混杂在一起不妥，应该将内容和行为分离：

<p class= “demo”>jQuery Demo</p>
<script type=”text/javascript”>
    $(“.demo”).click(function(){    //给class 为demo的元素添加行为
        Alert(“JQuery demo”);
})
</script>

2.2jQuery选择器的优势

①简洁的写法

②支持css1到css3选择器

③完善的处理机制

使用jQuery选择器不仅比使用传统的getElementById()函数简洁的多，而且能够避免某些错误

例：

<div>test</div>

<script type=”text/javascript”>

         document.getElementById(“tt”).styel.color = “red”;

</script>

 

运行上述代码会报错，原因是没有id为”tt”的元素

改进：

<div>test</div>

<script type=”text/javascript”>

         If(document.getElementById(“tt”)){     //判断id为tt是否存在

                  document.getElementById(“tt”).styel.color = “red”;

         }

</script>

 

效果达到了，却很复杂。使用jQuery则可以避免

<div>test</div>

<script type=”text/javascript”>

         $(“#tt”).css(“color”,”red”);               //这里无需判断id为tt是否存在

</script>

 

*$(“#tt”)获取的永远是对象， 即使网页上没有此元素。因此当用jQuery检查某个元素再网页上是否存在时，不能用以下代码:

If($(“#tt”)){

         //do something

}

 

 

而应该根据获取到元素的长度来判断：

if($(“#tt”).length >0 ){

         //do something

}

 

或者转化成DOM对象判断：

if($(“#tt”)[0] ){

         //do something

}