锋利的jQuery第2版学习笔记1~3章，jquery学习笔记3章
第1章，认识jQuery 目前流行的JavaScript库 Prototype（），成型早，面向对象的思想把握不到位，导致结构松散 Dojo（），学习曲线陡，文档不全，最严重的是API不稳定 YUI（） Ext JS（），侧重界面，比较臃肿，用于商业用途需要付费 MooTools（） jQuery（） jQuery优势 1、轻量级 2、强大的选择器 3、出色的DOM操作 4、可靠的事件处理机制 5、完善的Ajax 6、不污染顶级变量 7、出色的浏览器兼容性，支持IE6.0+、Firefox3.6+、Safari5.0+、Opera、Chrome 8、链式操作方式 9、隐式迭代 10、行为层与结构层的分离 11、丰富的插件支持 12、完善的文档 13、开源 jQuery代码的编写 在jQuery库中，$就是就jQuery的一个简写形式，$("#foo")和jQuery("#foo")是等价的 规范： 1、对于同一个对象不超过3个操作的，可以直接写在一行 2、对于同一个对象的较多操作，建议每行写一个操作 3、对于多个对象的少量操作，可以每个对象写一行，涉及子元素的，可以考虑缩进 建议：jQuery对象使用$开头，例：var $variable = jQuery对象，var variable= DOM对象 jQuery对象和DOM对象的相互转换 1、jQuery对象转成DOM对象 jQuery对象不能使用DOM中的方法，jQuery提供了两种方法将jQuery对象转成DOM对象，即使用[index]和get(index) （1）jQuery对象是一个类似数组的对象，可以通过[index]得到相应DOM对象 cr = $cr[0]; //DOM对象 （2）通过get(index)得到 cr = $cr.get(0); //DOM对象 2、DOM对象转成jQuery对象 只需要使用$()将DOM对象包装起来即可得到jQuery对象 $cr = $(cr); //jQuery对象 注：DOM对象只能使用DOM方法，jQuery对象只能使用jQuery的方法 注：平时用到的jQuery对象都是通过$()函数制造出来的，$()就是一个jQuery对象制造工厂，也可以使用jQuery()函数，因为$和加jQuery等价 解决jQuery和其它库的冲突 注：默认情况下，jQuery用$作为自身的快捷方式 1、jQuery库在其他库之后导入 （1）在其他库和jQuery库加载完毕之后，可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交其他的JavaScript库 例： jQuery.noConflict(); (){ alert(jQuery(this).text()); }); }); $(

（2）想确保jQuery不与其他库冲突，又想自定义快捷方式：

(){ alert.($j(this).text()); }); }); $( （3）若不想自定义备用名称，又想使用$，还希望不冲突 <1> jQuery.noConflict(); ).text()); }); }); $(

<2>

jQuery.noConflict(); (){ alert.($(this).text()); }); }); })(jQuery); 2、jQuery在其他库之前导入 直接使用jQuery而非$来做jQuery的工作，$()方法作为其他库的快捷方式，无需调用jQuery.noConflict()方法 第2章，jQuery选择器 jQuery选择器的优势 1、简洁的写法 使用$("#ID")代替document.getElementById()，使用$("tagName")代替document.getElementsByTagName()函数 2、支持CSS1到CSS3选择器 3、完善的处理机制，即，使用jQuery获取不存在的元素也不会报错 注：$("#tt")获取的永远是对象，即使网页上没有元素，因此当要使用jQuery检查某个元素在网页上是否存在，不能使用如下代码： }

应根据获取的元素长度来判断：

}

或转换成DOM对象：

} 基本选择器

选择器 描述 返回 示例

#id 根据给定id匹配一个元素 单个元素 $("#test")选取id为test的元素

.class 根据给定类名匹配元素 集合元素 $(".test")选取所有class为test的元素

element 根据给定元素名匹配元素 集合元素 $("p")

* 匹配所有元素 集合元素 $("*")

selector1,selector2... 将每个选择器匹配到的元素合并后一起返回 集合元素 $("div,span,p.myClass")

  层次选择器

选择器 描述 返回 示例

$("ancestor descendant") 选取ancestor元素里所有descendant（后代）元素 集合元素 $("div span")选取div里所有span元素

$("parent>child") 与CSS的子选择器一样 集合元素 $("div>span")

$("prev+next") 与CSS的相邻同胞选择器一样 集合元素 $(".one+div")

$("prev~sibling") 与CSS的通用的同胞组合选择器一样 集合元素 $("#two~div")

可以使用next()方法代替$('prev+next') $(".one+div");  ==> $(".one").next("div"); 使用nextAll()代替$('#prev~sibling") $("#prev~div"); ==> $("#prev").nextAll("div"); 基本过滤选择器

选择器 描述 返回 示例

:first 选取第一个元素 单个元素 $("div:first")选取所有<div>元素中第1个<div>元素

:last 选取最后一个元素 单个元素 $("div:last")解释类似:first

:not(selector) 去除所有与给定选择器匹配的元素 集合元素 $("input:not(.myClass)")

:even 选取索引是偶数的元素，索引从0开始 集合元素 $("input:even")

:odd 选取索引是奇数的元素，索引从0开始 集合元素 $("input:odd")

:eq(index) 选取索引是index的元素，index从0开始 单个元素 $("input:eq(1)")

:gt(index) 选取索引大于index的元素，index从0开始 集合元素 $("input:gt(1)")

:lt(index) 选取索引小于index的元素，index从0开始 集合元素 $("input:lt(1)")

:header 选取所有标题元素，例h1，h2 集合元素 $(":header")

:animated 选取正在执行动画的元素 集合元素 $("div:animated")

:focus 选取获得焦点的元素 集合元素 $(":focus")

  内容过滤选择器

选择器 描述 返回 示例

:contains(text) 选取含有文本内容为“text”的元素 集合元素 $("div:contains('me')")选取所有含有文本"me"的div元素

:empty 选取不包含子元素或文本的空元素 集合元素 $("div:empty")

:has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $("div:has(p)")选取含有p元素的div元素

:parent 选取含有子元素或文本元素的元素 集合元素 $("div:parent")

  可见性过滤选择器

选择器 描述 返回 示例

:hidden 选取所有不可见元素 集合元素 $(":hidden")选取所有不可见元素

:visible 选取所有可见元素 集合元素 $("div:visible")选取可见的div元素

  属性过滤选择器

选择器 描述 返回 示例

[attribute] 选择拥有此属性的元素 集合元素 $("div[id]")选取拥有id属性的div元素

[attribute=value] 选择拥有属性值为value的元素 集合元素 $("div[title=test]")

[attribute!=value] 选择属性值不等于value的元素 集合元素 $("div[title!=test]"),没有属性title的元素也会被选取

[attribute^=value] 选择属性值以value开始的元素 集合元素 $("div[title^=test]")

[attribute$=value] 选择属性值以value结束的元素 集合元素 $("div[title$=test]")

[attribute*=value] 选择属性值含有value的元素 集合元素 $("div[title*=test]")

[attribute|=value] 选择属性等于给定字符串或以该字符串为前缀（该字符串后
跟一个连字符‘-’）的元素 集合元素 $("div[title|="en"]")选取title属性等于en
或以en为前缀的元素

[attribute~=value] 选取属性用空格分隔的值中包含一个给定值的元素 集合元素 $("div[title~="uk"]")