实践jQuery

Posted on | In | Visitors

jQuery，JavaScript+Query，即JavaScript辅助开发的框架库，强大的选择器，出色的DOM操作，可靠的事件处理机制，简易的AJAX，丰富的动画和UI特效，插件的应用与编写、链式操作、隐式迭代和完美的浏览器兼容。

DOM对象和jQuery对象

DOM对象：JavaScript访问DOM获得的对象，例如：document.getElementById("foo")，方法：document.getElementById("foo").innerHTML

jQuery对象：jQuery包装DOM对象产生的，类似一个数组结构，例如：$("#foo")，方法：$("#foo").html()

两者互不兼容，但是可以互相转换，jQuery对象变量一般以$开头命名。

1
2
3
4
5
// 定义jQuery对象，$var
var $cr = $("#cr");
// jQuery对象转换为定义DOM对象，$var[index]或$var.get(index)
var cr = $cr[0];
var cr = $cr.get(0);

1
2
3
4
// 定义DOM对象
var cr = document.getElementById("cr");
// DOM对象转换为定义jQuery对象，$(DOM对象)
var $cr = $(cr);

判断jQuery对象或DOM对象是否存在

1
2
3
4
5
6
7
8
// DOM判断id为foo的节点是否存在，不判断会报错（DOM对象可能不存在）
if(document.getElementById("foo")){
	document.getElementById("foo").style.color="red";
}
// jQuery判断id为foo的节点是否存在，jQuery对象是一直存在的，只是内容为空而已
if($('#foo').length>0){
	$('#foo').css("color","red");
}

jQuery（$）和其他库冲突

jQuery将$作为快捷方式，一些其他的框架也将$作为快捷方式，这样就可能引起冲突。

jQuery.noConflict()可以让出jQuery的$，以供其他库使用，jQuery则可以使用jQuery原形。

也可以自定义其他的快捷方式，例如：var $$ = jQuery.noConflict()

选择器

jQuery选择器完全继承了CSS选择器

从1.1.3.1版本以后，XPath选择器不再支持，通过第三方jQuery插件可以支持。

基本选择器

选择器   返回  
#id   单个值  
.class   集合元素  
element   集合元素  
*   集合元素  
selector1,selector2,……,selectorN   集合元素  

层次选择器

选择器   返回  
$(“ancestor descendant “)      
$(“parent > child”)      
$(“prev + next”)      
$(“prev ~ siblings”)      

DOM操作

事件

动画

相关书籍

《锋利的jQuery（第2版）》，1.7.1

相关网站