jQuery的基本操作

Wyc

发布于 2018-09-11 11:27:58

7.5K0

发布于 2018-09-11 11:27:58

文章被收录于专栏：Python研发

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的元素



描述
查找隐藏的tr

HTML代码
<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中查找第一个li


HTML代码
<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中查找最后一个li


HTML代码
<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个li



HTML代码
<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中查找唯一子元素的li

HTML代码
<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没选中为false

jQuery代码
$("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加上不同的class


HTML代码
<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();

回调函数描述:
删除最后一个元素上与前面重复的class

jQuery代码
$("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();


回调函数的描述
删除最后一个元素上与前面重复的class

jQuery代码

$("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"/> radio2


jQuery代码
$("#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>]

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016-07-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

jQuery的基本操作

jQuery的基本操作

jQuery就是一个js的库·

选择器

#id

element

.class

(*)匹配所有元素

selector1,selector2,selectorN

层级

parent > child

prev + next

prev ~siblings

基本筛选器

:not(selector)

:even

:odd

:eq(index)

:gt(index)

:last()

:lt(index)

:header

内容

:constains(text)

:empty

:has(selector)

:parent

:hidden

:visible

属性

attribute

[attribute=value]

[attribute!=value]

[attribute^=value]

[attribute$=value]

[attributee*=value]

[selector1][selector2][selectorN]

子元素

:first-child

:last-child

:nth-child

:only-child

表单

input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

表单对象属性

:enabld

:disabled

:checked

:selected

属性

attr(name|porperties|key,value|fn)

removeAttr

prop

removeProp(name)

addClass(class|fn)

removeClass([class|fn])

toggleClass(class|fn[,sw])

HTML代码/文本值

html([val|fn])

text([val|fn])

val([val|fn|arr])

筛选

eq

first

last

has

filter(expr|obj|ele|fn)

社区

活动

资源

关于

　element　

.class　　

　(*)匹配所有元素　

　selector1,selector2,selectorN　

　层级　

　parent > child　

　prev + next　

　　prev ~siblings

　　基本筛选器

　　:not(selector)

　:even　

　　:odd

　　:eq(index)

　　:gt(index)

　　:last()

　　:lt(index)

　　:header

　内容

　:empty

　　:has(selector)

　　:parent

　　:hidden

　　:visible

　属性　

　[attribute=value]　

　　[attribute!=value]

　[attribute^=value]　

　　[attribute$=value]

　　[attributee*=value]

　　[selector1][selector2][selectorN]

　　子元素

　　:last-child

　　:nth-child

　:only-child　

　　表单

　　:text

　　:password

　　:radio

　　:checkbox

　　:submit

　　:image

　　:reset

　　:button

　　:file

　　表单对象属性

　　:disabled

　　:checked

　　:selected

　　removeAttr

　　prop

　　removeProp(name)

　　addClass(class|fn)

　　removeClass([class|fn])

　　toggleClass(class|fn[,sw])

　　HTML代码/文本值

　　text([val|fn])

　　val([val|fn|arr])

　　筛选

　　first

　　last

　　has

　　filter(expr|obj|ele|fn)