Jquery学习笔记

关于jQuery的简介 --- 就不在这里赘述了。

 

jQuery中，$就是jQuery的简写，两者等价

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function(){
alert("Hello World!");
}
);
</script>

 上面的代码和window.onload相似但还是有区别

window.onload 必须等所有内容（包括图片等）全部加载完才能执行|不能同时编写多个|无简写方式

$(document).ready() 网页中所有的DOM结构回执完毕后就执行，可能DOM元素关联的东西并没有加载完|可以同时编写多个，且都能正确执行|可以简写成$(functon(){...})

 

jQuery和DOM

 

DOM对象，是在DOM树中，可以通过如JS的getElementByTagName或者getElementById来获取节点，这样子得到的就是DOM对象

 

jQuery对象，是通过jQuery包装DOM对象后产生的对象。它是jQuery里独有的，它可以使用jQuery里的方法，如：

$("#foo").html()是jQuery里的方法，来获取id为foo的元素内的html代码

等同于

document.getElementById("foo").innerHTML;

在jQuery对象中无法使用DOM对象的任何方法。例如$("#id").innerHTML和$("#id").checked都是错误的。需要 用$("#id").html()和$("#id").attr("checked")等jQuery方法来代替。同理，DOM对象也不能用jQuery里的方法。如：document.getElementById("id").html();

 

用#id作为选择符取得的是jQuery对象，并不是document.getElementById("id")多得到的DOM对象。两者并不等价。

 

jQuery对象和DOM对象相互转换

 

jQuery对象转成DOM对象

 

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

var $cr=$("#cr");//jQuery
var cr = $cr[0];//DOM
alert(cr.checked);

 2）jQuery本身提供，get(index)来得到DOM对象

var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked);

 DOM转成jQuery对象

对于DOM对象，只要用$()把DOM对象包装起来，就可以获得jQuery对象，即：$(DOM对象)

var cr = document.getElementById("cr");
var $cr = $(cr);

 需要再次强调的是，jQuery对象并不能直接使用DOM对象的方法，需要进行转换，对于DOM对象也是如此。

 

$()函数就是一个jQuery对象的制造工厂

 

解决jQuery和其他库的冲突

 

A.jQuery库在其他库之后导入

1）在其他库和jQuery可以加载完成后，可以在任何时候，使用jQuery在其他库和jQuery可以加载完成后，可以在任何时候，使用jQuery.noConflict()函数来将变量$的控制权交给别的库

jQuery.noConflict();//将$控制权交给prototype.js
jQuery(function{
jQuery("p").click(function(){
alert(jQuery(this).text);
});
});
$("p").style.display="none";//使用prototype来隐藏元素

 

2）定义jQuery的自定义快捷方式

var $j = jQuery.noConflict();
$j(functon(){...})

 

B.jQuery在其他库之前导入

这种情况下，可以直接使用jQuery来做一些jQuery的工作。同时，可以使用$()方法作为其他库的快捷方式。无需调用 jQuery.noConflict()函数。

 

 

----总结自《锋利的jQuery（第二版）》