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中的方法.
   




     

转载于:https://www.cnblogs.com/liuyong/archive/2011/03/05/1971746.html