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

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

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

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

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

3． 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对象，只需要用$()把DOM对象包装起来，就可以获得一个JQuery对象，方式为$(DOM对象)。实例代码如下：

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

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

4． JQuery自定义快捷方式

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

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

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

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

$J(function(){

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

});