第1章，认识jQuery

目前流行的JavaScript库

Prototype（http://www.prototypejs.org），成型早，面向对象的思想把握不到位，导致结构松散

Dojo（http://dojotoolkit.org），学习曲线陡，文档不全，最严重的是API不稳定

YUI（http://developer.yahoo.com/yui/）

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 */   }

基本选择器

层次选择器

可以使用next()方法代替$(‘prev+next‘)

$(".one+div");  ==> $(".one").next("div");

使用nextAll()代替$(‘#prev~sibling")

$("#prev~div"); ==> $("#prev").nextAll("div");

基本过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

子元素过滤选择器

:nth-child()选择器功能如下：

1、:nth-child(even)选择索引是偶数的元素

2、:nth-child(2)选择索引是2的元素

3、:nth-child(3n+1)选择索引是（3n+1）的元素，n从1开始

表单对象属性过滤选择器

选择器中的注意事项

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、插入节点

这些方法不只能将新建节点插入到文档中，也能移动原有节点

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()方法

分别用于获取元素的滚动条距顶端和距左侧的距离，还可以接受一个参数，指定滚动条滚动到指定位置