[置顶] 强大的JQuery

JQuery初识

       

       为了简化JS的开发，一些JS库诞生了，JQuery就是其中的一个。JQuery是一个兼容多浏览器的Javascript框架。是轻量级的JS库。jQuery为用户提供了丰富的文档说明，使用户能更方便地处理HTML documents、events、实现动画效果，方便地为网站提供AJAX交互，同时还有许多插件可供选择。

JQuery导图

DOM对象与JQuery对象

         

       DOM（Document Object Model）文档对象模型，每一份DOM都可以表示成一棵树。注意这里特别容易混乱的一个概念JQuery对象。JQuery不是JQuery对象，Jquery对象是通过JQuery包装DOM对象后产生的对象。JQUery对象是JQUery独有的。在JQuery对象中无法使用DOM对象的任何方法。

JQuery对象：

var $obj = $("#id");

DOM对象：

var domObj = document.getElementById("id"); 

      JQuery对象和DOM对象相互转换。DOM对象才能使用DOM中的方法，不能使用JQuery对象中的方法。

JQuery对象转换成DOM对象：

var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中

 

DOM对象转换成JQuery对象：

var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象

 

与Ajax应用

      

        Ajax不需要插件支持，这样可以被绝大多数主浏览器所支持；能在不刷新整个页面的前提下更新数据，使得WEB应用程序能更为迅速地回应用户的操作；Ajax模式通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送；减轻服务器和带宽的负担。

        JQuery对Ajax进行了封装，在JQuery中$.ajax（）方法属于最底层的方法，第二层是load() 、$.get()和$.post()方法，第三层是$。getScript和$.getJSON（）方法。

        load()方法是JQUery中最为常用的Ajax方法，能载入远程HTML代码并插入到DOM中。代码如下：

$(function(){
     $("#send").click(function(){
             $("#resText").load("test.html");
           });
});

 

 编写插件    

      

      自己对JQuery中插件的初步理解是把JQuery中具有实现相似功能的事件封装起来，优化代码。通过参数的不同把不同的效果显示出来。

  插件的格式与框架：返回一个JQuery对象

;(function(){ 

$.fn.extend({ 
"color":function(color){return this.css("color",color);//扩展了一个color方法}   }); })();

注意事项：

1.所有的对象方法应该附加到jQuery.fn对象上，而全局函数需要附加到jQuery对象上 
2.在插件内部 this指向的是获取的jQuery对象，而不像一般的方法，指向的是dom元素 
3.插件内部应避免使用$作为jQuery对象的别名，但可以使用闭包技巧。 

4.一般情况下，插件应该返回一个jQuery对象，以保证可链式操作。

总结

       学习需要整理，如果不整理那么学的东西越来越多，就会导致狗熊掰棒子式学习。关于JQuery的学习远远不止这些东西，这些理论上的东西先要学好了，总结了，在应用中发挥更大的作用，将它们发挥的淋漓尽致。学习就是这样，学习——学以致用——学习。