jQuery就是一个js的库·
主要分为两部分:
1·寻找元素
（选择器,筛选器）
2·操作元素
（CSS的操作,属性的操作,文本的处理）
选择器
基本
#id
#id //用于搜索的,通过元素的id属性中给定的值描述:(查找ID为myDiv的元素)HTML代码:
<div id="notMe"><p>id = "notMe"</p></div>
<div id="myDiv">id="myDiv"</div>jQuery代码:
$("#myDiv");结果：
[<div id="myDiv">id="myDiv"</div>]
element
element //一个用于搜索的元素·指向DOM节点的标签名描述：查找一个DIV元素·实列：HTML代码：
<div>DIV1</div>
<div>DIV2</div>
<div>SPAN</div>jQuery代码:$("div");结果:
[<div>DIV1</div>,<div>DIV2</div>]
.class
.class //一个用于搜索的类,一个元素可以有多个类,只要有一个符合就能被匹配到·描述:
查找所有类是“maClass”的元素实列:HTML代码:
<div class = "notMe">div class="notMe"</div>
<div class="myClass">div class = "myClass"</div>
<span class="myClass">span class="myClass"</span>jQuery代码:
$(".myClass");结果:
[<div class="myClass">div class="myClass"</div>]
[<span class="myClass">span class="myClass"</span>]
(*)匹配所有元素
HTML代码：
<div>DIV</div>
<span>SPAN</span>
<p>P</p>jQuery代码:$("*")结果:
[<div>DIV</div>]
[<span>SPAN<span>]
[<p>P<p>]
selector1,selector2,selectorN
//概述
//将每一个选择器匹配到的元素合并后一起返回·
//你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内·selector1
//一个有效的选择器selector2
//另一个有效的选择器selectorN
//任意多个有效的选择器//描述
//找到匹配任意一个类的元素HTML代码:
<div>div</div>
<p class="maClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>jQuery代码:
$("div,span,p.myClass")结果:
[<div>div</div>,<p class="myClass">p class="myClass"</p>,<span>span</span>]
层级
ancestor descendant
//概述
//在给定的祖先元素下匹配所有的后代元素ancestor
//任何一个有效选择器descendant
//用以匹配元素的选择器,并且它是第一个选择器的后代元素//描述
//找到表单中所有的(input)标签HTML代码<form>
<label>Name:</label>
<input name="name">
<fieldset>
<label>Newsletter:</label>
<input name="newsletter"/>
</fieldset>
</form>
<input name="none">jQuery代码$("form input")结果[<input name="name"/>,<input name="newsletter"/>]
parent > child
//概述
//在给定的父元素下匹配所有的子元素parent
//任何有效选择器child
//用以匹配元素的选择器,并且它是第一个选择的子元素·//描述
匹配表单中所有的自己input元素HTML代码
<form>
<label>Name:</label>
<input name="name"/>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter"/>
</fieldset>
</form>
<input name="none"/>jQuery代码
$("form > input")结果
[<input name="name"/>]
prev + next
//概述
//匹配所有紧接在prev元素后的next元素prev
//任何有效选择器next
//一个有效选择器并且紧接着第一个选择器//描述
//匹配所有跟在label后面的input元素HTML代码
<form>
<label>Name:</label>
<input name="name"/>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter"/>
</fieldset>
</form>
<input name="none"/>
prev ~siblings
//概述
//匹配prev元素之后的所有siblings元素prev
//任何有效选择器siblings
//一个选择器,并且它作为第一个选择器的同辈//描述
//找到所有与表单同辈的(inout)元素HTML代码
<form>
<label>Name:</label>
<input name="name"/>
<fieldset>
<label>Newsletter:</label>
<input name="newsletter"/>
</fieldset>
</form>
<input nme="none"/>
基本筛选器
基本筛选器一定要注意前边的冒号(:)
:first
//获取第一个元素//描述
//获取第一个元素实列:HTML代码
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>jQuery代码$("li:first"):结果
[<li>list item 1</li>]
:not(selector)
//概述
//去除所有与给定时器匹配的元素
//在jQuery1.3中.已经支持复杂选择器了(列如:not(div a)和:not(div,a))selector
//用于筛选的选择器//描述
//查找所有未选中的inout元素HTML代码
<input name="apple"/>
<input name="fllower" checked="checked"/>jQuery代码
$("input:not(:checked)"/)结果
[<input name="apple"/>]
:even
//概述
//匹配所有索引值为偶数的元素,从零开始//描述
//查找表格的1,3,5...行（既索引值0,2,4...）HTML代码
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery代码
$("tr:even")结果
[<tr><td>Header 1</td></tr>,<tr><td>Value 2</td></tr>]
:odd
//概述
//匹配所有索引值为基数的元素,从零开始计数//描述
//查找表格的2,4,6行（既索引值1,3,5....）HTML代码
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery代码
$("tr:odd")结果
[<tr><td>Value 1</td></tr>]
:eq(index)
//概述
//匹配一个给定的索引值的元素index
//从零开始计数描述
查找第二行HTML代码
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</tr></td>
<tr><td>Value 2</tr></td>
</table>jQuery代码$("tr:eq(1)")结果
[<tr><td>Value 1</tr></td>]
:gt(index)
//概述
//匹配所有大于给定索引值得元素index
//从零开始计数描述
查找第二行第三行,既索引值是1和2,也就是比零打HTML代码
<table>
<tr><td>Header 1</tr></td>
<tr><td>Value 1</tr></td>
<tr><td>Value 2</tr></td>
</table>jQuery代码$("tr:gt(0)")结果
[<tr><td>Value 1</td></tr>，<tr><td>Value 2 </td></tr>]
:last()
//概述
//获取最后一个元素描述
获取匹配的最后一个元素HTML代码
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>jQuery代码$("li:last")结果
[<li>list item 5</li>]
:lt(index)
//概述
//匹配所有小于给定索引值得元素index
从零开始计数描述
查找第一行第二行,既索引值是零和1,也就是比2小·HTML代码
<table>
<tr><td>Header 1</tr></td>
<tr><td>Value 1</tr></td>
<tr><td>Value 2</tr></td>
</table>jQuery代码$("tr:lt(2)")结果
[<tr><td>Header 1</tr></td>,<tr><td>Value 1</tr></td>]
:header
//概述
//匹配如：h1,h2,h3之类的标题元素描述
给页面内所有标题加上背景颜色HTML代码
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>jQuery代码$(":header".css("background","#dddddd"));结果
[<h1 style="background:#dddddd;">Header 1</h1>,<h2 style="background:#dddddd;">Header 2</h2>]
内容
:constains(text)
//概述
//匹配包含给定文本的元素text
//一个用以查找的字符串描述
查找所有包含"John"的div元素HTML代码
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>jQuery代码$("div:contains("John")")结果
[<div>John Resig</div>,<div>Malcom John Sinclair</div>]
:empty
//概述
//匹配所有不包含子元素或者文本的空元素描述
查找所有不包含子元素或者文本的空元素HTML代码
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>jquery代码
$("td:empty")结果
[<td></td>,<td></td>]
:has(selector)
//概述
//匹配含有选择器所匹配的元素的元素selector
一个用于筛选的选择器描述
给所有包含P元素的div元素添加一个text类HTML代码
<div><p>Hello</p></div>
<div>Hello Wyc</div>jQuery代码
$("div:has(p)").addClass("text");结果
[<div class="text"><p>Hello</p></div>]
:parent
//概述
//匹配含有子元素或者文本的元素描述
查找所有包含有子元素或者文本的td元素HTML代码
<teble>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>jQuery代码$("td:parent")结果
[<td>Value 1</td>,<td>Value 2 </td>]
:hidden
//概述
//匹配所有不课件元素,或者type为hidden的元素描述
查找隐藏的trHTML代码
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery代码$("tr:hidden")结果
[<tr style="display:none"><td>Value 1</td></tr>]
:visible
//概述
//匹配所有可见的元素描述
查找所有可见的tr元素HTML代码
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery代码$("tr:visible")结果
[<tr><td>Value 2</td></tr>]
属性
attribute
//概述
//匹配包含给定属性的元素·注意,在jQuery1.3中,前导的@符号已经被废除！如果想要兼容版本,只需要简单的去掉@符号即可·attribute
属性名描述
查找所有含有id属性的div元素HTML代码
<div>
<p>Hello</P>
</div>
<div id="test2"></div>jQuery代码
$("div[id]")结果
[<div id="test2"></div>]
[attribute=value]
//概述//匹配给定的属性是某个特定值得元素attribute属性名value属性值,引导在大多数情况下是可选的·单在遇到诸如属性质包含"]"时,用以避免冲突·描述
查找所有name属性是newsletter的inout元素HTML代码
<input type="checkbox" name="newsletter" value="Hot Fuzz"/>
<input type="checkbox" name="newsletter" value="Cold Fusion"/>
<input type="checkbox" name="accept" value="Evil Plans"/>jQuery代码
$("input[name="newsletter"]").attr("checked",true);结果
[<input type="checkbox" name="newsletter" value="Hot Fuzz" checkbox="true"/>,<input type="checkbox" name="nwesletter" value="Cold Fusion" check="true"/>]
[attribute!=value]
//概述
//匹配所有不含有指定的属性,或者属性不等于特定的值·
//次选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])attribute
属性名value
属性值·引导在大多数情况下是可选的·但在遇到诸如属性值包含"]"时,用以避免冲突·描述
查找所有name属性不是newsletter的input元素HTML代码
<input type="checkbox" name="newsletter" value="Hot Fuzz"/>
<input type="checkbox" name="newsletter" value="Cold Fusion"/>
<input type="checkbox" name="accept" value="Evil Plans"/>jQuery代码
$("input[name!="newsletter"]").attr("checkd",true);结果
[<input type="checkbox" name="accept" value="Evil Plans" checked="true"/>]
[attribute^=value]
//概述
//匹配给定的属性是以某些值开始的元素attribute
属性名value
属性值·引导在大多数情况下是可选的·但在遇到诸如属性值包含"]"时,用以避免冲突·描述
查找所有name以"news"开始的input元素HTML代码
<input name="newsletter"/>
<input name="milkman"/>
<input name="newsboy"/>jQuery代码
$("input[name^="news"]")结果
[<input name="newsletter"/>,<input name="newsboy"/>]
[attribute$=value]
//概述
//匹配给定的属性是以某些值结尾的元素attribute
属性名value
属性值·引导在大多数情况下是可选的·但在遇到诸入属性值包含"]"时,用以避免冲突·描述
查找所有name以"letter"结尾的input元素HTML代码
<input name="newsletter"/>
<input name="milkman"/>
<input name="jobletter"/>jQuery代码
$("input[name$="letter"]")结果
[<input name="newsletter"/>,<input name="jobletter"/>]
[attributee*=value]
//概述
//匹配给定的属性是 包含某些值得元素 attribute
属性名value
属性值·引导在大多数情况下是可选的·但在遇到诸入属性值包含"]"时,用以避免冲突·描述
查找所有name包含"man"的input元素HTML代码
<input name="man-news"/>
<input name="milkman"/>
<input name="letterman2"/>
<input name="newmilk"/>jQuery代码
$("input[name*="man"]")结果
[<inout name="man-news"/>,<input name="milkman"/>,<inout name="letterman2">]
[selector1][selector2][selectorN]
//概述
复合属性选择器,需要同时满足多个条件时使用·selector1
属性选择器selector2
另一个属性选择器,用以进一步缩小范围selectorN
任意多个属性选择器描述
找到所有含有id属性,并且它的name属性是以man结尾的HTML代码
<input id="man-news" name="man-news"/>
<input name="milkman"/>
<input id="letterman" name="new-letterman"/>
<input name="newmilk"/>jQuery代码
$("input[id][name$="man"]")结果
[<input id="letterman" name="new-letterman"/>]
子元素
:first-child
//概述
匹配第一个子元素
类似的(:first)匹配第一个元素,而次选择符将为 每个父元素匹配一个子元素·描述
在每一个ul中查找第一个liHTML代码
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>jQuery代码
$("ul li:first-child")结果
[<li>John</li>,<li>Glen</li>]
:last-child
//概述
//匹配最后一个子元素
:last只匹配最后一个元素,而次选择符将为每一个父元素匹配到最后一个子元素·//描述
//在每个ul中查找最后一个liHTML代码
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
<ul>
<li>44444</li>
<li>55555</li>
<li>66666</li>
</ul>jQuery代码
$("ul li:last-child")结果
[<li>33333</li>,<li>66666</li>]
:nth-child
//概述
//匹配其父元素下的第N个子或奇偶元素
:eq（index）匹配选择器指定序列的元素,而这个将为每一个元素匹配子元素·
:nth-child从1开始的,而:eq()是从0开始的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)index
要匹配元素的序号,从1开始描述
在每个ul查找第2个liHTML代码
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
<ul>
<li>44444</li>
<li>55555</li>
<li>66666</li>
</ul>jQuery代码
$("ul li:nth-child(2)")结果
[<li>22222</li>,<li>55555</li>]
:only-child
//概述
//如果某个是父元素中唯一的子元素,那将会被匹配·
//如果父元素中含有其他元素,那将 不会被匹配·(注:这里的其它元素并不包含文本节点,如:<p><img/>网页</p>,用$('p img:only-child')是可以匹配)描述
在ul中查找唯一子元素的liHTML代码
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
<ul>
<li>44444</li>
</ul>jQuery代码
$("ul li:only-child")结果
[<li>44444</li>]
表单
input
//概述
//匹配所有的input,textarea,select和button元素描述
查找所有的input元素,下面这些元素都会被匹配HTML代码
<form>
<input type="button" value="Input Button"/>
<input typee="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>Buttob</button>
</form>jQuery代码
$(":input")结果
[
<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>,
]
:text
//概述
//匹配所有单行文本框描述
查找所有文本框HTML代码
<form>
<input type="text"/>
<input type="checkbox">
<input type="radio"/>
<input type="image"/>
<input type="file"/>
<input type="submit"/>
<input type="reset"/>
<input type="password"/>
<input type="button"/>
<select></select>
<textarea></textarea>
<button></button>
</form>jQuery代码
$(":text")结果
[<input type="text"/>]
:password
//概述
//匹配所有的密码框描述
查找所有密码框HTML代码
<form>
<input type="text"/>
<input type="checkbox"/>
<input type="radio"/>
<input type="image"/>
<input type="file"/>
<input type="submit"/>
<input type="reset"/>
<input type="password">
<inpur type="button"/>
<select></select>
<textarea></textarea>
<button></button>
</form>jQuery代码
$(":password")结果
[<input type="password"/>]
:radio
//概述
//匹配所有单选按钮描述
查找所有单选按钮HTML代码
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>jQuery代码
$(":radio")结果
[<input type=radion"/>]
:checkbox
//概述
//匹配所有复选框描述
查找所有复选框HTML代码
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>jQuery代码
$(":checkbox")结果
[<input type="checkbox"/>]
:submit
//概述
//匹配所有提交按钮描述
查找所有提交按钮HTML代码
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>jQeury代码
$(":submit"/)结果
[<input type="submit"/>]
:image
//概述
//匹配所有图像域描述
匹配所有图像域HTML代码
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>jQuery代码
$(":image")结果
[<input type="image"/>]
:reset
//概述
//匹配所有的重置按钮描述
查找所有的重置按钮HTML代码
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>jQuery代码
$(":reset")结果
[<input type="seret"/>]
:button
//概述
//匹配所有按钮描述
查找所有按钮HTML代码
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>jQuery代码
$(":button")结果
[<input type="button">,<button></button>]
:file
//概述
//匹配所有文件域描述
查找所有文件域HTML代码
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>jQuery代码
$(":file")
[<input type=":file"/>]
表单对象属性
:enabld
//概述
//匹配所有可用元素描述
查找所有可用的input元素HTML代码
<form>
<input name="email" disabled="disabled"/>
<input name="id"/>
</form>jQuery代码$("input:emabled")结果
[<input name="id"/>]
:disabled
//概述
//匹配所有不可用元素描述
查找所有不可用的input元素HTML代码
<form>
<input name="email" disabled="disabled"/>
<input name="id"/>
</form>jQuery代码
$("input;disabled')结果
[<input name="email" disabled="disabled"/>]
:checked
//概述
//匹配所有选中的被选中元素（复选框,单选框等,select中的option）,对于select元素来说,获取选中推荐使用:selected描述
查找说有选中的复选框元素HTML代码
<form>
<input type="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代码
$("input:checked")结果
[<input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />]
:selected
//概述
//匹配所有选中的option元素描述
查找所有选种的选项元素HTML代码
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>jQuery代码
$("select option:selected")结果
[<option value="2" selected="selected">Gaedens</option>]
属性
attr(name|porperties|key,value|fn)
//概述
//设置或返回被选元素的属性值·name
属性名称properties
作为属性的"名/值对"对象key，value
属性名称,属性值key,function(index,attr)
1·属性名称
2·返回属性值得函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值·name描述：
返回文本中所有图像的src属性值·jQuery代码
$("img").attr("src")properties描述：
为所有图像设置src和alt属性·jQuery代码
$("img").attr({src:"test.jpg",alt:"Test Image"});key,value描述:
为所有图像设置 src属性·jQuery代码
$("img").attr("src","test.jpg");参数key,回调函数描述：
把src属性的值设置为title属性的值·jQuery代码
$("img").attr("title",function(){return this.src});
removeAttr
//概述
//从没一个匹配的元素中删除一个属性
1.6以下版本在IE6使用jQuery的removeAttr方法删除disabled是无效的·
1.7版本在IE6下已支持删除disabled·name
要删除的属性名描述
将文本中图像的src属性删除HTML代码
<img src="test.jpg"/>jQuery代码：
$("img").removeAttr("src")结果
[<img/>]
prop
//概述
//获取在匹配的元素集合中的第一个元素的属性值
//随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误,jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误·name
属性名称properties
作为属性的"名、值对"对象key,value
1·属性名称
2·返回属性值的函数·第一个参数为当前元素的索引值·第二个参数为原先的属性值·参数name描述
选中复选框为,true没选中为falsejQuery代码
$("input[type="checkbox"]").porp("checkbox");参数properties描述
禁用页面上的所有复选框jQuery代码
$("input[type="checkbox"]").prop({
disabled: true
})参数key,value描述
禁用和选项中所有页面上的复选框·jQuery代码
$("input[type="checkbox"]").prop("disabled",false)
$("input[type="checkbox"]").prop("disacled",true)参数key,回调函数描述:
通过函数来设置所有页面上的复选框被选中·jQuery代码
$("input[type="checkbox"]").prop("checked",function(i,val){
return !val
})
removeProp(name)
//概述
//用来删除由.prop()方法设置的属性集
//随着一写内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误.jQuery第一次分配undefined值得属性,而忽略了浏览器生成的任何错误·propertyName
要删除的属性名描述
设置一个段落数字属性,然后将其删除·HTML代码
<p></p>jQuery代码
var $para=$("p"):
$para.prop("luggageCode",1234):
$para.append("The secret luggage code is:",String($parp.prop(luggageCode)),".");
$para.removeProp("luggageCode");
$para.append("Now the secret luggge code is:",String($para.prop("luggageCode")),".")结果
The secret luggage code is: 1234. Now ths secret luggage code is: undefind.
addClass(class|fn)
//概述
//为每个匹配的元素添加指定的类名·class
一个或多个要添加到元素中的CSS类名，请用空格分开·function(index,class)
此函数返回一个或多个空格的class名.接受两个参数,index参数为对象在这个集合中索引值,class参数为这个对象原先的class属性值·参数class描述
为匹配的元素加上"selected"类jQuery代码
$("p").addClass("selected");
$("p").addClass("selected1 selected2");回调函数 描述:
给li加上不同的classHTML代码
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>jQuery代码
//概述//从所有匹配的元素中删除全部或者指定的类·class一个或多个要删除的CSS类名,请用空格分开
function(index,class)
此函数必须返回一个或多个空格分隔的class名,接受两个参数,index参数为对象在这个集合的索引值,class参数为这个对象原先的class属性值.参数class描述
删除匹配元素的所有类jQuery代码
$("p").removeClass();回调函数描述:
删除最后一个元素上与前面重复的classjQuery代码
$("li:last").removeClass(function(){
return $(this).prev().attr("class");
})
$("ul li:last").addClass(function(){ return "item-" +$(this).index(): }):
removeClass([class|fn])
//概述
//从所有匹配的元素中删除全部或者指定的类·class
一个或多个要删除的CSS类名,请用空格分开·function(index,class)
次函数必须返回一个或多个空格分隔的class名.接受两个参数,index参数为对在这个集合中的索引值,class参数为这个对象原先的class属性值·参数class描述
从匹配的元素中删除"selected"类jQuery代码
$("p").removeClass("selected");参数class描述
删除匹配元素的所有类jQuery代码$("p").removeClass();回调函数的描述
删除最后一个元素上与前面重复的classjQuery代码$("li:last").removeClass(function(){
return $(this).prev().qttr("class");
})
toggleClass(class|fn[,sw])
//概述
//如果存在(不存在)就删除(添加)一个类·class
CSS类名class,switch
1·要切换的CSS类名
2·用于决定元素是否包含class的布尔值switch
用于决定元素是否包含class的布尔值·function(index，class，wsitch)[,switch]
1·用来返回在匹配的元素集合中的每一个元素上用来切换的样式类名的一个函数·接收元素的索引位置和元素旧的样式类作为参数·
2·一个用来判断样式类添加还是移除的boolean值·参数class描述
每点击三峡加上一个"highlight"类HTML代码
<strong>jQuery代码</strong>jQuery代码
var count=0:
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
})l;回调函数描述
根据父元素来设置class属性jQuery代码
$("div.foo").toggleClass(function(){
if ($(tis).parent().is(".bar"){
return "happy";
}else{
return "sad";
}
});
HTML代码/文本值
html([val|fn])
//概述
//取得第一个匹配元素的html内容·和个函数 不能用XML文档·但可以用于XHTML文档·
//在一个HTML文档中,我们可以使用.html()方法来获取任意一个元素的内容·如果选择匹配多余一个的元素,那么只有第一个匹配元素的HTML内容会被获取·val
用于设定HTML内容的值function(index,html)
此函数返回一个HTML字符串·接受两个参数,index为元素在集合 中的索引位置,html为原先的HTML值·无参数的描述
返回p元素的内容
jQuery代码
$("p").html();参数val描述
设置所有p元素的内容jQuery代码
$("p").html("Hello<b>world</b>!");回调函数描述
使用函数来设置所有匹配元素的内容
jQuery代码
$("p").html(function(n){
return "这个p元素的 index是:" +n;
})
text([val|fn])
//概述
//取得所有匹配元素的内容
//结果是由所有匹配元素包含的文本内容组合起来的文本·这个方法对HTML文档对有效·val
用于设置元素内容的文本 function(index,text)
此函数返回一个字符串·接受两个参数,index为元素在集合中的索引位置,text为原先的text值·无参数描述
设置所有p元素的文本内容jQuery代码
$("p").text("Hello world");回调函数描述
使用函数来设置所有匹配元素的文本内容jQuery代码
$("p").text(function(n){
return "这个p元素的index是："+n;
})
val([val|fn|arr])
//概述
//获得匹配元素的当前值
//jQuery 1.2中,可以 返回任意的值了.包括select.如果多选,将返回一个数组,其包含所选的值·val
要设置的值function(index,value)
此函数返回一个要设置的值.接受两个参数,index为元素在集合中的索引位置,text为原先的text值·attay
用于 check/select的值无参数描述
获取文本框的值jQuery代码
$("input").val();参数val描述:
设定文本框的值jQuery代码
$("input").val("hello world");回调函数描述
设定文本框的值jQuery代码
$(input : text.items").val(funcction(){
return this.value + " " + this.className;
});参数array描述
设定一个select和一 个多选的slect的值HTML代码
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2jQuery代码
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
筛选
过滤
eq
//概述
//获取当前链式操作中第N个jQuery对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个，1代表第二个,当参数为负数时为反向选取·比如-1为倒数第一个,具体可以看一下实列
类似的有get(index),不过get(index)返回的是DOM对象·index
//一个整数,指示元素基于0的位置,这个元素的位置是从0算起·-index
//一个整数,指示元素的位置,从集合中的最后一个元素开始倒数·(-1算起)实列
参数index描述
//获取匹配的第二个元素HTML代码
<p> This is just a test.</p><p> So is this</p>Jquery代码
$("p").eq(1)结果
[<p>This is just a test.</>]
first
//概述
//获取第一个元素实列
//描述
//获取匹配的第一个元素HTML代码
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>jQuery代码
$('li').first()结果
[<li>list item1</li>]
last
//概述
//获取最后一个元素实列
//描述
//
获取匹配的最后一个元素HTML代码
<ul>
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
</ul>jQuery代码$("li").last()结果
[<li>list item3</li>]
has
//概述
//检查当前的元素是否含有某个特定的类,如果有,则返回true·
/这就是is("."+class).class
用于匹配的类名实列
//描述
//给包含有某个类的元素进行一个动画.HTML代码
<div class="protected"></div><div></div>jQuery代码
$("div").click(functipn(){
if($(this).hasClass("protected"))
$(this)
.animate({left:-10})
.animate({left: 10})
.animate({left: -10})
.animate({left: 10})
.animate({left: 0})
})
filter(expr|obj|ele|fn)
//概述
//筛选出与指定表达式匹配的元素集合·
//和个方法用于缩小匹配的范围·用逗号分隔多个表达式·expr
//字符串值·包含供匹配当前元素集合的选择器表达式·jQuery objext
//现有的jQuery对象·以匹配当前的元素·element
//一个用于匹配元素的DOM元素function(index)
//一个函数用来作为测试缘故的集合·它结束一个参数index·这是缘故在jQuery集合的索引·在函数,this指的是 当前的DOM元素·实列
//参数selector描述
保留带有select类的元素HTML代码
<p>Hello</p>
<p>Hello Wyc</p>
<p class="selected">Nihao</d>jQuery代码
$("p").filter(".selected")结果
[<p class="selelcted">Nihao</p>]
