jQuery读书分享

前端之家收集整理的这篇文章主要介绍了jQuery读书分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

优点:jQuery凭借简洁的语法和跨平台的兼容性,极大地极大地简化了JS开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发ajax的操作。jQuery拥有独特的选择器,链式操作,事件处理机制,封装完善的ajax。

 

优势:①轻量级,目前使用UglifyJS压缩后,大小保持在30KB左右

②强大的选择器(基本选择器,层次选择器,过滤选择器

③DOM操作的封装(jQuery中DOM的操作)

④可靠的事件处理机制(事件处理)

⑤ajax完善处理

⑥链式操作方式

 

书写方式:若没有特殊说明,jQuery==$,所以$("#foo")==jQuery("#foo")

$就是jQuery的书写的简单形式

<script type="text/javascript">// <![CDATA[ $(doucment).ready(function(){//等待DOM元素加载完毕 alert("hello world");  //弹出一个框 });  可以简写成:  $(function{ //... }); // ]]></script>

 

代码风格:

①链式操作风格

②强大选择器

对于同一个对象,不超过三个操作的,可以直接写成一行  例如: 

.next().show() //显示下一个元素

对于同一对象的多个操作,建议一行一个 例如: 

.parent() //父元素的 
.siblings()   //同辈元素的(siblings意为兄妹)
 .children("a")   //子元素 
.removeClass("current")    //移除current样式(current意为当前)

 

jQuery实例:(实现的功能:当鼠标点击到a元素的时候,给其添加一个名为current的class,然后将紧邻后面的元素显示出来,同时将它父辈的同辈元素内部内部的子元素都去掉一个名为current的class,并将紧邻他们后面的元素都隐藏)

$(".level1>a").ready.(function(){    //等待元素加载完毕
    $(this).addClass("current")                 //给当前元素添加current样式
          .next().show()        //显示下一个元素
          .parent().siblings()      //父元素的同辈元素的                                              
          .children("a").removeClass("current")  //子元素移除current样式属性
          .next().hide();          //下一个元素隐藏
          return false;
 })

 

 

 ②jQuery拥有强大的选择器,编码时有时需要必要的注释

 

DOM对象和jQuery对象

①DOM(Document object Model)文档对象模型,DOM元素节点可以通过JS中的getElementsByTagName和getElementsById来获取。这样得到的DOM元素就是DOM对象

②jQuery对象就是jQuery包装DOM对象后产生的对象 例如:

$("#foo").html()    //获取id为foo的元素内部的HTML代码,html()是jQuery里的方法

  等价于

document.getElementById("foo").innerHTML

 

jQuery与css选择器类比:

<p class = "demo">jQuery demo</p>

 css: .demo{.......//class为demo的样式添加样式}

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

猜你在找的jQuery相关文章