jQuery 学习笔记之二 (jQuery代码风格)

jquery 学习之代码风格

 

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

$( this ).removeClass()

.addClass()

.stop()

.fadeTo( "fast" ,0.6)

.fadeTo( "fast" ,1)

.unbind( "click" )

.click(function(){

   // do something!

});

 

对于上面的代码，如果嫌代码行数过多，可以以功能块来进换行。

上段代码中，前两个是对 class 的操作，接下来3 事动画操作，最后是取消并重新绑定click的事件的处理函数的操作，所以可以写成如下格式的代码：

$( this ).removeClass( "mouseout" ).addClass( "mouseover" )

.stop().fadeTo( "fast" ,0.6).fadeTo( "fast" ,1)

unbind( "click" ).click(function(){

  // do something!

});

 

对于多个多像的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。

$( this ).addClass( "highlight" )

        .children( "li" ).show().end()

  .siblings().removeClass( "highlight" )

        .children( "li" ).hiede();

 

javascript 中的getElementsByTagName 或者getElementById来获取元素节点。

像这样得到的Dom元素就是DOM对象。DOM对象可以使用JavaScript中的方法，

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

    var ObjHTML= document.innerHTML;

 

    $( "#foo" ).html(); //获取id为foo的元素内的html代码。.html()是jquery里的方法。

    这段代码等同于:

    document.getElementById( "foo" ).innerHTML;

     

    在jquery对象中无法使用DOM对象的任何方法。例如$( "#id" ).innerHTML和$( "#id" ). checked 之类的写法都是错误的。

 

    jquery 对象和DOM对象的相互转换

    在jquery 对象和DOM 对象的相互转换之前，先约定好定义变量的风格。如果获取的是JQuery对象，那么在变量前面加上$，例如:

    var $variable = jquery对象；

    如果获取的是DOM 对象，定义如下：

    var variable = DOM 对象;

 

    如果Jquery没有封装想要的方法，不得不使用DOM对象的时候，有以下两种处理方法。

        jquery 提供了两种方法将一个jquery对象转换成DOM对象，即[index]和 get (index).

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

        jqeury代码如下：

        var $cr = $( "#cr" );  //jqeury对象

        var cr =  $cr[0];    //DOM 对象

        alert(cr. checked );   //检测这个checked是否被选中了。

        (2)另外一种方法jquery本身提供的，通过 get (index)方法得到的相应的DOM 对象。

       jquery代码如下：

       var $cr = $( "#cr" );   //jquery 对象

       var  cr = $cr. get (0); //DOM 对象

       alert(cr. checked );    // 检测这个checkbox 是否被选中了

 

    DOM 对象转成Jquery对象

    对于一个DOM 对象，只需要用$()把DOM对象包装起来，就可以获得一个jQeury对象了，方式为$(dom对象)。

    jquery 代码如下：

    var cr = document.getElementById("cr');  //dom对象

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

    通过转换后可以可以任意使用jquery中的方法.

    

 

 

 

 

     

出处：http://www.cnblogs.com/liuyong/

转载于:https://www.cnblogs.com/moyiqun/archive/2013/06/06/3121116.html