jQuery读书分享

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

 

优势：①轻量级，目前使用ＵglifyJS压缩后，大小保持在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实例：（实现的功能：当鼠标点击到ａ元素的时候，给其添加一个名为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元素节点可以通过ＪＳ中的getElementsByTagName和getElementsById来获取。这样得到的DOM元素就是DOＭ对象

②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的元素添加行为})