第二章(2.1/2.2)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第二章(2.1/2.2)相关的知识,希望对你有一定的参考价值。

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

}

 

以上是关于第二章(2.1/2.2)的主要内容,如果未能解决你的问题,请参考以下文章

分享几个实用的代码片段(第二弹)

分享几个实用的代码片段(第二弹)

第二次在对话框中膨胀片段时出错

用片段替换时操作栏向下移动

想要使用 SharePreferences 更新第二个片段中的数据,但第二个片段没有更新

2.1 2.2 系统目录结构(上)(下)