jQuery作为js最流行和广泛采用的类库之一，具有如下特性：
- 丰富强大的语法（CSS徐选择器），用来查询文档元素；
- 高效的查询方法，用来找到与CSS选择器匹配的文档元素集；
- 一套有用的方法，用来操作选中的元素；
- 强大的函数式编程技巧，用来批量操作元素集，而不是每次只操作单个；
- 简洁的语言用法（链式调用），用来表示一系列顺序操作。
jQuery基础
jQuery类库定义了一个全局函数：jQuery()。该函数使用频繁，因此在类库中还给它定义了一个快捷别名：$。调用jQuery后返回的是一个jQuery对象，所以可以一直连续调用，这就是链式调用：
$(p.details).css("background-colro","yellow").show("fast");jQuery()函数
jQuery()方法有四种调用方式：
- 传递CSS选择器（字符串）给$()方法；
- 传递一个Element、Document或Window对象给$()方法；
- 传递HTML文本字符串给$()方法（使用这种调用风格时，传递给$()方法的字符串必须至少包含一个带有尖括号的HTML标签）；
- 传入一个函数给$()方法，此时，当文档加载完毕且DOM可操作时，传入的函数将被调用；
查询与查询结果
传递CSS选择器字符串给$()，它返回的jQuery对象表示匹配的元素集。CSS选择器在第十五章中介绍过，返回对象如下图所示：
- selector属性是创建jQuery对象时的选择器字符串（如果有的话）；
- context属性是上下文对象，是传递给$()方法的第二参数，如果没有传递的话默认为Document对象；
- 所有jQuery对象都有一个名为jquery的属性，其值是字符串形式的jQuery版本号；
$("#all_content").jquery //"1.7.2"相信细心的同学在截图中已经看到了一个关键字，没错，就是[[prototype]]， 实际上就是__proto__，来看图对比一下：
几个通用的jQuery方法：
| 方法 | 描述 |
|---|---|
| each() | 遍历jQuery对象中的所有元素 |
| map() | 用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回 |
| index() | 该方法接受一个元素作为参数，返回值是该元素在此jQuery对象中的索引值，没有则返回-1 |
| is() | 该方法接受一个选择器作为参数，如果选中元素中至少有一个匹配该选择器时，返回true |
jQuery的getter和setter
jQuery对象上最简单、最常见的操作是获取（get）或设置（set）HTML属性、CSS样式、元素内容和位置高宽的值。首先，我们需要对jQuery中的getter和setter方法有个大致了解：
- jQuery使用同一个方法既当getter又当setter，而不是定义一对方法。如果传入一个新值给该方法，则它设置此值，如果不传新值，则返回当前值；
- 用作setter时，这些方法会给jQuery对象中的每一个元素设置值，然后返回该jQuery对象以便链式调用；
- 用作getter时，这些方法只会查询元素集中的第一个元素，返回单个值。（如果要遍历所有元素，请使用map()。）getter不会返回调用自身的jQuery对象，因此它只能出现在链式调用的末尾。
- 用作setter时，这些方法经常接受对象参数，此种情况下，该对象的每一个属性都指定一个需要设置的名/值对。
- 用作setter时，这些方法经常接受函数参数。此种情况下，会调用该函数来计算需要设置的值。调用该函数时的this值是对应的元素，第一个参数是该元素的索引值，当前值当作第二参数传入。
获取和设置HTML属性
attr()方法是jQuery中用于HTML属性的getter/setter：
$("form").attr("action"); //获取第一个form元素的action属性
$(“#icon”).attr("src","icon.gif"); //设置src属性
$("#banner").attr({ //一次设置4个属性
src:"icon.gif",
alt:"Advertisement",
width:700,
height:400
});
$("a").attr("target","_blank"); //使所有链接在新窗口中打开
$("a").attr(“target”,function(){
if(this.host == location.host){
return "_self"; //站内链接在本窗口打开
}else{
return "_blank"; //非站内链接在新窗口打开
}
})获取和设置CSS属性
css()方法和attr()方法很类似，只是css()方法作用于元素的CSS样式，而不是元素的HTML属性，css()方法不能获取复合样式，只能一项一项获取，但是能设置复合样式，在设置CSS样式时可以使用连字符（如"background-color"），也可以使用驼峰式样式名（如"backgroundColor"）:
$("h1").css("font-weight"); //获取第一个<h1>的字体重量
$("h1").css("fontWeight"); //同上
$("h1").css("font"); //错误：选中不能使用复合样式
$("div.note").css("border","solid blac 2px"); //设置可以使用复合样式
$("h1").css({
backgroundColor : "black",
color : "white",
padding : "10px 2px 4px 20px",
border : "dotted black 2px"
}); //一次设置多个样式
获取和设置CSS类
addClass()和removeClass()用来从选中元素中添加和删除类。toggleClass()的用途是，当元素还没有某些类时，给元素添加这些类，反之则删除这些类。hasClass()用来判断类是否存在：
//添加CSS类
$("h1").addClass("hilite");
//删除CSS类
$("h1").removeClass("hilite");
$("div").removeClass(); //删除div中的所有类
//切换CSS类
$("h1").toggleClass("hilite"); //该类存在则删除，不存在则添加
$("h1").toggleClass("hilite"，true); //作用类似addClass
$("h1").toggleClass("hilite"，false); //作用类似removeClass
//检测CSS类
$("h1").hasClass("hilite");
$("h1").is("hilite"); //作用类似hasClass获取和设置HTML表单值
val()方法用来设置和获取HTML表单元素的value属性，还可以用于获取和设置复选框、单选按钮以及select元素的选中状态：
$("#surname").val(); //获取surname值
$("input:radio[name=ship]:checked").val() //获取选中的单选按钮的值
$("input").val("hello"); //设置input输入值为“hello”获取和设置元素内容
text()和html()用来获取和设置元素的纯文本或HTML内容，不带参数调用时， text()返回所有匹配元素的所有子孙文本节点的纯文本内容，html()返回第一个匹配元素的HTML内容，类似于x[0].innerHTML，如果传递字符串给 text()和html()，该字符串会用作该元素的纯文本或格式化的HTML文本内容，它会替换掉所有存在的内容。
let title = $("head title").text(); //获取文档标题
let headline = $("h1").html(); //获取第一个h1元素的html
$("h1").html('<span>hello</span>'); //获设置第一个h1元素的html获取和设置元素的位置高宽
使用offset()方法可以获取或设置元素的位置，该方法相对文档来计算位置值，返回一个对象，带有left和top属性，用来表示X和Y坐标。如果传入带有这些属性的对象给该方法，它会给元素设置指定的位置。
position()方法很像offset()方法，但它只能用作getter，它返回的元素位置是相对于其偏移父元素的，而不是相对于文档的。
获取元素宽度和高度的getter均有3个：
| 方法 | 描述 |
|---|---|
| width()、height() | 返回基本宽度和高度，不包含内边距、边框和外边距 |
| innerWidth()、innerHeight() | 返回元素的宽度和高度，包含内边距，即边框以内的宽度和高度 |
| outerWidth()、outerHeight() | 返回的是包含元素内边距和边框的尺寸，如果传入参数true，则返回包含元素外边距的尺寸 |
与位置尺寸相关的最后一对jQuery方法是scrollTop()和scrollLeft()，可获取或设置元素的滚动条位置。
获取和设置元素数据
jQuery定义了一个名为data()的getter/setter方法，可用来设置或获取与文档元素、Document或Window对象相关联的数据。需要将数据与jQuery对象中的元素相关联时，传递名称和值两个参数给data()方法即可，还可传递一个对象给data() setter，此时，该对象的每一个属性都将用作名/值对，用来与jQuery对象元素关联。
data()方法也可以用作getter，当不带参数调用时，它会返回一个对象，含有与jQuery对象中的第一个元素相关联的所有名/值对。当传入一个字符串参数调用时，它会返回对于第一个元素与该字符串参数相关联的数据值。
removeData()方法用来从元素中删除数据，如果传递字符串参数，该方法会删除元素中与字符串关联的数据值，如果不带参数，该方法会删除与元素相关联的所有数据。
$("div").data("x",1); //设置一些数据
$("div").removeData("x"); //删除一些数据
let x = $("#mydiv").data("x"); //获取一些数据修改文档结构
插入和替换元素
分两种方式，一种是在目标元素上调用，并传入需要插入的内容作为参数。另一种是在内容上调用，并传入目标元素作为参数：
| 操作 | $(target).method(content) | $(content).method(target) |
|---|---|---|
| 在目标元素的结尾处插入内容 | append() | appendTo() |
| 在目标元素的起始处插入内容 | prepend() | prependTo() |
| 在目标元素的后面插入元素 | after() | insertAfter() |
| 在目标元素的前面插入元素 | before() | insertBefore() |
| 将目标元素替换为内容 | replaceWith() | replaceAll() |
//在h1标签内部前面添加*符号
$("h1").prepend("*");
$("*").prependTo("h1");
//在h1标签内部后面添加*符号
$("h1").append("*");
$("*").appendTo("h1");
//在h1标签前面添加*符号
$("h1").before("*");
$("*").insertBefore("h1");
//在h1标签后面添加*符号
$("h1").after("*");
$("*").insertAfter("h1");
//将h1标签替换为div
$("h1").replaceWith("<div/>");
$("<div/>").replaceWith("h1"); 复制元素
如果插入的元素已经是文档的一部分，这些元素只会简单地移动而不是复制到新位置。如果想复制元素到新位置而不是移动它，必须首先用clone()方法来得到一个副本。clone()创建并返回每一个选中元素（包含元素所有子孙）的副本。返回的jQuery对象的元素还不是文档的一部分，可以用上一节中的方法将其插入文档中：
//给文档结尾添加一个带有"linklist"id的新div
$(document.body).append("<div id = 'linklist'><h1>List of Links</h1></div>");
//将文档中的所有链接复制并插入该新div中
$("a").clone().appendTo("#linklist");
//在每一个链接后面插入<br/>元素，使其独立行显示
$("linklist > a").after("<br/>");包装元素
插入HTML文档的另一种类型涉及在一个或多个元素中包装新元素：
| 方法 | 描述 |
|---|---|
| wrap() | 包装每一个选中元素 |
| wrapInner() | 包装每一个选中元素的内容 |
| wrapAll() | 将选中元素作为一组来包装 |
//用<i>元素包装所有<h1>元素
$("h1").wrap(document.createElement("i")); //<i><h1>...</h1></i>
//包装所有h1元素的内容
$("h1").wrapInner("<i/>") //<h1><i>...</i></h1>
//将所有其他段落包装在另一个div里
$("body>p:not(:first)").wrapAll(""<div class='rest'></div>);删除元素
| 方法 | 说明 |
|---|---|
| empty() | 删除每个选中元素的所有子节点（包括文本节点），但不会修改元素自身。 |
| remove() | 从文档中移除选中元素（以及所有元素的内容），自身被移除（包括事件处理程序和绑定到元素上的数据），如果传入一个参数，该参数会被当成选择器，只有匹配该选择器的元素才会被删除。 |
| detach() | 自身被移除（但不会移除事件处理程序和数据，想临时从文档中移除元素以便后续再次插入时，detach()可能会更有用）,参数传递同上。 |
| unwrap() | 移除每个选中元素的父元素，不影响选中元素及其兄弟节点。 |
使用jQuery处理事件
事件处理程序的简单注册
jQuery定义了简单的事件注册方法，可用于常用和普适的每一个浏览器事件(以下事件可在十七章查看)：
| blur() | focusin() | mousedown() | mouseup() |
| change() | focusout() | mouseenter() | resize() |
| click() | keydown() | mouseleave() | scroll() |
| dbclick() | keypress() | mousemove() | select() |
| error() | keyup() | mouseout() | submit() |
| focus() | load() | mouseover() | unload() |
除了这些简单的事件注册方法外，还有两个特殊形式的方法，有时很有用：
- hover() 用来给mouseenter和mouseleave事件注册处理程序，调用hover(f,g)就和调用mouseenter(f)和mouseleave(g)一样。
- toggle() 该方法将事件处理程序绑定到单击事件，toggle(f,g,h) 每次单击循环调用f()、h()、g()。
jQuery事件对象
jQuery通过定义自己的Event对象来隐藏浏览器之间的实现差异。当一个jQuery事件处理程序被调用时，总会传入一个jQuery事件对象作为其第一个参数。jQuery事件对象主要以W3C标准为基准，同时它也实现了一些实际的事件标准。jQuery会将以下所有字段从原生Event对象中复制到jQuery Event对象上（对于特定事件类型来说，有些字段值为undefined）：
| altKey | ctrlKey | newValue | screenX |
| attrChange | currentTarget | offsetX | screenY |
| attrName | detail | offsetY | shiftKey |
| bubbles | eventPhase | originalTarget | srcElement |
| button | formElement | pageX | target |
| cancelable | keyCode | pageY | toElement |
| charCode | layerX | prevValue | view |
| clientX | layerY | relatedNode | wheelDelta |
| clientY | metaKey | relatedTarget | which |
除了这些属性，Event对象还定义了以下方法：
| preventdefault() | isDefaultPrevented() |
| stopPropagation() | isPropagationStopped() |
| stopImmediatePropagation() | isImmediatePropagationStopped() |
事件处理程序的高级注册
直接使用bind()可以让我们使用事件注册的高级特性，bind()需要一个事件类型字符串作为其第一个参数，以及一个事件处理程序函数作为其第二个参数：
$("p").click(func);
//等价
$("p").bind("click",func);调用bind()时还可以带有三个参数，此种形式下，事件类型是第一个参数，处理程序函数是第三个参数，第二个参数可以传入任何值，jQuery会在调用处理程序前将指定的值设置为Event对象的data属性。通过这种方式传递额外的数据给处理程序，不需要使用闭包，有时候很有用。
bind()的另一个重要特性是允许为注册的事件处理程序指定命名空间，要绑定事件处理器到命名空间中时，添加句点（.）和命名空间名到事件处理类型字符串中即可：
//将事件处理程序mouseover绑定到命名空间“myMod”
$("a").bind("mouseover.myMod",func);bind()的最后一个特性是，第一个参数可以是对象，该对象把事件名映射到处理程序函数：
$("a").hover(f,g);
//等价于
$("a").bind({mouseenter:f, mouseleave:g});jQuery还有另一个事件处理程序注册方法，调用one()方法就和 bind()一样，只不过one()方法只执行一次就会自动注销。
注销事件处理程序
使用unbind()来注销注册的事件处理程序，以避免在将来的事件中触发它：
//从所有元素中移除所有jQuery事件处理程序
$("*").unbind();
//从所有<a>标签中取消绑定所有点击事件处理程序
$("a").unbind("click");
//取消绑定在"myMod"命名空间下的点击事件处理程序
$("a").unbind("click.myMod");
//取消绑定在"myMod"命名空间下的所有事件处理程序
$("a").unbind(".myMod");
//取消绑定在"myMod"和“myMod1”命名空间下的点击事件处理程序
$("a").unbind("click.myMod.myMod1");触发事件
当用户使用鼠标、键盘或触发其他事件类型时，注册的事件处理程序会自动调用。然而，如果能手动触发事件，有时候会很有用。手动触发事件的最简单方式是不带参数调用事件注册的简单方法（带参数就变成了注册事件处理程序），如：
$("my_form").submit();另外，还可以使用trigger()方法：
$("#my_form").trigger("submit");也可指定事件命名空间来触发仅在该命名空间中定义的事件处理程序，可在事件类型后加感叹号(!)表示触发没有命名空间的事件处理程序（即跳过有命名空间的事件处理程序，一般只有通过bind注册的事件处理程序有命名空间）：
$("button").trigger("click.ns1"); //触发某个命名空间下的单击处理程序
$("button").trigger("click!"); //触发没有命名空间的单击处理程序给事件处理程序传递额外数据的另一种方式是，在手动触发事件时，给trigger()传入第二个参数，给trigger()传入的第二个参数会成为每个触发的事件处理程序的第二个参数（这就是前面提到的传递额外数据的第一种方法）：
$("#button1").trigger("click",true); //传入单一额外数据
$("#button1").trigger("click",[x, y, z]); //传入3个额外数据实时事件
在使用jQuery的web应用时经常会动态创建新元素，如果使用bind()给文档中所有<a>元素绑定了事件处理程序，接着又创建了带有<a>元素的新文档内容，这些新元素和老元素不会拥有相同的事件处理程序，其行为将不一样。
jQuery使用“实时事件”来解决这一问题，通过delegate()和undelegate()方法来替代bind()和unbind()。通常，在$(document)上调用delegate()，并传入一个选择器字符串、一个事件类型字符串以及一个事件处理程序函数。实时事件依赖于事件冒泡，当指定类型的事件冒泡到该内部处理程序时，它会判断事件目标（该事件所发生在的元素）是否匹配选择器字符串，匹配则调用指定的处理程序函数：
$(document).delegate("a","mouseover",linkHandler);注销实时事件处理程序，可使用die()或undelegate()：
$("a").die("mouseover"); //移除<a>元素上mouseover事件的所有实时处理程序
$(document).undelegate("a","mouseover");
$("a").die("mouseover",linkHandler); //移除<a>元素上指定的实时处理程序
$(document).die("a","mouseover",linkHandler);
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
