锋利的jQuery第2版学习笔记1~3章
第1章，认识jQuery
注意：使用的jQuery版本为1.7.1
目前流行的JavaScript库
Prototype（http://www.prototypejs.org），成型早，面向对象的思想把握不到位，导致结构松散
Dojo（http://dojotoolkit.org），学习曲线陡，文档不全，最严重的是API不稳定
Ext JS（http://www.extjs.com），侧重界面，比较臃肿，用于商业用途需要付费
MooTools（http://mootools.net/）
jQuery（http://jquery.com）
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对象
var $cr = $("#cr"); //jQuery对象 var cr = $cr[0]; //DOM对象
（2）通过get(index)得到
var $cr = $("#cr"); //jQuery对象 var cr = $cr.get(0); //DOM对象
2、DOM对象转成jQuery对象
只需要使用$()将DOM对象包装起来即可得到jQuery对象
var cr = document.getElementById("cr"); //DOM对象 var $cr = $(cr); //jQuery对象
注：DOM对象只能使用DOM方法，jQuery对象只能使用jQuery的方法
注：平时用到的jQuery对象都是通过$()函数制造出来的，$()就是一个jQuery对象制造工厂，也可以使用jQuery()函数，因为$和加jQuery等价
解决jQuery和其它库的冲突
注：默认情况下，jQuery用$作为自身的快捷方式
1、jQuery库在其他库之后导入
（1）在其他库和jQuery库加载完毕之后，可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交其他的JavaScript库
例：
<!-- 引入prototype库 --> <script type="text/javascript" src="lib/prototype.js"></script> <!-- 引入jQuery库 --> <script type="text/javascript" src="lib/jQuery.js"></script> <script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function(){ //使用jQuery jQuery("p").click(function(){ alert(jQuery(this).text()); }); }); $('pp').style.display = 'none'; //使用prototype.js隐藏元素 </script>
（2）想确保jQuery不与其他库冲突，又想自定义快捷方式：
<script type="text/javascript"> var $j = jQuery.noConflict(); //自定义快捷方式 $j(function(){ //使用jQuery，利用自定义快捷方式 $j $j("p").click(function(){ alert.($j(this).text()); }); }); $('pp').style.display = 'none'; //使用prototype.js隐藏元素 </script>
（3）若不想自定义备用名称，又想使用$，还希望不冲突
<1>
<script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function($){ //使用jQuery设定页面加载时执行的函数 $("p").click(function(){ //函数内部继续使用$() alert.($(this).text()); }); }); $('pp').style.display = 'none'; //使用prototype.js隐藏元素 </script>
<2>
<script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权移交给prototype.js (function($){ //定义匿名函数 $(function(){ //匿名函数内部的$均为jQuery $("p").click(function(){ alert.($(this).text()); }); }); })(jQuery); //执行匿名函数且传递实参jQuery $('pp').style.display = 'none'; //使用prototype.js隐藏元素 </script>
2、jQuery在其他库之前导入
直接使用jQuery而非$来做jQuery的工作，$()方法作为其他库的快捷方式，无需调用jQuery.noConflict()方法
第2章，jQuery选择器
jQuery选择器的优势
1、简洁的写法
使用$("#ID")代替document.getElementById()，使用$("tagName")代替document.getElementsByTagName()函数
2、支持CSS1到CSS3选择器
3、完善的处理机制，即，使用jQuery获取不存在的元素也不会报错
注：$("#tt")获取的永远是对象，即使网页上没有元素，因此当要使用jQuery检查某个元素在网页上是否存在，不能使用如下代码：
if($("#tt")){ /* do something */ }
应根据获取的元素长度来判断：
if($("#tt").length > 0){ /* do something */ }
或转换成DOM对象：
if($("#tt")[0]){ /* do something */ }
基本选择器
| 选择器 | 描述 | 返回 | 示例 |
| #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"]") |
| [attribute1] [attribute2] ... |
用属性选择器合并成复合选择器，满足多个条件，缩小范围 | 集合元素 | $("div[id][title$="test"]")选取拥有属性 id并且属性title以"test"结束的div元素 |
子元素过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :nth-child(index/even /odd/equatioin) |
选取每个父元素下第index个子元素或奇偶元素， index从1开始 |
集合元素 | 将为每一个父元素匹配子元素 |
| :first-child | 选取每个父元素的第一个子元素 | 集合元素 | 将为每一个父元素匹配子元素 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 | 将为每一个父元素匹配子元素 |
| :only-child | 若某个元素是其父元素唯一的子元素，则被匹配 | 集合元素 | $("ul li:only-child")在<ul>中选取是唯一 子元素的<li>元素 |
:nth-child()选择器功能如下：
1、:nth-child(even)选择索引是偶数的元素
2、:nth-child(2)选择索引是2的元素
3、:nth-child(3n+1)选择索引是（3n+1）的元素，n从1开始
表单对象属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :enabled | 选取所有可用元素 | 集合元素 | $("#form1 :enabled") |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#form1 :disabled") |
| :checked | 选取所有被选中元素，单选，复选 | 集合元素 | $("input:checked") |
| :selected | 选取所有被选中选项元素，下来列表 | 集合元素 | $("select option:selected") |
| :input | 选取所有<input><textarea><select><button> | 集合元素 | $(":input") |
| :text | 选取所有单行文本框 | 集合元素 | $(":text") |
| :password | 选取所有密码框 | 集合元素 | $(":password") |
| :radio | 选取所有单选框 | 集合元素 | $(":radio") |
| :checkbox | 选取所有复选框 | 集合元素 | $(":checkbox") |
| :submit | 选取所有提交按钮 | 集合元素 | $(":submit") |
| :image | 选取所有图像按钮 | 集合元素 | $(":image") |
| :reset | 选取重置按钮 | 集合元素 | $(":reset") |
| :button | 选取所有按钮 | 集合元素 | $(":button") |
| :file | 选取所有上传域 | 集合元素 | $(":file") |
| :hidden | 选取所有不可见元素 | 集合元素 | $(":hidden") |
选择器中的注意事项
1、选择器中含有"."，"#"，"("，"]"等特殊符号，需要转义，例：$("#id\\#b")
2、属性选择器中的@符号需要去掉
第3章，jQuery中的DOM操作
DOM操作分类
1、DOM Core（核心）
2、HTML-DOM
3、CSS-DOM
jQuery中的DOM操作
1、查找节点
（1）查找元素节点，使用选择器
（2）查找属性节点，再找到元素之后，可以使用attr()方法获取元素属性
2、创建节点
（1）创建元素节点
使用工厂函数$()来完成，$(html)，根据传入的HTML标记字符串，创建一个DOM对象，并转成jQuery对象返回
例：$("<li></li>")
（2）创建文本节点，与（1）类似，将文本内容一起包含在HTML标记字符串中
（3）创建属性节点，与（1）类似，将节点属性一起包含在HTML标记字符串中
3、插入节点
| 方法 | 描述 | 示例 |
| append() | 向每个匹配的元素内部追加内容 | <p>我想说：</p> $("p").append("<b>你好</b>"); <p>我想说：<b>你好</b></p> |
| appendTo() | 将所有匹配元素追加到指定元素中，与append方法颠倒 | <p>我想说：</p> $("<b>你好</b>").appendTo("p"); <p>我想说：<b>你好</b></p> |
| prepend() | 向每个元素内部前置内容 | <p>我想说：</p> $("p").prepend("<b>你好</b>"); <p><b>你好</b>我想说：</p> |
| prependTo() | 将所有匹配元素前置到指定元素中，与prependTo方法颠倒 | <p>我想说：</p> $("p").prependTo("<b>你好</b>"); <p><b>你好</b>我想说：</p> |
| after() | 在每个匹配元素之后插入内容 | <p>我想说：</p> $("p").after("<b>你好</b>"); <p>我想说：</p><b>你好</b> |
| insertAfter() | 将所有匹配元素插入到指定元素之后 | <p>我想说：</p> $("<b>你好</b> ").insertAfter("p"); <p>我想说：</p><b>你好</b> |
| before() | 在每个匹配的元素之前插入内容 | <p>我想说：</p> $("p").before("<b>你好</b>"); <b>你好</b> <p>我想说：</p> |
| insertBefore() | 将所有匹配元素插入到指定元素之前 | <p>我想说：</p> $("<b>你好</b> ").insertBefore("p"); <b>你好</b> <p>我想说：</p> |
这些方法不只能将新建节点插入到文档中，也能移动原有节点
4、删除节点
（1）remove方法
删除节点，及所有后代节点，并清除绑定的事件、附加的数据，返回被删除节点的引用，在之后可以继续使用
$("ul li:eq(1)").remove();
也可以通过传递参数来选择性删除：
$("ul li").remove("li[title!=test]");
（2）datach方法
与remove一样，但不会清除绑定的事件、附加的数据
（3）empty方法
并不能算是删除节点，而是清空节点，清空指定元素的所有后代节点
5、复制节点
使用clone方法，使用参数true可以同时复制元素所绑定事件
6、替换节点
replaceWith()和replaceAll()
$("p").replaceWith("<strong>hello</strong>");
$("<strong>hello</strong>").replaceAll("p");
以上两句是一样的效果
注：元素绑定事件一样会被清掉
7、包裹节点
使用wrap()方法
<strong>hello</strong>
$("strong").wrap("<b></b>"); //用b标签把strong元素包裹起来
<b><strong>hello</strong></b>
wrapAll()和wrapInner()
（1）wrapAll
将所有匹配元素用一个元素来包裹，与wrap不同，wrap是将所有匹配元素单独包裹：
<strong>hello</strong> <strong>hello</strong>
$("strong").wrap("<b></b>");
<b><strong>hello</strong></b> <b><strong>hello</strong></b>
而使用wrapAll之后：
<b> <strong>hello</strong> <strong>hello</strong> </b>
注：若被包裹元素之间有其他元素，则其他元素会被放到包裹元素之后
（2）wrapInner方法
该方法将每一个匹配的元素的子内容用其他结构化标记包裹起来：
<strong>hello</strong>
$("strong").wrapInner("<b></b>");
<strong><b>hello</b></strong>
8、属性操作
（1）获取和设置属性
使用attr()方法
获取属性
var $p = $("p"); var p_txt = $p.attr("title");
设置属性
$("p").attr("title","value"); //用于设置单个属性
$("p").attr({"title":"you title","name":"you name"}); //用于设置多个属性，使用对象传递
（2）删除属性
使用removeAttr()方法
$("p").removeAttr("title");
9、样式操作
（1）获取和设置样式
使用attr()方法
（2）追加样式
使用addClass()方法
$("p").addClass("another");
（3）移除样式
使用removeClass
参数为要移除的class名，不带参数则把所有class移除
（4）切换样式
toggle()方法
$toggleBtn.toggle(function(){ //代码1 },function(){ //代码2 });
toggle的作用是，交替执行代码1和代码2，主要是用于控制行为上的重复切换
toggleClass()方法
用于控制样式上的切换，类名存在则删除，不存在则添加
$("p").toggleClass("another");
（5）判断是否含有某个样式
hasClass()方法用于判断是否含有某个class，有返回true，没有返回false
10、设置和获取HTML、文本和值
（1）html()方法，可用于XHTML，不可用于XML
类似于JavaScript的innerHTML属性，可以用于获取和设置元素（传递参数）的HTML内容
（2）text()方法
类似于JavaScript的innerText属性，用于获取和设置元素（传递参数）的文本内容
（3）val()方法
类似于JavaScript的value属性，用于设置和获取元素的值，无论元素是文本框，下来列表还是单选框，都可以返回元素值，若为多选，返回一个包含所有选择的值的数组
11、遍历节点
（1）children()方法
取得匹配元素的子元素集合，只考虑子元素，不考虑后代元素，$("p").children();
（2）next()方法
用于取得匹配元素后面紧邻的同辈元素，$("p").next();
（3）prev()方法
用于取得匹配元素前面紧邻的同辈元素，$("p").prev();
（4）siblings()方法
用于取得匹配元素前后所有同辈元素，$("p").siblings();
（5）closest()方法
该方法用于取得最近的匹配元素。首先检查元素本身，接着逐级向上往祖先元素查找，没找到则返回空jQuery对象
（6）parent()，parents()，closest()区别
parent()，获取集合中每个匹配元素的父元素
parents()，获取集合中每个匹配元素的祖先元素
closese()，从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
12、CSS-DOM操作
可以直接利用css()方法获取元素的样式属性：$("p").css("color");
无论是外部CSS导入，还是直接拼接在HTML元素中，都可以通过css()方法获得
设置样式与attr()方法类似
$("p").css("color","red"); //设置单个
$("p").css({"color":"red","fontSize":"30px"); //设置多个
注：如果值是数字，则自动转化为像素值
获取元素高度，可以直接使用height属性
$("p").height();
注：1、jQuery1.2之后height可用于获取window和document的高度
2、css方法获取的高度值与样式设置有关，而height获取的是元素在页面实际高度，与样式设置无关，且不带单位
与height对应的还有width()方法
其他几个经常使用的方法：
（1）offset()方法
用于获取元素在当前视窗的相对偏移，返回对象包含两个属性，top，left，只对可见元素有效
（2）position()方法
用于获取元素相对于最近一个position样式属性设置为relative或absolute的祖先节点的相对偏移，返回对象也包含连个属性top，left
（3）scrollTop()方法和scrollLeft()方法
分别用于获取元素的滚动条距顶端和距左侧的距离，还可以接受一个参数，指定滚动条滚动到指定位置
世界 -- 因技术而精彩
