1)jQuery是什么?
JavaScript的框架有很多，比如prototype,JQuery,ExtJS等等，jQuery的
通用性很好。jQuery设计思想是将原始的dom对象封装成一个jQuery对象，通过
调用jQuery对象的方法来实现对原始的dom对象的操作。这样设计的目的是：是为
了更好的兼容不同的浏览器，简化代码。
特点：jQuery使用选择器查找
符合要求的节点，并且将这些节点封装成一个jQuery对象，
通过调用jQuery对象的属性或者方法来实现对节点的操作。
封装的目的有2个，一个是为了更好的兼容不同浏览器之间的
差异，另外一个是，代码更简洁。
2)jQuery编程步骤
step1 利用选择器查找节点。
step2 调用jQuery对象的属性或者方法来操作节点。
如：
1 function f1(){ 2 //$obj表示是封装后的jquery对象,不加$也可以 3 var $obj = $('#d1'); 4 //$()函数返回的是一个jQuery对象 5 $obj.html('hello jave'); 6 $obj.css('background-color','yellow').css('font-style','italic').css('font-size','50px'); 7 }
3)jQuery对象与dom对象之间的转换
a.dom对象转换成jQuery对象
使用var $obj = $(dom对象)
如
var obj = document.getElementById('d1');
var $obj = $(obj);
b.jQuery对象转换成dom对象
方式一：使用jQuery对象.get(0)方法 ,$obj表示一个jQuery对象
$obj.get(0)
方式二：使用jQuery对象.get()[0];
$obj.get()[0]
如
var $obj = $('#d1');
var obj = $obj.get(0);//$obj.get()[0]
例：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Insert title here</title> 5 <style> 6 #d1{ 7 width:200px; 8 height:100px; 9 background-color:red; 10 color:yellow; 11 } 12 </style> 13 <script type="text/javascript" src="js/jquery-1.4.3.js"> 14 </script> 15 <script type="text/javascript"> 16 function f1(){ 17 var $obj = $('#d1'); 18 //$()函数返回的是一个jQuery对象 19 //$obj.innerHTML = 'hello java'; error! 20 //要调用jQuery对象的属性和方法 21 //$obj.html('hello java'); 22 23 //css方法执行完成之后，会返回$obj对象， 24 //所以，可以使用链式写法。 25 $obj.css('background-color','blue') 26 .css('font-style','italic').css('font-size','50px'); 27 } 28 29 //dom对象转换成jQuery对象 30 function f2(){ 31 var obj = document.getElementById('d1'); 32 var $obj = $(obj); 33 $obj.css('width','300px'); 34 } 35 36 //jQuery对象转换成dom对象 37 function f3(){ 38 var $obj = $('#d1'); 39 //var obj = $obj.get(0); 40 var obj = $obj.get()[0]; 41 obj.innerHTML = 'hello kitty'; 42 } 43 </script> 44 </head> 45 <body style="font-size:30px;"> 46 <div id="d1">hello jQuery</div> 47 <input type="button" value="ClickMe" 48 onclick="f3();"/> 49 </body> 50 </html>
4)jQuery与prototype一起使用时，要注意的问题。
step1 先引入prototype.js
step2 使用jQuery.noConflict()函数，为jQuery的$函数提供一个别名。
如 : var $a = jQuery.noConflict();
var $obj = $a('#d1');
1 function f1(){ 2 //将$函数改名为$a 3 var $a = jQuery.noConflict(); 4 //var obj = $('d1'); 5 //obj.innerHTML = 'hello java'; 6 var $obj = $a('#d1'); 7 $obj.html('hello java'); 8 }
