锋利的JQuery学习笔记-认识JQuery

1．JQuery代码风格

• 链式操作风格

（1）对于同一个对象不超过三个操作的，可以直接写成一行。代码如下：

　　$("li").show().unbind("click");

（2）对于同一个对象的较多操作，建议每行写一个操作。代码如下：

　　$(this).removeClass("mouseout")

         　　.addClass("mouseover")

        　　 .stop()

　　　　　.fadeTo("fast",1)

　　　　　.click(function() {
               //do something
            });

　　如果嫌代码行数过多，可以以功能模块来换行。

　　$(this).removeClass("mouseout") .addClass("mouseover")          //对class的操作

        　　 .stop().fadeTo("fast",1)                                                    //动画的操作

　　　　　.unblind("click").click(function() { 　　　　　　　//取消并绑定click事件　　　　　　　
               //do something
            });

（3）如果对多个对象的少量操作，可以一个对象写一行。

• 为代码添加注释

2．JQuery对象和DOM对象

• DOM对象

　　DOM(Document Object Model，文档对象模型），可以通过document.getElementById("id")或者document.getElementsByTagName("name")来获得元素节点，像这样得到的DOM元素就是DOM对象，实例代码如下：

　 var objObj = document.getElementById("id"); //获得 DOM对象
    var objHTML = objObj.innerHTML; //使用JavaScript的属性

• JQuery对象

　　JQuery对象是通过JQuery包装DOM对象后产生的对象。

　　在JQuery对象中无法使用DOM对象的任何方法，同样DOM对象也不能使用JQuery对象的方法。

3． JQuery对象与DOM对象的相互转换

• JQuery对象转换成DOM对象，有两种处理方法

（1）JQuery对象是一个数组对象，可以通过[index]方法得到相应的DOM对象。

　   　 var $cr = $("#tr");    　　 //JQuery对象
    　　var cr = $cr[0];        　　//DOM对象
    　　alert(cr.checked);

（2）通过get(index)方法得到相应的DOM对象。

　   　 var $cr = $("#tr");                 //JQuery对象
    　　var cr = $cr.get(0);                      //DOM对象
    　　alert(cr.checked);

•  DOM对象对象转换成JQuery对象

对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个JQuery对象，方式为$(DOM对象)。实例代码如下：

 var cr = document.getElementById("id");                     //DOM对象

 var $cr = $(cr);                  //JQuery对象

4． JQuery自定义快捷方式

• 自定义JQuery备用名称

默认情况下，JQuery用$作为自身的快捷方式。

如果$与其库冲突，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权转移。

例如自定义用$J取代$，代码如下：

var $J = jQuery.noConflict();                   //自定义一个快捷方式

$J(function(){

              $J.trim();              //代码中全部用自定义的快捷方式

});