JQuery总结

1.JQuery是什么？与Js的关系？ 

  JQuery是继prototype之后又一个优秀的JS框架，是JS代码库。JS库的出现是为了简化JS的开发，每个库的特色不同，其中JQuery对比其他库的特色是：出色的DOM操作；可靠的事件处理；完善的兼容性和链式操作。下图表示了JQuery与JS的关系 ：

2.JQuery如何使用？

    JQuery的语法特别简单，JQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。基础本质语法是：

   $(selector).action()

   $---定义JQuery，此符号可以自定义修改；

       selector----选择符，查询HTML元素；

       action-----操作；

  例子：

      $(this).hide()       //隐藏当前元素；
      $("p").hide()        //隐藏所有段落；
      $("p.test").hide()   //隐藏所有class=“test”的段落，ps：id用“#”；
      $("[href!='#']")     //选取所有带有 href 值不等于 "#" 的元素;
      $("p").css("background-color","red");  //把所有p元素的背景颜色更改为红色;
      $("div#intro.head").hide()             //隐藏所有id="intro"的 <div> 元素中的所有 class="head" 的元素;

3.JQuery使用注意事项？

   （1）JQuery对象与DOM对象

             在JQuery对象中无法使用DOM对象的任何方法，可以用其相类似的JQuery方法代替；同样，DOM对象        也不能使用JQuery的方法；在调用方法时要注意操作的是dom对象还是jquery对象；所以我们要对JQuery对象和DOM对象进行转换。       

       JQuery对象转换成Dom对象：

第一种方法： JQuery对象是一个数组对象，可以通过[index]的方法得到相应的Dom对象。代码：

Var $cr= $(“#cr”);  //JQuery对象
Var cr=$cr[0];       //DOM对象
Alert(cr.checked);  //检测这个checkbox是否被选中了

第二种方法：通过JQuery本身提供的方法，get（index）得到相应的Dom对象。

代码如下：

Var $cr = $(“#cr”);  //JQuery对象
Var cr=$cr.get(0);    //DOM对象
Alert(cr.checked);   //检测这个checkbox是否被选中了

 

           Dom对象转换成JQuery对象

对于Dom对象来说，只需要用$()把Dom对象包装起来，就可以获得一个JQuery对象了，代码如下：

Varcr=document.getElementById(“cr”);  //DOM对象
Var $cr=$(cr);                         //JQuery对象

转换后可以任意使用JQuery方法。

（2）集合处理功能
          

            对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
     例：
    

      //为索引分别为0，1，2的p元素分别设定不同的字体颜色。
      $("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})     
      
      //实现表格的隔行换色效果     
      $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})     
     
     //为每个p元素增加了click事件，单击某个p元素则弹出其内容
     $("p").click(function(){alert($(this).html())})         

     

（3）链式操作

          所谓链式操作，即可以对一个jquery对象连续调用各种不同的方法。
      例：
     

       $("p").click(function(){alert($(this).html())})
             .mouseover(function(){alert('mouse overevent')})
             .each(function(i){this.style.color=['#f00','#0f0','#00f']});

      我们为什么使用链式操作呢？这是个很有意思的问题。下面我们看个例子：           

             用链式操作写的代码：document.getElementById("ele").eatapple().eatbanana（）;

             不用链式操作写的代码：document.getElementById("ele").eatapple();           

                                                         document.getElementById("ele").eatbanana();

             有的人可能会说了，链式操作能减少代码量，使代码看起来更优雅，不用链式操作写法的调用了两次document.getElementById来获取DOM树的元素，不仅代码多，而且这样消耗比较大；right！

              但真的只是这么点作用吗？其实链式操作的好处不仅是这样；用链式操作是为了更好的异步体验 ，Javascript是无阻塞语言，所以他不是没阻塞，而是不能阻塞，所以他需要通过事件来驱动，异步来完成一些本需要阻塞进程的操作。 个人觉得链式操作最值得称赞的还是其解决了异步编程模型的执行流程不清晰的问题。jQuery中$(document).ready就非常好的阐释了这一理念。DOMCotentLoaded是一个事件，在DOM并未加载前，jQuery的大部分操作都不会奏效，但jQuery的设计者并没有把他当成事件一样来处理，而是转成一种“选其对象，对其操作”的思路。$选择了document对象，ready是其方法进行操作。这样子流程问题就非常清晰了，在链条越后位置的方法就越后执行。 

（4）编写插件

(function($) {
$.fn.helloWorld = function() {
// Future home of "Hello,World!"
}
//传递jQuery到方法中，这样我们可以使用任何javascript中的变量来代替"$"
}(jQuery));

     首先，为了避免冲突，我们用(function() {})包裹起来；其次，确定我们的插件不依赖默认的 $;最后$.fn 是 我们命自己名称的方式。  

    （5） windowonload与$(document).ready()的区别

              

	window.onload	$(document).ready()
执行时机	必须等网页中所有的内容加载完毕后， 包括图片才能执行；	网页中所有DOM结构绘制完毕后执行， 可能DOM元素关联的东西并没有加载完
编写个数	不能同时编写多个	能同时编写多个
简化写法	无	$(function(){ });

    （6）事件、效果可以查阅手册

      

     写在最后：JQuery用起来很简单，write less do more；在实践中检验真知吧！