关于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(第二版)》