Html基础详解之（jquery）

it2022-05-21 77

jquery选择器：

#id 根据给定的ID匹配一个元素，如果选择器中包含特殊字符，可以用两个斜杠转义。（注：查找 ID 为"myDiv"的元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="notMe"> <p>id="notMe"</p> <p>id="notMe"</p> <p>id="notMe"</p> <span id="foo:bar"></span> <span id="foo[bar]"></span> <span id="foo.bar"></span> </div> <div id="myDiv">id="myDiv"</div> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("#foo\\:bar").html("cccc") $("#foo\\[bar\\]") $("#foo\\.bar") $("#notMe").html("aaaaa"); $("#myDiv").hide(); </script> </body> </html> dome

element 一个用于搜索的元素。指向DOM节点的标签名。（注：查找一个DIV元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("div").hide("show"); </script> </body> </html> dome

class 一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。（注：查找所有类是 "myClass" 的元素.）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="notMe"> <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> </div> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $(".myClass").hide(); </script> </body> </html> dome

*匹配所有元素，多用于结合上下文来搜索。（注：找到每一个元素）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>DIV</div> <span>SPAN</span> <p>P</p> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("*").hide("show"); </script> </body> </html> dome

selector1一个有效的选择器，selector2另一个有效的选择器，selectorN任意多个有效的选择器。（注：找到匹配任意一个类的元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>div</div> <p class="myClass">p class="myClass"</p> <span>span</span> <p class="notMyClass">p class="notMyClass"</p> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("div,span,p.myClass").hide("show"); </script> </body> </html> dome

ancestor descendant ancestor任何有效选择器，descended用以匹配元素的选择器，并且它是第一个选择器的后代元素。（注：找到表单中的所有input元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("form input").hide("show"); </script> </body> </html> demo

:first 获取第一个元素。（注：获取匹配的第一个元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("li:first").hide(); </script> </body> </html> demo

:last 获取最后一个元素。（注：获取匹配的最后一个元素。）

:odd匹配所有索引值为奇数的元素，从0开始计数。（注：查找表格的2、4、6行（即索引值1、3、5...））

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table> <tr><td>Header 1</td></tr> <tr><td>Value 2</td></tr> <tr><td>Value 3</td></tr> <tr><td>Value 4</td></tr> <tr><td>Value 5</td></tr> <tr><td>Value 6</td></tr> <tr><td>Value 7</td></tr> <tr><td>Value 8</td></tr> <tr><td>Value 9</td></tr> </table> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("tr:odd").hide("show"); </script> </body> </html> demo

:eq(index) 匹配一个给定索引值的元素。（注：从0开始计数。）

:gt(index) 匹配所有大于给定索引值的元素。（注：从0开始计数。）

:lt(index) 匹配所有小于给定索引值的元素。（注：从0开始计数。）

:header 匹配如h1、h2、h3之类的标题元素。（注：给页面内所有标题加上背景色。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>Header 1</h1> <p>Contents 1</p> <h2>Header 2</h2> <p>Contents 2</p> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $(":header").css("background", "#ff0000"); </script> </body> </html> demo

:animated 匹配所有正在执行动画效果的元素。（注：只有对不在执行动画效果的元素执行一个动画特效。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="run">Run</button><div>dddd</div> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000); }); </script> </body> </html> demo

:contains(text) 匹配包含给定文本的元素。（注：一个用以查找的字符串。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn</div> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("div:contains('John')").hide("show"); </script> </body> </html> demo

:empty 匹配所有不包含子元素或者文本的空元素。（注：查找所有不包含子元素或者文本的空元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("td:empty").css({ color: "#ff0011", background: "blue" }); </script> </body> </html> demo

:has(selector) 匹配含有选择器所匹配的元素的元素。（注：给所有包含p元素的div元素添加一个text类。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div><p>Hello</p></div> <div>Hello again!</div> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("div:has(p)").addClass("test"); </script> </body> </html> demo

:parent 匹配含有子元素或者文本的元素。（注：查找所有含有子元素或者文本的td元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("td:parent").css({ color: "#ff0011", background: "blue" }); </script> </body> </html> demo

[attribute] 匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。（注：查找所有含有id属性的div元素）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p>Hello!</p> </div> <div id="test2">Word</div> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("div[id]").css({ color: "#ff0011", background: "blue" }); </script> </body> </html> demo

[attribute=value] 匹配给定的属性是某个特定值的元素。（注：查找所有name属性是newsletter的input元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("input[name='newsletter']").attr("checked", true); </script> </body> </html> demo

[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。（注：查找所有name属性不是newsletter的input元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("input[name!='newsletter']").attr("checked", true); </script> </body> </html> demo

[attribute^=value] 匹配给定的属性是以某些值开始的元素。（注：查找所有name以‘news’开始的input元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("input[name^='news']").css({ color: "#888888", background: "red" }); </script> </body> </html> demo

[attribute$=value] 匹配给定的属性是以某些值结尾的元素。（注：查找所有name以‘letter’结尾的input元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("input[name$='letter']").css({ color: "#888888", background: "red" }); </script> </body> </html> demo

[attribute*=value] 匹配给定的属性是以包含某些值的元素。（注：查找所有name包含‘man’的input元素。）

: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)（注：在每个ul查找第2个li）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("ul li:nth-child(2)").css({ color: "#888888", background: "blue" }); </script> </body> </html> demo

:first-child 匹配第一个子元素，‘:first’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。（注：在每个ul中查找第一个li）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("ul li:first-child").css({ color: "#888888", background: "blue" }); </script> </body> </html> demo

:last-child 匹配第一个子元素，‘:last’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。（注：在每个ul中查找最后一个li）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("ul li:last-child").css({ color: "#888888", background: "blue" }); </script> </body> </html> demo

:only-child 匹配第一个子元素，‘:only’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。（注：在每个ul中查找唯一子元素的li）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> </ul> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("ul li:only-child").css({ color: "#888888", background: "blue" }); </script> </body> </html> demo

:input 匹配所有input，textarea，select和button元素。（注：查找所有的inout元素，下面这些元素都会被匹配到。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $(":input").css({ color: "#888888", background: "blue" }); </script> </body> </html> demo

:text 匹配所有的单行文本框。（注：查找所有文本框）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $(":text").css({ color: "#888888", background: "blue" }); </script> </body> </html> demo

:password 匹配所有密码框。（注：查找所有密码框）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(":password").hide(); </script> </body> </html> demo

:radio 匹配所有单选按钮。（注：查找所有单选按钮）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(":radio").hide(); </script> </body> </html> demo

:checkbox 匹配所有复选框（注：查找所有复选框）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(":checkbox").hide(); </script> </body> </html> demo

:submit、:image、:reset、:button、:file、:hidden

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(":submit").hide(); $(":image").hide(); $(":reset").hide(); $(":button").hide(); $(":file").hide(); </script> </body> </html> demo

:hidden 匹配所有不可见元素，或者type为hidden的元素。（查找隐藏的tr）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> <form> <input type="text" name="email" /> <input type="hidden" name="id" /> </form> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("tr:hidden"); $("input:hidden"); </script> </body> </html> demo

:enabled 匹配所有可用元素。（注：查找所有可用的inpout元素）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("input:enabled").css({ color: "#888888", background: "blue" }); </script> </body> </html> demo

:disabled 匹配所有不可用元素。（注：查找所有不可用的inpout元素）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("input:disabled").css({ color: "#888888", background: "blue" }); </script> </body> </html> demo

append(content|fn) 向每个匹配的元素内部追加内容。（注：向所有段落中追加一些HTML标记。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>I would like to say: </p> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("p").append("<b>Hello</b>"); </script> </body> </html> demo

appendTo（content）把所有匹配的元素追加到另一个指定的元素集合中。（注：把所有段落追加到ID值为foo的元素中）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>I would like to say: </p> <p>I would like to say: </p> <div></div><div></div> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("p").appendTo("div"); </script> </body> </html> demo

prepend（content）向每个匹配的元素内部前置内容。（注：想所有段落中前置一些HTML标记代码。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>I would like to say: </p> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("p").prepend("<b>Hello</b>"); </script> </body> </html> demo

prependTo（content）把所有匹配的元素前置到另一个、指定的元素集合中。（注：把所有段落追加到ID值为foo的元素中。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>I would like to say: </p><div id="foo"></div> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("p").prependTo("#foo"); </script> </body> </html> demo

after（content|fn）在每个匹配的元素之后插入内容。（注：在所有段落之后插入一些HTML标记代码。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <b>Hello</b><p>I would like to say: </p> <b id="foo">Hello</b><p>I would like to say: </p> <p>I would like to say: </p> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("p").after( $("b") );   </script> </body> </html> demo

before(content|fn) 在每个匹配的元素之前插入内容。（注：插入到每个目标的内容）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>I would like to say: </p> <p>I would like to say: </p><b id="foo">Hello</b> <p>I would like to say: </p><b>Hello</b> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> 在所有段落之前插入一些HTML标记代码。 在所有段落之前插入一个元素。 $("p").before( $("b") );在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。 </script> </body> </html> demo

insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素集合的后面。（注：把所有段落插入到一个元素之后。与$("#foo").after("p")相同）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>I would like to say: </p><div id="foo">Hello</div> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script> <script type="text/javascript"> $("p").insertAfter("#foo"); </body> </html> demo

insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素集合的前面。（注：把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。）

wrap(html|ele|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来。（注：把所有的锻炼用一个创建的div包裹起来）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> aaaaaaaaaaaaaaaa </p> <p> bbbbbbbbbbbbbbbbbb </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").wrap("<div class='wrap'></div>"); </script> </body> </html> demo

1-1用ID是“content”的div将每一个段落包裹起来。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="content"> </div> <p> aaaaaaaaaaaaaaaa </p> <p> bbbbbbbbbbbbbbbbbb </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").wrap(document.getElementById('content')); </script> </body> </html> demo

1-2用原先div的内容作为新的div的class，并将每一个元素包裹起来。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $('.inner').wrap(function(){ return '<div class="' + $(this).text() +'"/>'; }) </script> </body> </html> demo

unwrap() 这个方法是将移出元素的父元素。可以快速取消.wrap()方法的效果。匹配的元素(以及他们的同辈元素会在DOM结构上替换他们的父元素。) （注：用ID是"content"的div将每一个段落包裹起来）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p>Hello</p> <p>Word</p> <p>cruel</p> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").unwrap() </script> </body> </html> demo

wrapAll(html|ele）将所有匹配的元素用单个元素包裹起来。（注：用一个生成的dic将所有段落包裹起来。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Hello</p> <p>Word</p> <p>cruel</p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").wrapAll("<div></div>"); </script> </body> </html> demo

wrapInner（html|ele|fnl）将每一个匹配的元素的子内容（包括文本节点）用一个HTML结果包裹起来。（注：把所有段落内的每个子内容加粗）

参数html描述：

参数elem描述:(注：把所有段落内的每个子内容加粗)

回调函数描述：（注：用原先div的内容作为新的div的class，并将每一个元素包裹起来）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="container"> <div class="inner">Hello</div> <div class="inner">Word</div> <div class="inner">cruel</div> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $('.inner').wrapInner(function(){ return '<div class="' + $(this).text() +'"/>'; }) </script> </body> </html> demo

replacewith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。（注：把所有的段落标记替换成加粗的标记。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Hello</p> <p>Word</p> <p>cruel</p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").replaceWith("<b>Paragraph</b>"); </script> </body> </html> demo

注：用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是赋值一份来替换。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="container"> <div class="inner first">Hello</div> <div class="inner second">Word</div> <div class="inner third">cruel</div> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $('.third').replaceWith($('.first')); </script> </body> </html> demo

replaceAll（selector）用匹配的元素替换掉所有selector匹配到的元素。（注：把所有的段落标记替换成加粗标记）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Hello</p> <p>Word</p> <p>cruel</p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("<b>Paragraph</b>").replaceAll("p"); </script> </body> </html> demo

empty（）删除匹配的元素集合中所有的子节点。（注：把所有段落的子元素（包括文件节点）删除）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Hello <span>Persion</span> <a href="#">and persion</a> </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $('p').empty(); </script> </body> </html> demo

remove([expr])和detach([expr])一样，从DOM中删除所有匹配的元素（注：从DOM中把所有段落删除）

删除其中一段带有hello类的段落。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p class="hello">Hello</p> Python is very good <p>Word</p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").remove(".hello"); </script> </body> </html> demo

clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本，（注：克隆所有b元素（并选中这些克隆的副本），然后将他们前置到所有段落中。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p class="hello">Hello</p> Python is very good <p>Word</p> <b>how are you?</b> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("b").clone().prependTo("p"); </script> </body> </html> demo

创建一个按钮，他可以复制自己，并且他的副本也同样有功能。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>mmmm</button> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("button").click(function(){ $(this).clone(true).insertAfter(this); }); </script> </body> </html> demo

hasClass（class）检查当前的元素是否含有某个特定的类，如果有，则返回true。（注：给包含某个类的元素进行一个动画）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="protected"></div><div></div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("div").click(function(){ if ( $(this).hasClass("protected") ) $(this) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: 0 }); }); </script> </body> </html> demo

filter(expr|obj|ele|fn) 筛选出与指定表达式匹配的元素集合。（注：保留带有select类的元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> Hello </p> <p> Hello Again </p> <p class="selected"> And Again </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").filter(".selected").hide(); </script> </body> </html> demo

注：保留第一个以及带有select类的元素

注：保留子元素中不含有o的元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <ol> <li> Hello </li> </ol> </p> <p> How are you? </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").filter(function(index) { return $("ol", this).length == 0; }); </script> </body> </html> demo

is(expr|obj|ele|fn) 根据选择器、DOM元素或jQuery对象来检查匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。（注：由于input元素的父元素是一个表单元素，所以返回true。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <from> <input type="checkbox" /> </from> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("input[type='checkbox']").parent().is("form") </script> </body> </html> demo

回调函数描述：判断点击li标签增加背景色为红色，如果点击的是第2个strong，当前的li增加背景色为绿色。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li> <li>list item 3</li> </ul> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("li").click(function() { var $li = $(this), isWithTwo = $li.is(function() { return $('strong', this).length === 2; }); if ( isWithTwo ) { $li.css("background-color", "green"); } else { $li.css("background-color", "red"); } }); </script> </body> </html> demo

map(callback) 将一组元素转换成其他数组（不论是否是元素数组），（注：把from中每个input元素的值建立一个列表）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); </script> </body> </html> demo

has(expr|ele) 保留包含特定后代的元素，去掉那些不含有指定后代的元素。（注：给含有ul的li加上背景颜色）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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> <li>list item 3</li> <li>list item 4</li> </ul> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $('li').has('ul').css('background-color', 'red'); </script> </body> </html> demo

not(expr|ele|fn) 删除与指定表达式匹配的元素，(注：从p元素中删除带有select的ID的元素)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> Hello </p> <p id="selected"> Hello Again </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").not( $("#selected")[0] ).hide(); </script> </body> </html> demo

slice(start,[end]) 选取一个匹配的子集与原来的slice方法类似，（注：选择第一个p元素）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> Hello </p> <p> cruel </p> <p> World </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").slice(0, 1).wrapInner("<b></b>"); </script> </body> </html> demo

选择前两个p元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> Hello </p> <p> cruel </p> <p> World </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").slice(0, 2).wrapInner("<b></b>"); </script> </body> </html> demo

只选取第二个p元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> Hello </p> <p> cruel </p> <p> World </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").slice(1, 2).wrapInner("<b></b>"); </script> </body> </html> demo

只选取第二第三个p元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> Hello </p> <p> cruel </p> <p> World </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").slice(1).wrapInner("<b></b>"); </script> </body> </html> demo

选取第最后一个p元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> Hello </p> <p> cruel </p> <p> World </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").slice(-1).wrapInner("<b></b>"); </script> </body> </html> demo

children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。（注：查找div中的每个子元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> Hello </p> <div> <span>Hello Again</span> </div> <p>And Again</p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("div").children().hide(); </script> </body> </html> demo

在每个div中查找，selected的类。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <span>Hello</span> <p class="selected">Hello Again</p> <p>And Again</p> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("div").children(".selected").hide(); </script> </body> </html> demo

closest(expr,[con]|obj|ele) closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，知道找到匹配选择器的元素。如果什么都没有找到则返回一个空的jQuery对象。（注：展示如何使用clostest查找多个元素）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li></li> <li></li> </ul> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("li:first").closest(["ul", "body"]); </script> </body> </html> demo

find(expr|obj|ele) 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。（注：从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <span>Hello</span>, how are you? </p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").find("span").hide(); </script> </body> </html> demo

next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。（注：找到每个段落的后面紧邻的同辈元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Hello</p> <p>Hello Again</p> <div> <span>And Again</span> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").next().hide(); </script> </body> </html> demo

注：找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Hello</p> <p class="selected">Hello Again</p> <div> <span>And Again</span> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").next(".selected").hide(); </script> </body> </html> demo

nextAll([expr]) 查找当前元素之后所有的同辈元素。（注：给第一个div之后的所有元素加个类。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div></div> <div></div> <div></div> <div></div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("div:first").nextAll().addClass("after"); </script> </body> </html> demo

nextUntil([exp|ele][,fil]) 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。（注：给#term-2后面知道dt前的元素加上红色背景。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <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>definition 2-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> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $('#term-2').nextUntil('dt').css('background-color', 'red'); var term3 = document.getElementById("term-3"); $("#term-1").nextUntil(term3, "dd").css("color", "green"); </script> </body> </html> demo

offsetParent() 返回第一个匹配元素用于定位的父节点。（注：设置最近的祖先定位元素的背景颜色）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="width:70%;position:absolute;left:100px;top:100px"> <div style="margin:50px;background-color:yellow"> <p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p> <div> </div> <button>点击这里</button> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("button").click(function(){ $("p").offsetParent().css("background-color","red"); }); </script> </body> </html> demo

Parent（[expr]）取得一个包含着所有匹配元素的唯一父元素的元素集合。（注：查找每个段落的父元素）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p>Hello</p> <p>Hello</p> </div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").parent(); </body> </html> demo

Parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。（注：找到每个span元素的所有祖先元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <html> <body> <div> <p> <span>Hello</span> </p> <span>Hello Again</span> </div> </body> </html> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("span").parents(); </body> </html> demo

找到每个span的所有是p元素的祖先元素。

ParentsUntil（[exp|ele][,fil]）查找当前元素的所有父辈元素，直到遇到匹配的那个元素为止。（注：查找item-a的祖先，但不包括level-1）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $('li.item-a').parentsUntil('.level-1') .css('background-color', 'red'); </body> </html> demo

c([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。（注：找到每个段落紧邻的前一个同辈元素。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Hello</p> <div> <span class="selected">Hello Again</span> </div> <p>And Again</p> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").prev().hide(); $("p").prev(".selected").hide(); </script> </body> </html> demo

add(expr|ele|html|obj[,con]) 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。（注：添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>Hello</p> <span>Hello Again</span> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("p").add("span"); </script> </body> </html> demo

转载于:https://www.cnblogs.com/wulaoer/p/5202411.html

相关资源：Jquery基础之事件操作详解

专利

最新回复(0)