欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery读书分享

程序员文章站 2022-03-10 12:44:42
...

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