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