看书时随手整理的jQuery的相关内容及API，之后会将相应的功能与JavaScript进行比对整理。
jQuery选择器
jQuery中无法使用DOM对象的方法
$("#foo").html() //效果等于document.getElementById("foo")$("#tt")获取的永远是对象，即使网页上没有此元素-
基本选择器
-
$("#myDiv")//根据给定的ID选择匹配的元素，返回：单个元素 -
$(".myClass")//根据给定的样式名称选择匹配的元素，返回：集合元素 -
$("div")//根据给定的元素名称选择匹配的元素，返回：集合元素 -
$("#myDiv,div.myClass,span")//根据给定的规则选择匹配的元素，返回：集合元素 -
$("*")//选择页面所有元素，返回：集合元素
-
-
层次选择器
-
$("div span")//选择所有DIV元素下的所有span元素（所有后代元素），返回：集合元素 -
$("div>span")//选择所有DIV元素下的span子元素（仅子元素），返回：集合元素 -
$(".myClass+div")//选择样式名称为myClass的下一个DIV元素，返回：集合元素
等价于 $(".myClass")`.next("div"); -
$(".myClass~div")//选择样式名称为myClass之后的所有DIV元素，返回：集合元素
等价于 $(".myClass")`.nextAll(); -
$(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素
-
-
过滤选择器（index从0开始）
-
$("div:first")//选择所有DIV元素下的第一个DIV元素，返回：单个元素 -
$("div:last")//选择所有DIV元素下的最后一个DIV元素，返回：单个元素 -
$("div:not(.myClass)")//选择所有样式不包括myClass的DIV元素，返回：集合元素 -
$("div:even")//选择所有索引是偶数的DIV元素，返回：集合元素 -
$("div:odd")//选择所有索引是奇数的DIV元素，返回：集合元素 -
$("div:eq(index)")//选择所有索引等于index的DIV元素，返回：集合元素 -
$("div:gt(index)")//选择所有索引大于index的DIV元素，返回：集合元素 -
$("div:lt(index)")//选择所有索引小于index的DIV元素，返回：集合元素 -
$(":header")//选择所有标题元素（h1,h2,h3），返回：集合元素 -
$("div:animated")//选择所有正在执行去画的DIV元素，返回：集合元素
-
内容过滤选择器
$(":contains(text)")//选择所有内容包含text的元素，返回：集合元素$("div:empty")//选择所有内容为空的DIV元素，返回：集合元素$("div:has(span)")//选择所有含有SPAN子元素的DIV元素，返回：集合元素$("div:parent")//选择所有含有子元素的DIV元素（包括文本元素），返回：集合元素可见性选择器
$(":hidden")//选择所有不可见的元素（type="hidden" style="display:none" style="visibility:none"），返回：集合元素$(":visible")//选择所有可见的元素，返回：集合元素属性过滤选择器
$("div[id]")选择拥有属性id的元素$("div[title=test]")选择属性title为"test"的<div>元素$("div[title!=test]")title不等于"test"的div$("div[title^=test]")title以"test"开始的div$("div[title$=test]")title以"test"结束的div$("div[title*=test]")title含有"test"的div$("div[title|=en]")title等于en或以en为前缀（en-data）的元素$("div[title~=uk]")title用空格分隔的值中包含字符uk的元素$("div[id][title$='test']")拥有属性id，且title以"test"结束的div-
子元素过滤选择器
-
$(":nth-child(index/even/odd/3n+1)")//选择每个父元素下的第index/偶数/奇数/索引值是3n+1的子元素
:eq(index)只能匹配一个元素，且Index从0开始，:nth-child可以匹配多个元素，Index从1开始 -
$(":first-child")//选择每个父元素下的第一个子元素，返回：集合元素 -
$(":last-child")//选择每个父元素下的最后一个子元素，返回：集合元素 -
$("ul li:only-child")//在UL元素中选择只有一个LI元素的子元素，返回：集合元素
-
-
表单对象属性选择器
-
$("#myForm:enabled")//选择ID属性为myForm的表单的所有可用元素，返回：集合元素 -
$("#myForm:disabled")//选择ID属性为myForm的表单的所有不可用元素，返回：集合元素 -
$("#myForm:checked")//选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素 -
$("#myForm:selected")//选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素
-
-
表单选择器
-
$(":input")//选择所有<input> <select> <button> <textarea>元素，返回：集合元素 -
$(":text")//选择所有单行文本框元素，返回：集合元素 -
$(":password")//选择所有密码框元素，返回：集合元素 -
$(":radio")//选择所有单选框元素，返回：集合元素 -
$(":checkbox")//选择所有复选框元素，返回：集合元素 -
$(":submit")//选择所有提交按钮元素，返回：集合元素 -
$(":image")//选择所有图片按钮元素，返回：集合元素 -
$(":reset")//选择所有重置按钮元素，返回：集合元素 -
$(":button")//选择所有按钮元素，返回：集合元素 -
$(":file")//选择所有上传域元素，返回：集合元素 -
$(":hidden")//选择所有不可见域元素，返回：集合元素 -
$(":text")//选择所有单选文本框元素，返回：集合元素
-
<div id="id[1]">cc</div>
获取非法的id 用\\\来转义特殊字符$("#id\\\[1\\\]").show().hide()显示/隐藏匹配元素.css('color','red')设置单个样式
.css({'color':'red','width':'15px'})设置多个样式.filter(":contains('abc')")筛选指定表达式匹配的元素toggleBtn.toggle(func1,func2)交替一组动作
jQuery中的DOM操作
创建节点
var $li = $("<li title='香蕉'>香蕉</li>")创建一个<li>元素
$("ul").append($li)插入文档插入节点
append()元素内部的尾部追加
appendTo()与append()相同，颠倒了操作
prepend()元素内部的首部追加
prependTo()与prepend()相同，颠倒了操作
after()元素之后插入
insertAfter()与after()相同，颠倒了操作
before()元素之前插入
insertBefore()与before()相同，颠倒了操作删除节点
1.$("element").remove()删除后其后代节点也同时被删除，绑定事件失效
可以接受传参
$("ul li").remove("li[title = "菠萝"]")
2.$("element").detach()删除节点，但不会从jQuery对象中删除，恢复后绑定事件仍可用
3.empty()清空节点（节点存在，只是内容为空）复制节点
.clone()复制节点，且不具有任何行为
.clone(true)具有复制元素的绑定事件替换节点
$("#pid").replaceWith("<span>苹果</span>")
$("<span>苹果</span>").replaceAll("#pid")
两者效果相同（操作相反）包裹节点
<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
1.wrap() 单独包裹
使用方法：$("strong").wrap("<b></b>")
结果：
<b><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong></b>
<b><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong></b>
2.wrapAll() 全部包裹
使用方法：$("strong").wrapAll("<b></b>")
结果：
<b>
<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
</b>
3.wrapInner() 包裹子内容（包括文本节点）
使用方法：$("strong").wrapInner("<b></b>")
结果：
<strong title="选择你最喜欢的水果." ><b>你最喜欢的水果是?</b></strong>
<strong title="选择你最喜欢的水果." ><b>你最喜欢的水果是?</b></strong>
属性操作
.attr()获取（getAttribute和setAttribute）
.removeAttr()移除样式操作
.addClass()增加类
.removeClass()移除类
toggleBtn.toggle(func1,func2)交替一组动作
$("p").toggleClass("another")类名存在则删除，类名不存在则添加
hasClass()等于is()操作
.html()获取/设置元素的HTML.innerHTML()
.text()获取/设置元素的文本内容
.val()设置/获取/选中元素的值.value()遍历节点
.children()获取子元素集合
.next()获取下一个同辈元素
.prev()获取上一个同辈元素
.siblings()获取前后所有同辈元素
.closest("li")取得最近的li元素-
CSS-DOM操作
-
.css()获取/设置样式 -
offset()元素在当前视窗的相对偏移
offset.left左偏移
offset.right右偏移 -
position()相对于最近一个position为relative或absolute的父节点的相对偏移
position.left左偏移
position.right右偏移 -
scrollTop()获取/设置元素滚动条距顶端的距离
scrollLeft()获取/设置元素滚动条距左端的距离
-
jQuery中的事件和动画
事件
-
$(document).ready()与window.onload$(document).ready()在DOM完全就绪时就可以调用，window.onload必须在网页所有元素（包括元素的关联文件）加载完成后才能执行。window.onload一次只能保存一个引用，会自动用后面的函数覆盖前面的函数。
$(document).ready()每次调用都会在现有的行为上追加新的行为。按注册的顺序依次进行。
在有多个javascript文件时，$(document).ready()更有优势$(document).ready(function(){})可以简写为$(function(){})
-
事件绑定
-
.bind(type[ , data] , fn)
type为要绑定的事件类型，fn为处理函数
$("div").bind("mouseover mouseout",function(){})绑定多个事件 .click(fn).mouseover(fn).mouseout(fn)
-
-
合成事件
-
.hover(fn)光标悬停 -
toggle(fn1,fn2,...fnN)鼠标连续单击
-
-
事件冒泡
-
event.stopPropagation()阻止事件冒泡 -
event.preventDefault()阻止时间默认行为 -
return false同时阻止冒泡和默认行为
-
-
事件对象属性
-
event.type获取事件类型 -
event.target获取触发事件的元素 -
event.pageX和event.pageY鼠标相对于页面的x,y坐标
-
-
移除事件
-
.unbind([type],[data])
没有参数，删除所有绑定事件
有两个相同的事件的话，可以通过第二个参数（函数名）来指定删除特定的事件处理函数
-
-
模拟操作
-
.trigger(type,[data])
可以触发自定义的事件
触发事件，同时也会执行函数默认操作（例如focus事件会让input也获得焦点）
如果只想触发绑定事件，可以用triggerHandler()方法
-
动画
.show()和.hide()
接受一个参数，可以为速度关键词"fast"、normal、"slow"，也可以是时间，元素在相应的时间里显示/隐藏。
隐藏时元素宽高不透明度同时减少，最后元素样式为display:none。fadeIn()和fadeOut()
只改变元素的不透明度，最后元素样式为display:none。slideUp()和slideDown()
只改变元素的高度，最后元素样式为display:none。-
animate(params,speed,callback)-
params:一个包含样式及值的映射，比如{property1:"value1",property2:"value2"，...}
speed:速度参数，可选
callback：回调函数，可选 - 可以用jQuery的链式调用来实现多步动画
-
.css()方法不会加入到动画队列，会立即执行。可以使用回调函数对非动画方法实现排队。
-
