jQuery使用
一、选择器
基本
1、#id
根据给定的ID 匹配一个元素
实例:
<p id=”testID”>testID</p>
$(“#testID”).html();
2、Element
根据给定的元素名匹配所有元素
实例：
<div>div1</div>
<div>div2</div>
$(“div”);
3、.class
根据给定的类属性匹配一个元素
实例：
<div class=”testClass”>testClass</div>
$(“.testClass”);
层级关系
1、ancestor descendant
在给定的祖先元素下匹配所有的后代元素
实例：
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset></form><input name="none" />$("form input")结果： [ <input name="name" />, <input name="newsletter" /> ]2、parent > child
在给定的父元素下匹配所有的子元素（注意与后代元素的区别）
实例：
<form>
<label>name:</label>
<inputname=”name”/>
<fieldset>
<label>newsletter:</label>
<inputname=”newsletter”/>
</fieldset>
</form>
<input name=”none”/>
Jquery代码：
$(“form > input”);
结果：
[<input name=”name” />]
3、prev + next
匹配紧跟在prev元素后的next元素
实例：
<form>
<label>name:</label>
<inputname=”name”/>
<fieldset>
<label>newsletter:</label>
<inputname=”newsletter”/>
</fieldset>
</form>
<input name=”none”/>
Jquery代码：
$(“label > input”);
结果：
[<input name=”name” />，<inputname=”newsletter”/>]
4、prev ~siblings
匹配prev元素后的所有的siblings元素
实例：
<form>
<label>name:</label>
<inputname=”name”/>
<fieldset>
<label>newsletter:</label>
<inputname=”newsletter”/>
</fieldset>
</form>
<input name=”none”/>
Jquery代码：
$(“form ~ input”);
结果：
[<input name=”none”/>]
基本
1、first() :first
获取匹配得第一个元素
实例：
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem3</li>
</ul>
Jquery代码：
$(“li”).first();
或者
$(“li:first”);
结果：
[<li>list item1</li>]
2、last() :last
获取匹配的最后一个元素
实例：
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem3</li>
</ul>
Jquery代码：
$(“li”).last();
$(“li:last”);
结果：
[<li>list item3</li>]
3、:not,not()
去除所有与给定选择器匹配的元素
实例：
<input name=”apple”/>
<input name=”flower” checked=”checked”/>
Jquery代码：
$(“input:not(:checked)”);
或者
alert($("input").not($("input:checked")).val());
4、:even
匹配所有索引值为偶数的元素，从0开始计数
实例
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr></table>jQuery代码：
alert($(“tr:even”).eq(1).text());
结果：Value 2
5、:odd
匹配所有索引值为奇数的元素，从0开始计数(0是偶数)
实例
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr></table>jQuery代码：
alert($(“tr:odd”).eq(0).text());
结果：Value 1
6、:eq(index)，eq(index)
匹配一个给定索引值的元素
实例
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr></table>jQuery代码：
alert($(“tr:odd”).eq(0).text());
alert($(“tr:odd:eq(0)”).text());
结果：value1
7、:gt(index)
匹配所有大于给定索引值的元素
实例
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr></table>jQuery代码：
alert($(“tr:gt(1)”).text());
结果：value2
8、:lt(index)
匹配所有小于给定索引值的元素
<table> <tr><td>Header 1</td></tr> <tr><td>Value 1</td></tr> <tr><td>Value 2</td></tr></table>jQuery代码：
alert($(“tr:lt(1)”).text());
结果：Header 1
9、:header
匹配如h1，h2，h3之类的标题元素
实例：
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
$(":header").css("background","#EEE");
10、animate()和: animated
只有对不在执行动画效果的元素执行一个动画特效
<buttonid="run">Run</button><div></div>
$("#run").click(function(){
$("div:not(:animated)").animate({left: "+=20" }, 1000);
});
内容
1、:contains ()
匹配包含给定文本的元素
实例：
<div>JohnResig</div>
<div>GeorgeMartin</div>
<div>MalcomJohn Sinclair</div>
jQuery代码
alert($("div:contains('John')").eq(1).html());
结果：
MalcomJohn Sinclair
2、:empty
匹配所有不包含子元素或者文本的空元素
实例：
<table>
<tr><td>Value1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
Jquery代码：
$("td:empty")
结果：
[ <td></td>, <td></td> ]
3、:has()
匹配含有选择器所匹配的元素的元素
实例：
<div><p>Hello</p></div>
<div>Hello again!</div>
$("div:has(p)").css("background","#EEE")
4、:parent
匹配含有子元素或者文本的元素
实例：
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
Jquery代码：
alert($("td:parent").eq(1).html());
结果：Value 2
可见性
1、:hidden
匹配所有不可见元素，或者type为hidden的元素
实例：
<table>
<tr style="display:none"><td>Value1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<form>
<input type="text" name="email" />
<input type="hidden" name="id"value="hidden" />
</form>
Jquery代码
alert($("tr:hidden").text());
alert($("input:hidden").val());
结果：
Value 1
hidden
2、:visible
匹配所有的可见的元素
<table>
<trstyle="display:none"><td>Value 1</td></tr>
<tr><td>Value2</td></tr>
</table>
Jquery代码
alert($("tr:visible").eq(0).text());
结果：
Value 1
属性
1、[attribute]
匹配包含给定属性的元素
实例：
<div>
<p>Hello!</p>
</div>
<divid="test2">hasId</div>
Jquery代码
alert($("div[id]").text())
结果：hasId
2、[attribute=value]
匹配给定的属性是某个特定值的元素
实例：
<divname="div">button</div>
Jquery代码
alert($("div[name='div']").text());
结果：button
3、[attribute!=value]
匹配所有不含有指定的属性，或者属性不等于特定值的元素
实例：
<inputtype="checkbox" name="newsletter" value="HotFuzz" />
<input type="checkbox"name="newsletter" value="Cold Fusion" />
<inputtype="checkbox" name="accept" value="Evil Plans"/>
Jquery代码：
$("input[name!='newsletter']").attr("checked",true);
结果：第三个被选中
4、[attribute^=value]
匹配给定的属性是以某些值开始的元素
实例：
<input name="apple" value="apple"/>
<input name="flower"checked="checked"/>
Jquery代码：
alert($("input[name^='app']").val());
结果：apple
5、[attribute$=value]
匹配给定的属性是以某些值结尾的元素
<input name="apple"value="apple"/>
<input name="flower"checked="checked"/>
Jquery代码：
alert($("input[name$='ple']").val());
结果：apple
6、[attribute*=value]
匹配给定的属性是以包含某些值的元素
<input name="apple"value="apple"/>
<input name="flower"checked="checked"/>
Jquery代码：
alert($("input[name*='ppl']").val());
结果：apple
7、[selector1][selector2][selectorN]
复合属性选择器，需要同时满足多个条件时使用。
实例：
<input name="apple"value="apple" id="apple"/>
<input name="flower"checked="checked"/>
Jquery代码：
alert($("input[name^='app'][value][id='apple']").val());
子元素
1、:nth-child(index)
匹配其父元素下的第N个子或奇偶元素（从1开始计数）
实例：
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Jquery代码：
alert($("ulli:nth-child(2)").text());
结果：list item 2
2、:first-child
匹配第一个子元素
实例：
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Jquery代码：
alert($("ul li:first-child").text());
结果：list item 1
3、:last-child
匹配最后一个子元素
实例：
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Jquery代码：
alert($("ul li:last-child").text());
结果：list item 3
4、:only-child
如果某个元素是父元素中唯一的子元素，那将会被匹配
如果父元素中含有其他元素，那将不会被匹配。
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<ul>
<li>only list item 1</li>
</ul>
Jquery代码：
alert($("ul li:only -child").text());
结果: only list item 1
表单
1、:input
匹配所有 input, textarea, select 和 button 元素
实例：查找所有的input元素，下面这些元素都会被匹配到。
<form>
<input type="button"value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
alert($(":input option:only-child").text());
结果：option
2、:text
匹配所有单行文本框
实例：
<input type="text" id="text" name="text"value="text" />
Jquery代码：
alert($(":text[id='text'][name='text']").val());
结果：text
3、:password
匹配所有密码框
实例：
<input type="password" id="text"name="text" value="text" />
Jquery代码：
alert($(":password [id='text'][name='text']").val());
结果：text
4、:radio
匹配所有单选按钮（用法同上）
5、:checkbox
匹配所有复选框（用法同上）
6、:submit
匹配所有提交按钮（用法同上）
7、:image
匹配所有图像域（用法同上）
8、:reset
匹配所有重置按钮（用法同上）
9、:button
匹配所有按钮（用法同上）
10、:file
匹配所有文件域（用法同上）
11、:hidden
匹配所有不可见元素，或者type为hidden的元素（上边存在不在举例说明）
表单对象属性
1、:enabled
匹配所有可用元素
实例：
<form>
<input name="email"disabled="disabled" />
<input name="id" value="enabled"/>
</form>
Jquery代码：
alert($("input:enabled").val());
结果：enabled
2、:disabled
匹配所有不可用元素
实例：
<form>
<input name="email"disabled="disabled" value="disabled"/>
<input name="id" value="enabled"/>
</form>
Jquery代码：
alert($("input: disabled ").val());
结果：disabled
3、:checked
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
实例：
<form>
<inputtype="checkbox" name="newsletter"checked="checked" value="Daily" />
<input type="checkbox"name="newsletter" value="Weekly" />
<input type="checkbox"name="newsletter" checked="checked"value="Monthly" />
</form>
Jquery代码：
alert($("input:checked").eq(0).val());
alert($(":checkbox:checked").eq(0).val());
结果：Daily 、 Daily
4、:selected
匹配所有选中的option元素
实例：
<select>
<optionvalue="1">Flowers</option>
<option value="2"selected="selected">Gardens</option>
<optionvalue="3">Trees</option>
</select>
Jquery代码：
alert($(“select option:selected”).text());
结果：GardensOption
二、属性
属性
1、attr(name)
取得第一个匹配元素的属性的值
实例：
<img src="test.jpg"/>jQuery代码：$(“img”).attr(“src”)结果：test.jsp2、attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性。
实例：
<img/>
jQuery代码：
$("img").attr({src: "test.jpg", alt: "Test Image" });
结果：显示相应的图片
3、 attr(key,value)
为所有匹配的元素设置一个属性值
实例：
<img/>
jQuery代码：
$("img").attr(“src”:"test.jpg");
结果：显示相应的图片
4、attr(key,function(index, attr))
为所有匹配的元素设置一个计算的属性值
不提供值，而是提供一个函数，由这个函数计算的值作为属性值
实例：
<img/><input type="text" id="text" name="text" value="text" src="test.jpg"/>
Jquery代码：
$("img").attr("src",function(){return $("#text").attr("src"); });结果：显示test.jpg5、removeAttr(name)
从每一个匹配的元素中删除一个属性
实例：
<img src="test.jpg"/>Jquery代码：
$("img").removeAttr("src");结果：图片不能显示
css类
1、addClass（class）
2、addClass(function(index,class))
3、removeClass([class])
4、removeClass(function(index,class))
5、toggleClass(class)
6、toggleClass(class,switch)
7、toggleClass(function(index,class), [switch])
HTML代码
1、html（）
得到匹配元素的html内容
实例：
<divid="testHtml"><b>aaaaaaa</b></div>
Jquery代码：
alert($("#testHtml").html());
结果：<b>aaaaaaa</b>
2、html（val）
设置每一个匹配元素的html内容
实例：
<divid="testHtml"><b>aaaaaaa</b></div>
Jquery代码：
$("#testHtml").html(“<b>bbbbbb</b>”);
alert($("#testHtml").html());
结果：<b> bbbbbb </b>
3、html(function(index,html))
文本
1、text（）
取得所有匹配元素的内容。
实例：
<divid="testHtml"><b>aaaaaaa</b></div>
Jquery代码：
alert($("#testHtml").text());
结果：aaaaaaa
2、text（val）
设置所有匹配元素的文本内容
实例：
<divid="testHtml"><b>aaaaaaa</b></div>
Jquery代码：
$("#testHtml").text(“bbbbbb”);
alert($("#testHtml").text());
结果：bbbbbb
3、text（function(index,html)）
值
1、val（）
获得第一个匹配元素的当前值。
实例：
<inputtype="text" value="some text"/>
jQuery代码：
$(“input”).val();
结果：some text
2、val（val）
设置每一个匹配元素的值
实例：
<inputtype="text"/>
jQuery代码：
$(“input”).val(“some text”);
$(“input”).val();
结果：some text
3、val（array）
check,select,radio等都能使用为之赋值
实例：
<selectid="single">
<option>Single</option>
<option>Single2</option>
</select>
<selectid="multiple" multiple="multiple">
<optionselected="selected">Multiple</option>
<option>Multiple2</option>
<optionselected="selected">Multiple3</option>
</select><br/>
<inputtype="checkbox" value="check1"/> check1
<inputtype="checkbox" value="check2"/> check2
<inputtype="radio" value="radio1"/> radio1
<inputtype="radio" value="radio2"/> radio2
jQuery 代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
4、val（function（index，value））
三、筛选
过滤
1、eq(index)
获取第N个元素
实例：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Jquery代码
$(“ul > li”).eq(0).text();
结果：1
2、first（）
获取第一个元素
实例：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Jquery代码
$(“ul > li”).first().text();
结果：1
3、last（）
获取最后个元素
实例：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Jquery代码
$(“ul > li”).last().text();
结果：3
4、hasClass（）
检查当前的元素是否含有某个特定的类，如果有，则返回true
实例：
<div id="protected"class="protected"></div><div></div>
Jquery代码：
alert($("#protected").hasClass("protected"));
结果：true
5、filter(expr)
筛选出与指定表达式匹配的元素集合
实例：
<p>Hello</p><p>HelloAgain</p><p class="selected">And Again</p>
Jquery代码：
alert（$("p").filter(".selected").text()）；
结果：And Again
6、filter(fn)
筛选出与指定函数返回值匹配的元素集合
7、is(expr)
用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合，或者表达式无效，都返回'false'。
实例：
<form><input type="checkbox" /></form>Jquery代码：
alert（$("input[type='checkbox']").parent().is("form")）结果：true
8、map(callback)
将一组元素转换成其他数组（不论是否是元素数组）
实例：
<p><b>Values:</b></p>
<form>
<input type="text"name="name" value="John"/>
<input type="text"name="password" value="password"/>
<input type="text"name="url" value="http://ejohn.org/"/>
</form>
Jquery代码：
$("p").append($("input").map(function(){
return $(this).val();
}).get().join(",") );
结果：[ <p>John, password, http://ejohn.org/</p> ]
9、has(expr)
保留包含特定后代的元素，去掉那些不含有指定后代的元素
实例：
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
[u1] <li>list item 3</li>
<li>list item 4</li>
</ul>
Jquery代码：
$('li').has('ul').css('background-color','red');
结果：
批注1的背景色变为红色
10、not(expr)
删除与指定表达式匹配的元素
实例：
<p>Hello</p><p id="selected">Hello Again</p>Jquery代码：
alert($(“p”).not(“p[id^=’sele’]”).text());
结果：Hello
11、slice(start, [end])
选取一个匹配的子集
参数
startInteger
开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
end (可选)Integer
结束选取自己的位置，如果不指定，则就是本身的结尾。
实例：
<p>Hello</p><p>cruel</p><p>World</p>
Jquery代码：
$("p").slice(0,1).wrapInner("<b></b>");
结果：[<p><b>Hello</b></p> ]
查找
1、children([expr])
可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
实例：
<div id="divdiv">
<divclass="div3">
<p>div-div1-p</p>
</div>
<div class="div2">
<p>div-div2-p</p>
</div>
</div>
Jquery代码：
alert($("div").children(".div3").text());
alert($("#divdiv").children().last().text());
2、closest(expr,[context])
closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
3、find(expr)
搜索所有与指定表达式匹配的元素
实例：
<p><span>Hello</span>,how are you?</p>
Jquery代码：
$(“p”).find(“span”);
4、next([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。
实例：
<div id="divdiv"> <div class="div3"> <p>div-div1-p</p> </div> <div class="div2"> <p>div-div2-p</p> </div> <div class="div4"> <p>div-div4-p</p> </div></div>alert($(".div3").next().text());
如果使用alert($(".div3").next().eq(1).text());结果为空
结果：
div-div2-p
5、nextAll([expr])
查找当前元素之后所有的同辈元素
实例：
<div id="divdiv"> <div class="div3"> <p>div-div1-p</p> </div> <div class="div2"> <p>div-div2-p</p> </div> <div class="div4"> <p>div-div4-p</p> </div></div>alert($(".div3").next().text());结果：div-div2-p
如果使用alert($(".div3").next().eq(1).text());结果为div-div4-p
6、nextUntil([expr])
查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
与nextAll()的对比：nextAll(expr)找到的是expr指定的元素，而nextUntil(expr)找到的是elements，是一个集合，直到expr指定的元素为止
实例：
<dl>
<dt>term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt>term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
Jquery代码：
$('#term-2').nextUntil('dt').css('background-color','red');
结果：【批注2】背景变为红色
7、offsetParent()
这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
8、parent([expr])
取得一个包含着所有匹配元素的唯一父元素的元素集合（就是找爹）
实例：
<div id="divdiv">
<divclass="div3" position="relative">
<pid="ppp">div-div1-p</p>
</div>
<div class="div2">
<p>div-div2-p</p>
</div>
<div class="div4">
<p>div-div4-p</p>
</div>
</div>
Jquery代码：
alert($("#ppp").parent(".div3").html());
结果：<p id="ppp">div-div1-p</p>
9、parents([expr])
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。（找祖宗）
实例：
<div id="divdiv">
<divclass="div3" position="relative">
<pid="ppp">div-div1-p</p>
</div>
<div class="div2">
<p>div-div2-p</p>
</div>
<div class="div4">
<p>div-div4-p</p>
</div>
</div>
Jquery代码：
alert($("#ppp").parents("#divdiv").html());
结果：
<div id="divdiv">
<divclass="div3" position="relative">
<pid="ppp">div-div1-p</p>
</div>
<div class="div2">
<p>div-div2-p</p>
</div>
<div class="div4">
<p>div-div4-p</p>
</div>
</div>
10、parentsUntil([expr])
查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。
用法同nextUntil([expr])
实例：
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<liclass="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<liclass="item-1">1</li>
<liclass="item-2">2</li>
<liclass="item-3">3</li>
</ul>
</li>
<liclass="item-c">C</li>
</ul>
</li>
[u3] <liclass="item-iii">III</li>
</ul>
Jquery代码：
直到类为level-1为止（不包含level-1）
$('li.item-a').parentsUntil('.level-1').css('background-color','red');
结果：【批注3】背景变为红色
11、prev([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。
实例：
<p>Hello</p><div><span>HelloAgain</span></div><p>And Again</p>
Jquery代码：
alert($("p").prev().html());
结果：
<span>Hello Again</span>
12、prevAll([expr])
查找当前元素之前所有的同辈元素
实例：
<div>
<p>Hello</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test").prevAll().eq(0).html());结果：<span>HelloAgain</span>
alert($("#test").prevAll().eq(1).html());结果：Hello
说明：得到的对象集合遍历时是从后往前数的
13、prevUntil([expr])
查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止（不包括匹配的元素）
实例：
<div>
<pid="test1">Hello1</p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test").prevUntil("#test1").eq(3).html()); 结果：null
alert($("#test").prevUntil("#test1").eq(2).html());结果：Hello2
alert($("#test").prevUntil("#test1").eq(0).html());结果：<span>HelloAgain</span>
14、siblings([expr])
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合（即为：找到所有除了自己的同辈元素）
实例：
<div>
<pid="test1">Hello1</p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test").siblings().eq(0).html()); 结果：Hello1
alert($("#test").siblings().eq(1).html());结果：Hello2
alert($("#test").siblings().eq(2).html());结果：Hello3
alert($("#test").siblings().eq(3).html());结果：<span>HelloAgain</span>
alert($("#test").siblings().eq(4).html());结果：null
串联
1、add(expr, [context])
把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
jQuery 1.4 中， .add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序，而不再是简单的添加。
<p id="test1">Hello1</p>
<p id="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test").add("#test1").eq(0).html()); 结果：Hello1
alert($("#test").add("#test1").eq(1).html()); 结果：And Again
2、andSelf()
加入先前所选的加入当前元素中（也就是：如果是两级选择的话，父元素也是选择的元素）
实例：
<div id=”testDiv”>
<pid="test1">Hello1</p>
<p id="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
1、alert($("#testDiv").find("#test1").andSelf().html());
结果：<p id="test1">Hello1</p>
<pid="test2">Hello2</p>
<p id="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
2、alert($("#testDiv").find("#test1").html());
结果：Hello1
3、contents()
查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
实例：
<div id="testDiv">
<pid="test1">Hello1</p>
<pid="test2">Hello2</p>
<p id="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
Jquery代码：
$("#testDiv").contents().wrap("<b/>");
结果：所以文本变为粗体
4、end()
回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作
<div id="testDiv">
<p id="test1">Hello1</p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p>
<div><span>HelloAgain</span></div>
<p id="test">AndAgain</p>
</div>
Jquery代码：
alert($("div[id='testDiv']").find("p[id='test1']").end().html());
结果：
<pid="test1">Hello1</p>
<p id="test2">Hello2</p>
<pid="test3">Hello3</p>
<div><span>HelloAgain</span></div>
<p id="test">AndAgain</p>
四、文档处理
内部插入
1、append(content)
向每个匹配的元素内部追加内容
实例：
<p id="test1">Hello1</p>
<p id="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>Hello Again</span></div><pid="test">And Again</p>
</div>
Jquery代码：
$("#test1").append("<b>,liqiang</b>");
alert($("#test1").text());
结果：Hello1,liqiang
2、append(function(index,html))
向每个匹配的元素内部追加内容
3、appendTo(content)
把所有匹配的元素追加到另一个指定的元素集合中。
<p id="test1">Hello1</p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
<pid="test4">Hello4</p>
Jquery代码：
$("#test4").appendTo("#testDiv");
alert($("div").html());
结果：
<p id="test1">Hello1</p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
<pid="test4">Hello4</p>
4、prepend(content)
向每个匹配的元素内部前置内容。
<div id="testDiv">
<pid="test1">Hello1</p>
<pid="test2">Hello2</p>
<p id="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
$("#testDiv").prepend("<p><b>Hello0</b></p>");
alert($("#testDiv").html());
结果：
<p><b>Hello0</b></p>
<pid="test1">Hello1</p>
<pid="test2">Hello2</p>
<p id="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
5、prepend(function(index,html))
向每个匹配的元素内部最前面追加内容。
6、prependTo(content)
把所有匹配的元素前置到另一个、指定的元素元素集合中。（注意与prepend还有appendTo的区别）
<div id="testDiv">
<pid="test1">Hello1</p>
<p id="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
<pid="test4">Hello4</p>
Jquery代码：
$("#test4").prependTo("#testDiv");
alert($("div").html());
结果：
<pid="test4">Hello4</p>
<pid="test1">Hello1</p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
外部插入
1、after(content)
在每个匹配的元素之后插入内容。（注意是匹配元素的外部并且是后边插入元素）
<div id="testDiv">
<p id="test1">Hello1</p>
<p id="test2">Hello2</p>
<p id="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
$("#testDiv").after("<divid='testAfterDiv'><p>testAfterDiv</p></div>");
alert($("#testAfterDiv").html());
结果：<p>testAfterDiv</p>
2、after(function)
在每个匹配的元素之后插入内容。使用方式同上
3、before(content)
在每个匹配的元素之前插入内容。
使用方法同上
4、before(function)
在每个匹配的元素之前插入内容。
使用方法同上
4、insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实例：
<p>I would like to say: </p><div id="foo">Hello</div>Jquery代码:
$("p").insertAfter("#foo");结果：把“p”匹配的元素插入到#foo元素的后边
<div id="foo">Hello</div><p>I would like to say: </p>5、insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实例：
<div id="foo">Hello</div><p>I would like to say: </p>Jquery代码:
$("p").insertBefore("#foo");
结果：把“p”匹配的元素插入到#foo元素的前边
<p>I would like to say: </p><div id="foo">Hello</div>包裹
1、wrap(html)
把所有匹配的元素用其他元素的结构化标记包裹起来
实例：
<div id="testDiv">
<pid="test1">Hello1</p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
$("#test1").wrap("<b></b>");
结果显示：Hello1变为粗体Hello1
2、wrap(elem)
把所有匹配的元素用其他元素的结构化标记包装起来。
<p>Test Paragraph.</p><div id="content"></div>jQuery 代码:
$("p").wrap(document.getElementById('content'));结果:
<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>3、wrap(fn)
把所有匹配的元素用其他元素的结构化标记包装起来。
同上，参数为function（）
4、unwrap()
这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果
<pid="test1">Hello1</p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
$("#test1").wrap("<b></b>");结果：Hello1
$("#test1").unwrap(); 结果：Hello1
5、wrapAll(html)
将所有匹配的元素用单个元素包裹起来
<div id="testDiv">
<pid="test1">Hello1</p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
$("p").wrapAll("<b></b>");
结果：所有的p标签全部变为粗体
6、wrapAll(elem)
将所有匹配的元素用单个元素包裹起来
<div id="testDiv">
<pid="test1">Hello1</p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
$("p").wrapAll(document.createElement("b"));
结果：所有的p标签全部变为粗体
7、wrapInner(html)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapInner("<b></b>");
结果:
<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
8、wrapInner(elem)
将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapInner(document.createElement("b"));
结果:
<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
9、wrapInner(fn)
将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来
HTML 代码:
<divclass="container">
<divclass="inner">Hello</div>
<divclass="inner">Goodbye</div>
</div>
jQuery 代码:
$('.inner').wrapInner(function(){
return '<div class="' +$(this).text() + '" />';
});
结果:
<div class="container">
<div class="inner">
<divclass="Hello">Hello</div>
</div>
<div class="inner">
<divclass="Goodbye">Goodbye</div>
</div>
</div>
替换
1、replaceWith(content)
将所有匹配的元素替换成指定的HTML或DOM元素
实例：
<divclass="container">
<div class="innerfirst">Hello</div>
<div class="innersecond">And</div>
<div class="innerthird">Goodbye</div>
</div>
jQuery 代码:
$('.third').replaceWith($('.first'));
结果:
<divclass="container">
<div class="innersecond">And</div>
<div class="innerfirst">Hello</div>
</div>
2、replaceAll(selector)
用匹配的元素替换掉所有 selector匹配到的元素。
实例：
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph.</b>").replaceAll("p");
结果:
<b>Paragraph.</b><b>Paragraph. </b><b>Paragraph. </b>
删除
1、empty()
删除匹配的元素集合中所有的子节点。
<p>Hello,<span>Person</span> <a href="#">andperson</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
2、remove([expr])
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除
<p>Hello</p>how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are
3、detach([expr])
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
<p>Hello</p>how are <p>you?</p>
jQuery 代码:
$("p"). detach ();
结果:
how are
复制
1、clone()
克隆匹配的DOM元素并且选中这些克隆的副本。
<b>Hello</b><p>,how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>,how are you?</p>
2、clone(true)
元素以及其所有的事件处理并且选中这些克隆的副本
<button id="testbutton"οnclick="testClone()">Clone Me!</button>
function testClone(){
alert("a");
$("#testbutton").clone(true).insertAfter("#testbutton");
}
结果：点击时在当前button的后边生成一个button并且具有第一个button的点击事件
五、CSS
CSS
1、css(name)
访问第一个匹配元素的样式属性。
实例：
<pid="test1"><fontcolor="red">Hello1</font></p>
Jquery代码：
alert($("font").css("color"));
结果：red
2、css(properties)
把一个“名/值对”对象设置为所有匹配元素的样式属性。
实例：
$("p").css({ color: "#ff0011", background: "blue" });3、css(name, value)
在所有匹配的元素中，设置一个样式属性的值
<p id="test1"><fontcolor="red">Hello1</font></p>
Jquery代码：
$("font").css("color","blue");
alert($("font").css("color"));
结果：blue
3、css(name,function(index, value))
在所有匹配的元素中，设置一个样式属性的值。
$("div").click(function(){
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
位置
1、offset()
获取匹配元素在当前视口的相对偏移。
<div id="testDiv">
<p id="test1"><fontcolor="red">Hello1</font></p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test1").offset().top);
结果：16
2、offset(coordinates)
设置匹配元素相对于document对象的坐标。
<pid="test1"><fontcolor="red">Hello1</font></p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
$("#test1").offset({left:100,top:50});
alert($("#test1").offset().top);
结果：50
3、position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
<div id="testDiv">
<p id="test1"><fontcolor="red">Hello1</font></p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test1").position().left);
结果：8
4、scrollTop()
获取匹配元素相对滚动条顶部的偏移
<pid="test1"><fontcolor="red">Hello1</font></p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test1").scrollTop());
结果：0
5、scrollTop(val)
传递参数值时，设置垂直滚动条顶部偏移为该值。
此方法对可见和隐藏元素均有效。
<div id="testDiv">
<p id="test1"><fontcolor="red">Hello1</font></p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test1").scrollTop(300));
6、scrollLeft()
获取匹配元素相对滚动条左侧的偏移。
此方法对可见和隐藏元素均有效。
<div id="testDiv">
<p id="test1"><fontcolor="red">Hello1</font></p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test1").scrollLeft());
结果：0
7、scrollLeft(val)
传递参数值时，设置水平滚动条左侧偏移为该值。
此方法对可见和隐藏元素均有效。
$("div.demo").scrollLeft(300);尺寸
1、height()
取得第一个匹配元素当前计算的高度值（px）。
<div id="testDiv">
<p id="test1"><fontcolor="red">Hello1</font></p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test1").height());
结果：19
2、height(val)
为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位（如：em或%），使用px。
如果没有明确指定单位（如：em或%），使用px。
取得第一个匹配元素当前计算的高度值（px）。
<div id="testDiv">
<p id="test1"><fontcolor="red">Hello1</font></p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test1").height());
结果：40
3、width()
取得第一个匹配元素当前计算的宽度值（px）。
在 jQuery 1.2 以后可以用来获取 window 和 document 的宽
实例：
<div id="testDiv">
<p id="test1"><fontcolor="red">Hello1</font></p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
alert($("#test1").width());
结果：1329
4、width(val)
为每个匹配的元素设置CSS宽度(width)属性的值。
如果没有明确指定单位（如：em或%），使用px。
实例：
<div id="testDiv">
<p id="test1"><fontcolor="red">Hello1</font></p>
<pid="test2">Hello2</p>
<pid="test3">Hello3</p><div><span>HelloAgain</span></div><p id="test">And Again</p>
</div>
Jquery代码：
$("#test1").width(1000);
alert($("#test1").width());
结果：1000
4、innerHeight()
获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
此方法对可见和隐藏元素均有效。
5、innerWidth()
获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
此方法对可见和隐藏元素均有效。
6、outerHeight(options)
获取第一个匹配元素外部高度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。
7、outerWidth(options)
获取第一个匹配元素外部宽度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。
六、事件
页面载入
1、ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
请确保在元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
参数
fnFunction
要在DOM就绪时执行的函数
使用方法：
1、复杂写法
$(document).ready(function(){
// 在这里写你的代码...
});
2、简写
$(function(){
// 在这里写你的代码...
});
事件处理
说明：这些事件处理的使用必须放到
$(function(){
});
代码块中
1、bind(type, [data], fn)
为每个匹配元素的特定事件绑定事件处理函数
说明：
.bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象，比如focus,mouseover, 和 resize，都是可以作为type参数传递进来的。
jQuery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.bind('click')。一共有以下这些：blur, focus, focusin, focusout, load, resize, scroll, unload, click,dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,mouseleave, change, select, submit, keydown, keypress, keyup, error
基本用法：
<button id=”foo”>clickme</button>
$(function(){
$('#foo).bind('click', function() {
alert('Userclicked on "foo."');
});
});
2、one(type, [data], fn)
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。
<button id=”testOne”>clickme</button>
$(function(){
$('#testOne').one('click',function(){
alert('testOne');
});
});
结果：
第一次点击的时候弹出testOne，再点击就没有触发事件
3、trigger(type,[data])[u4]
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。
4、unbind([type], [fn])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
使用方法：
$(function(){
$('#testOne').unbind().bind('click',function(){
alert('testOne');
});
});
事件委派
1、live(type, [data], fn)
jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。
<div class="clickme">Clickhere</div>
$(function(){
$('.clickme').live('click',function() {
alert("Bound handler called.");
$(".clickme").after('<divclass="clickme">Another target</div>');
});
});
使用bind（）时点击新添加的div时不会触发事件
而使用live（）时点击新添加的div时同样会触发事件
2、die([type], [fn])
此方法与live正好完全相反。
如果不带参数，则所有绑定的live事件都会被移除。
你可以解除用live注册的自定义事件。
如果提供了type参数，那么会移除对应的live事件。
如果也指定了第二个参数function,则只移出指定的事件处理函数。
$("a").live("click",function(event){
alert("nofeng");
});
$("a").die("click"); /*当die注释后.click事件有2个.die不会清除click事件*/
事件切换
1、hover(over,out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
参数
overFunction
鼠标移到元素上要触发的函数
outFunction
鼠标移出元素要触发的函数
实例：
<div class="menuouter">
<div class="inner">
<ul>
<li class="selected"style="background:none;"><a href="#">首页</a></li>
<li><a href="#" οnclick="alert('new');">新闻</a></li>
<li><a href="#">体育</a></li>
</ul>
</div>
</div>
Jquery代码：
$("div[class^='menu']").hover(
function(){
$(this).css("background","red");
},
function(){
$(this).css("background","green");
}
);
结果显示：鼠标移上时div背景变为红色，鼠标移出时div背景变为绿色
2、toggle(fn,fn2, [fn3, fn4, ...])
每次点击后依次调用函数。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
可以使用unbind("click")来删除。
实例：
<table border="1">
<tr>
<td>1-1</td>
</tr>
</table>
Jquery代码：
$("td").toggle(
function () {
$(this).css("background","green");
},
function () {
$(this).css("background","red");
}
);
结果：第一次点击单元格时，背景为绿色，第二次点击的时候变为红色。依次循环
事件
1、blur()
触发每一个匹配元素的blur事件。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
实例：
帐号：<input id="account"name="account"type="text" value="请输入帐号">
<p><button id="btn2">触发输入域的 blur 事件</button></p>
Jquery代码：
/*进入焦点时触发*/
$("#account").focus(function(){
var oldValue = $(this).val();
if(oldValue ==this.defaultValue){
$(this).val("");
}
});
/*失去焦点时触发*/
$("#account").blur(function(){
var oldValue = $(this).val();
if(oldValue == ""){
$(this).val(this.defaultValue);
}
});
$("#btn2").click(function(){
$("input").blur();
});
结果：在填写表单时需要实现如下效果
2、blur(fn)
在每一个匹配元素的blur事件中绑定一个处理函数。
实例同上：
3、change()
触发每个匹配元素的change事件
这个函数会调用执行绑定到change事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发
实例：
<button>激活文本域的 change事件</button>
<p>Enter your name: <inputclass="field" type="text" /></p>
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
$("button").click(function(){
$("input").change();
});[u5]
4、change(fn)
在每一个匹配元素的change事件中绑定一个处理函数。用法同上
5、click()
触发每一个匹配元素的click事件。
6、click(fn)
实例：
帐号：<input id="account"name="account"type="text" value="请输入帐号">
<p><button id="btn2">触发输入域的 blur 事件</button></p>
<p><button id="btn3">触发输入域的 click 事件</button></p>
Jquery代码：
/*进入焦点时触发*/
$("#account").focus(function(){
var oldValue = $(this).val();
if(oldValue ==this.defaultValue){
$(this).val("");
}
});
/*失去焦点时触发*/
$("#account").blur(function(){
var oldValue = $(this).val();
if(oldValue == ""){
$(this).val(this.defaultValue);
}
});
$("#btn2").click(function(){
$("input").blur();
});
$("#btn3").click(function(){
$("#btn2").click();
});
7、dblclick()
双击事件。dblclick事件会在元素的同一点双击时触发。
8、dblclick(fn)
在每一个匹配元素的dblclick事件中绑定一个处理函数。
<pid="testdblClick">testdblClick</p>
<p><button id="btn4">触发dblclick 事件</button></p>
Jquery代码：
$("#testdblClick").dblclick(function(){
alert("我被双击了");
});
$("#btn4").click(function(){
$("#testdblClick").dblclick();
});
9、error()
触发每一个匹配元素的error事件。
这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发。
10、error(fn)
在每一个匹配元素的error事件中绑定一个处理函数。
对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。
<img id="testError"src="errorimg.gif" />
$("#testError").error(function(){
$("#testError").replaceWith("<p><b>图片未加载！</b></p>");
});
11、focus()
触发每一个匹配元素的focus事件。
12、focus(fn)
在每一个匹配元素的focus事件中绑定一个处理函数
Focus事件的使用方法看blur（）
13、focusin(fn)
在每一个匹配元素的focusin事件中绑定一个处理函数。
当一个元素，或者其内部任何一个元素获得焦点的时候会触发这个事件。这跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
14、focusout(fn)
在每一个匹配元素的focusout事件中绑定一个处理函数。
当一个元素，或者其内部任何一个元素失去焦点的时候会触发这个事件。这跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
15、keydown()
触发每一个匹配元素的keydown事件
这个函数会调用执行绑定到keydown事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发
16、keydown(fn)
在每一个匹配元素的keydown事件中绑定一个处理函数。
keydown事件会在键盘按下时触发。
17、keypress()
触发每一个匹配元素的keypress事件
T这个函数会调用执行绑定到keydown事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发
18、keypress(fn)
在每一个匹配元素的keypress事件中绑定一个处理函数。
keypress事件会在敲击按键时触发。 敲击按键的定义为按下并抬起同一个按键。这几个事件发生的顺序是:keydown
keypress
keyup
19、keyup()
触发每一个匹配元素的keyup事件
这个函数会调用执行绑定到keyup事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keyup事件会在按键释放时触发。
20、keyup(fn)
在每一个匹配元素的keyup事件中绑定一个处理函数。
keyup 事件会在键盘按下时触发。
21、load(fn)
在每一个匹配元素的load事件中绑定一个处理函数。
如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。
<imgsrc="/i/shanghai_lupu_bridge.jpg" />
<div>图像正在加载中...</div>
$("img").load(function(){
$("div").text("图像已加载");
});
22、mousedown(fn)
在每一个匹配元素的mousedown事件中绑定一个处理函数。
mousedown事件在鼠标在元素上点击后会触发
<pid="testMouseDown">testMouseDown</p>
$("#testMouseDown").mousedown(function(){alert('testMouseDown')});
23、mousemove(fn)
在每一个匹配元素的mousemove事件中绑定一个处理函数。
mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标
<pid="testMouseMove">testMouseMove</p>
$("#testMouseMove").mousemove(function(){alert('testMouseMove')});
24、mouseout(fn)
mouseout事件在鼠标从元素上离开后会触发
<pid="testMouseOut">testMouseOut</p>
$("#testMouseOut").mouseout(function(){alert('testMouseOut')});
25、mouseover(fn)
在每一个匹配元素的mouseover事件中绑定一个处理函数。
mouseover事件会在鼠标移入对象时触发
<p id="testMouseOver"> testMouseOver</p>
$("# testMouseOver ").mouseover(function(){alert(‘testMouseOver’)});
26、mouseup(fn)
在每一个匹配元素的mouseup事件中绑定一个处理函数。
mouseup事件会在鼠标点击对象释放时
<p id="testMouseUp"> testMouseUp</p>
$("# testMouseUp ").mouseup(function(){alert(‘testMouseUp’)});
27、resize(fn)
在每一个匹配元素的resize事件中绑定一个处理函数。
当文档窗口改变大小时触发
$(window).resize(function(){ alert("Stop it!");});28、scroll(fn)
在每一个匹配元素的scroll事件中绑定一个处理函数。
当滚动条发生变化时触发
$(window).scroll(function(){
alert("Stop it!");
});
29、select()
30、select(fn)
当用户在文本框(包括input和textarea)中选中某段文本时会触发select事件。
<input id="account"name="account" type="text" value="请输入帐号">
$("input").select(function(){
alert("account");
});
31、submit
32、submit(fn)
在每一个匹配元素的submit事件中绑定一个处理函数。
submit事件将会在表单提交时触发
33、ubload(fn)
在每一个匹配元素的unload事件中绑定一个处理函数。
$(window).unload( function () { alert("Bye now!"); } );结果：关闭页面时触发事件
七、效果
基本
1、show()
显示隐藏的匹配元素。
这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
实例：
<p style="display:none">Hello</p>
$("p[style]").show();
2、show(speed, [callback])
以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数
<p style="display: none">Hello</p>$(function(){
$("p[style]").show("slow",function(){
$(this).text("加载完成");
});
3、hide()
隐藏显示的元素
4、hide(speed, [callback])
以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。
<p>Hello</p>$(function(){
$("p").hide("slow",function(){
$(this).text("加载完成");
});
5、toggle()
切换元素的可见状态。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
6、toggle(switch)
根据switch参数切换元素的可见状态（ture为可见，false为隐藏）。
如果switch设为true，则调用show()方法来显示匹配的元素，如果switch设为false则调用hide()来隐藏元素。
7、toggle(speed, [callback])
以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数。
<p>Hello</p>$(function(){
$("p").toggle("slow",function(){
$(this).text("加载完成");
});
滑动
1、slideDown(speed, [callback])
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
<buttonclass="btn2">Show</button>
Jquery代码：
$(".btn2").click(function(){
$("p").slideDown();
});
2、slideUp(speed, [callback])
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
<button class="btn2">hide</button>
Jquery代码：
$(".btn2").click(function(){
$("p").slideUp();
});
3、slideToggle(speed,[callback])
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
<button class="btn2">hide</button>
Jquery代码：
$(".btn2").click(function(){
$("p").slideToggle ();
});
淡入淡出
1、fadeIn(speed,[callback])
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
<buttonclass="btn2">Show</button>
$(".btn2").click(function(){
$("p").fadeIn();
});
2、fadeOut(speed, [callback])
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
<buttonclass="btn1">Hide</button>
$(".btn1").click(function(){
$("p").fadeOut()
});
3、fadeTo(speed, opacity, [callback])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
参数
speedString,Number
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacityNumber
要调整到的不透明度值(0到1之间的数字).
callback (可选)Function
在动画完成时执行的函数
实例：用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度
$("p").fadeTo("slow",0.66);
自定义
1、animate(params, [duration], [easing], [callback])
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式
参数
paramsOptions
一组包含作为动画属性和终值的样式属性和及其值的集合
duration (可选)String,Number
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing (可选)String
要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
callback (可选)Function
在动画完成时执行的函数
实例：
<buttonclass="btn1">Animate</button>
<buttonclass="btn2">Reset</button>
Jquery代码：
$(".btn1").click(function(){
$("#box").animate({height:"200px"},"fast");
});
$(".btn2").click(function(){
$("#box").animate({height:"100px"},"slow");
});
2、animate(params, options)
参数
1、paramsOptions
一组包含作为动画属性和终值的样式属性和及其值的集合
2、optionsOptions
一组包含动画选项的值的集合。
选项
1、duration String,Number
(默认值:"normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
2、easing String
(默认值:"swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
3、complete Function
在动画完成时执行的函数
4、step Callback
5、queue Boolean
(默认值: true) 设定为false将使此动画不进入动画队列(jQuery 1.2中新增)
实例：
<button id="go1">» Animate Block1</button><button id="go2">» Animate Block2</button><div id="block1">Block1</div><div id="block2">Block2</div>Jquery代码：
$("#go1").click(function(){ $("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000);}); $("#go2").click(function(){ $("#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000);});3、stop([clearQueue], [gotoEnd])
停止所有在指定元素上正在运行的动画
停止后停在当前位置
实例：
<button id="go1">» AnimateBlock1</button>
Jquery代码：
$("#box").animate({height:"400px"},"fast");
$("#box").animate({height:"100px"},"slow");
$("#go1").click(function(){
$("#box").stop();
alert($('#box').css('height'));
});
4、delay(duration, [queueName])
设置一个延时来推迟执行队列中之后的项目。
实例：在.slideUp() 和 .fadeIn()之间延时800毫秒。
<divid="foo">aaaaaaaaaaaaaaaaaaa</div>
Jquery代码：
$('#foo').slideUp(300).delay(800).fadeIn(400);
5、jQuery.fx.off
把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。
八、Ajax
Ajax请求
1、jQuery.ajax([options])
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见$.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax()可以不带任何参数直接使用。
注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。
回调函数
如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。
数据类型
$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。
通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。
其中，text和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，
注意，我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。
如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。
如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用JSON.parse()。如果浏览器不支持，则使用一个函数来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。
注意，JSONP是JSON格式的扩展。他要求一些服务器端的代码来检测并处理查询字符串参数。更多信息可以参阅最初的文章。
如果指定了script或者jsonp类型，那么当从服务器接收到数据时，实际上是用了<script>标签而不是XMLHttpRequest对象。这种情况下，$.ajax()不再返回一个XMLHttpRequest对象，并且也不会传递事件处理函数，比如beforeSend。
发送数据到服务器
默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。
data选项既可以包含一个查询字符串，比如key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避。如果我们希望发送一个XML对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变contentType选项的值，用其他合适的MIME类型来取代默认的 application/x-www-form-urlencoded 。
高级选项
global选项用于阻止响应注册的回调函数，比如.ajaxSend，或者ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在ajaxSend里禁用这个。更多关于这些方法的详细信息，请参阅下面的内容。
如果服务器需要HTTP认证，可以使用用户名和密码可以通过username和password选项来设置。
Ajax请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过jQuery.ajaxSetup来全局设定，很少为特定的请求重新设置timeout选项。
默认情况下，请求总会被发出去，但浏览器有可能从他的缓存中调取数据。要禁止使用缓存的结果，可以设置cache参数为false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置ifModified为true。
scriptCharset允许给<script>标签的请求设定一个特定的字符集，用于script或者jsonp类似的数据。当脚本和页面字符集不同时，这特别好用。
Ajax的第一个字母是asynchronous的开头字母，这意味着所有的操作都是并行的，完成的顺序没有前后关系。$.ajax()的async参数总是设置成true，这标志着在请求开始后，其他代码依然能够执行。强烈不建议把这个选项设置成false，这意味着所有的请求都不再是异步的了，这也会导致浏览器被锁死。
$.ajax函数返回他创建的XMLHttpRequest对象。通常jQuery只在内部处理并创建这个对象，但用户也可以通过xhr选项来传递一个自己创建的xhr对象。返回的对象通常已经被丢弃了，但依然提供一个底层接口来观察和操控请求。比如说，调用对象上的.abort()可以在请求完成前挂起请求。
参数
options (可选)Object
AJAX 请求设置。所有选项都是可选的。
选项
1、Async Boolean
(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个Ajax 事件。如果返回false可以取消本次ajax请求。
function (XMLHttpRequest) {
this; // 调用本次AJAX请求时传递的options参数
}
2、cache Boolean
(默认: true,dataType为script和jsonp时默认为false)jQuery 1.2 新功能，设置为 false 将不缓存此页面。
3、complete(XHR, TS) Function
请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。Ajax 事件。
function (XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
}
4、contentType String
(默认:"application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）
5、Context Object
这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样：
$.ajax({ url: "test.html",context: document.body, success: function(){
$(this).addClass("done");
}});
6、Data Object,String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为'&foo=bar1&foo=bar2'。
dataFilterFunction
给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function (data, type) {
// 对Ajax返回的原始数据进行预处理
return data // 返回处理后的数据
}
7、dataType String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
"script": 返回纯文本JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP格式。使用 JSONP形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
8、Error Function
(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和"parsererror"。Ajax事件。
function (XMLHttpRequest, textStatus,errorThrown) {
// 通常 textStatus 和errorThrown 之中
// 只有一个会包含信息
this; // 调用本次AJAX请求时传递的options参数
}
9、Global Boolean
(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如ajaxStart 或 ajaxStop 可用于控制不同的Ajax 事件。
10、ifModified Boolean
(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。在jQuery 1.4中，他也会检查服务器指定的'etag'来确定数据没有被修改过。
11、Jsonp String
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
12、jsonpCallback String
为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。
13、Password String
用于响应HTTP访问认证请求的密码
14、processData Boolean
(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
15、scriptCharset String
只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。
16、Success Function
请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。Ajax 事件。
function (data, textStatus) {
// data 可能是 xmlDoc, jsonObj, html, text, 等等...
this; // 调用本次AJAX请求时传递的options参数
}
17、Traditional Boolean
如果你想要用传统的方式来序列化数据，那么就设置为true。请参考工具分类下面的jQuery.param 方法。
18、Timeout Number
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
19、Type String
(默认: "GET") 请求方式("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
20、url String
(默认: 当前页地址) 发送请求的地址。
21、Username String
用于响应HTTP访问认证请求的用户名
22、Xhr Function
需要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其他情况下是XMLHttpRequest 。用于重写或者提供一个增强的XMLHttpRequest 对象。这个参数在jQuery 1.3以前不可用。
Ajax事件
其他
九、工具
浏览器及特性检测
1、jQuery.support
2、jQuery.browser
3、jQuery.browser.version
4、jQuery.boxModel
数组和对象操作
1、jQuery.each(object,[callback])
通用例遍方法，可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
参数
objectObject
需要例遍的对象或数组。
callback (可选)Function
每个成员/元素执行的回调函数。
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ":" + n );
});
2、jQuery.extend([deep], target, object1, [objectN])
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。
未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。
参数
deep (可选)Object
如果设为true，则递归合并。
Target Object
待修改对象。
object1 Object
待合并到第一个对象的对象。
objectN (可选)Object
待合并到第一个对象的对象。
实例：
Jquery代码：
var empty = {};var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend(empty, defaults, options);结果:
settings == { validate: true, limit: 5, name: "bar" }empty == { validate: true, limit: 5, name: "bar" }3、jQuery.grep(array, callback, [invert])
使用过滤函数过滤数组元素。
此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
参数
arrayArray
待过滤数组。
callbackFunction
此函数将处理数组每个元素。第一个参数为当前元素，第二个参数而元素索引值。此函数应返回一个布尔值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素，i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”。
invert (可选)Boolean
如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。
4、jQuery.makeArray(obj)
将类数组对象转换为数组对象。
类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
$(function(){
vararr = jQuery.makeArray(document.getElementsByTagName("div"));
vararr1=arr.reverse();
$.each(arr1,function(i,n){
alert("Item#"+i+":"+n);
});
});
5、jQuery.map(array, callback)
将一个数组中的元素转换到另一个数组中。
作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中
参数
arrayArray
待转换数组。
callbackFunction
为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。函数可返回任何值。另外，此函数可设置为一个字符串，当设置为字符串时，将视为“lambda-form”（缩写形式？），其中 a 代表数组元素。如“a * a”代表“function(a){ return a * a; }”。
6、jQuery.inArray(value, array)
确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。
参数
valueAny
用于在数组中查找是否存在
arrayArray
待处理数组。
var arr = [ 4, "Pete", 8, "John" ];jQuery.inArray("John", arr); //3jQuery.inArray(4, arr); //0jQuery.inArray("David", arr); //-17、jQuery.toArray()
把jQuery集合中所有DOM元素恢复成一个数组。
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
Jquery代码：
$("button").click(function(){
x=$("li").toArray()
for (i=0;i<x.length;i++)
{
alert(x[i].innerHTML);
}
});
8、jQuery.merge(first, second)
合并两个数组
返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()
9、jQuery.unique(array)
删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组
10、jQuery.parseJSON(json)
接受一个JSON字符串，返回解析后的对象。
var obj =jQuery.parseJSON('{"name":"John"}');
alert( obj.name );
函数操作
1、jQuery.noop
2、jQuery.proxy(function,scope)
测试操作
1、jQuery.contains(container,contained)
一个DOM节点是否包含另一个DOM节点。
参数
containerObject
DOM元素作为容器，可以包含其他元素
containedObject
DOM节点，可能被其他元素所包含
jQuery.contains(document.documentElement, document.body); // truejQuery.contains(document.body, document.documentElement); // false2、jQuery.isArray(obj)
测试对象是否为数组。
alert($.isArray([]) );
3、jQuery.isFunction(obj)
测试对象是否为函数
function a(){
}
alert($.isFunction(a) );
4、jQuery.isEmptyObject(obj)
测试对象是否是空对象（不包含任何属性）。
alert(jQuery.isEmptyObject({})) // true
alert(jQuery.isEmptyObject({ foo:"bar" })) // false
5、jQuery.isPlainObject(obj)
测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。
jQuery.isPlainObject({}) // truejQuery.isPlainObject("test") // false字符串操作
1、jQuery.trim(str)
去掉字符串起始和结尾的空格。
实例：
alert(" hello, how are you? ");
alert($.trim(" hello, how are you? "));
URL
1、jQuery.param(obj,[traditional])
将表单元素数组或者对象序列化。是.serialize()的核心方法。
794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
