Html基础详解之（jquery）
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 </li>
<li>list item </li>
<li>list item </li>
<li>list item </li>
<li>list item </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 获取最后一个元素。（注：获取匹配的最后一个元素。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>list item </li>
<li>list item </li>
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul> <script src="jquery-1.8.2.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$("li:last").hide();
</script> </body>
</html>
demo
: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 </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </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开始计数。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr><td>Header </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
</table>
<script src="jquery-1.8.2.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$("tr:eq(1)").hide("show");
</script> </body>
</html>
demo
:gt(index) 匹配所有大于给定索引值的元素。（注：从0开始计数。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr><td>Header </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
</table>
<script src="jquery-1.8.2.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$("tr:gt(3)").hide("show");
</script> </body>
</html>
demo
:lt(index) 匹配所有小于给定索引值的元素。（注：从0开始计数。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr><td>Header </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
<tr><td>Value </td></tr>
</table>
<script src="jquery-1.8.2.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$("tr:lt(3)").hide("show");
</script> </body>
</html>
demo
:header 匹配如h1、h2、h3之类的标题元素。（注：给页面内所有标题加上背景色。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>Header </h1>
<p>Contents </p>
<h2>Header </h2>
<p>Contents </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" }, );
});
</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 </td><td></td></tr>
<tr><td>Value </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 </td><td></td></tr>
<tr><td>Value </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元素。）
<!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
: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 </td></tr>
<tr><td>Value </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") );
<!--$("p").after( $("#foo")[] );-->
<!--$("p").after("<b>Hello</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">
<!--$("p").before("<b>Hello</b>");-->在所有段落之前插入一些HTML标记代码。
<!--$("p").before( $("#foo")[] );-->在所有段落之前插入一个元素。
$("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")相同。）
<!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").insertBefore("#foo");
</script> </body>
</html>
demo
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描述：
<!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").wrapInner("<b></b>");
</script> </body>
</html>
demo
参数elem描述:(注：把所有段落内的每个子内容加粗)
<!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").wrapInner(document.createElement("b"));
</script> </body>
</html>
demo
回调函数 描述：（注：用原先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中把所有段落删除）
<!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").remove();
</script> </body>
</html>
demo
删除其中一段带有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: - })
.animate({ left: })
.animate({ left: - })
.animate({ left: })
.animate({ left: });
});
</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类的元素
<!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, :first").hide();
</script> </body>
</html>
demo
注：保留子元素中不含有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 == ;
});
</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 - one strong tag</li>
<li><strong>list</strong> item <strong></strong> - two <span>strong tags</span></li>
<li>list item </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 === ;
});
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 </li>
<li>list item
<ul>
<li>list item -a</li>
<li>list item -b</li>
</ul>
</li>
<li>list item </li>
<li>list item </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")[] ).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(, ).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(, ).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(, ).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().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(-).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 </dt>
<dd>definition -a</dd>
<dd>definition -b</dd>
<dd>definition -c</dd>
<dd>definition -d</dd> <dt id="term-2">term </dt>
<dd>definition -a</dd>
<dd>definition -b</dd>
<dd>definition -c</dd> <dt>term </dt>
<dd>definition -a</dd>
<dd>definition -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元素的祖先元素。
<!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("p"); </body>
</html>
demo
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"></li>
<li class="item-2"></li>
<li class="item-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
Html基础详解之（jquery）的更多相关文章
- javaScript基础详解（1）
javaScript基础详解 首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 J ...
- 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
- Dom探索之基础详解
认识DOM DOM级别 注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型 注:1 ...
- Android中Canvas绘图基础详解（附源码下载） (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
- Python学习一：序列基础详解
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7858473.html 邮箱:moyi@moyib ...
- Python学习二：词典基础详解
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...
- 三剑客基础详解(grep、sed、awk)
目录 三剑客基础详解 三剑客之grep详解 1.通配符 2.基础正则 3.grep 讲解 4.拓展正则 5.POSIX字符类 三剑客之sed讲解 1.sed的执行流程 2.语法格式 三剑客之Awk 1 ...
- java继承基础详解
java继承基础详解 继承是一种由已存在的类型创建一个或多个子类的机制,即在现有类的基础上构建子类. 在java中使用关键字extends表示继承关系. 基本语法结构: 访问控制符 class 子类名 ...
- java封装基础详解
java封装基础详解 java的封装性即是信息隐藏,把对象的属性和行为结合成一个相同的独立单体,并尽可能地隐藏对象的内部细节. 封装的特性是对属性来讲的. 封装的目标就是要实现软件部件的"高 ...
- Java :内部类基础详解
可以将一个类的定义放在另一个类的定义内部,这就是内部类. 第一次见面 内部类我们从外面看是非常容易理解的,无非就是在一个类的内部在定义一个类. public class OuterClass { pr ...
随机推荐
- ubuntn安装五笔输入法
1.首先要把原来的 ibus 卸载掉 sudo apt-get remove ibus 2.添加源 sudo add-apt-repository ppa:fcitx-t(www.111cn.net) ...
- void与void*详解
void关键字的使用规则: 1. 如果函数没有返回值,那么应声明为void类型: 2. 如果函数无参数,那么应声明其参数为void: 3. 如果函数的参数可以是任意类型指针,那么应声明其参数为void ...
- xxx app 项目问题解决一览
前话:作为人生旅途中的小记录 不同账号玩法限制 解决 <vn_rule>x</vn_rule> 6.调整下注筹码 **** 解决 不同账号的玩法限制 **** ...
- javaWEB总结(5):GET与POST请求
前言:get和post请求无论在项目中还是在面试中都会经常遇到,这次主要写一个小页面测试一下他们的区别,本人知识有限理解和说的简陋就全当给自己留个备份,日后再补充. 1.项目的目录结构 2.web.x ...
- VirtualBox中安装CentOS（新手教程）
1.VirtualBox下载 官网:http://www.virtualbox.org/wiki/Downloads 下载好之后,一路下一步安装即可 2.CentOS下载 官网:https://www ...
- C语言_数字排列顺序
#include <stdio.h> #include <stdlib.h> #define LENGTH 8 void main() { , , , , , , , }; ; ...
- PhpMyAdmin管理SQLSERVER的问题
由于项目需要对MSSQL做管理(多个版本的) 之前有个websqladmin的一个开源的项目,但是感觉功能太弱了,而且,采用的SQLDMO的方式,有点过时了. 所以考虑对其升级,方案大概有几种: 1. ...
- Linux防火墙该如何设置
在终端中输入如下命令打开防火墙:chkconfig iptables on如闭防火墙则输入:chkconfig iptables off上述两条命令均要重启系统才能生效.如果不想通过重启系统而即时生效 ...
- MFC实现登录对话框连接access数据库方式
编写一个简单的登录对话框 大家好,我们利用MFC编写一个简单的登录对话框.主窗体是单文档界面.程序运行的时候,先弹出一个简单的登录对话框,输入用户名和密码后主窗体显示出来. 1.开打VC++6.0.点 ...
- Entity Framework技巧系列之六 - Tip 20 – 25
提示20. 怎样处理固定长度的主键 这是正在进行中的Entity Framework提示系列的第20篇. 固定长度字段填充: 如果你的数据库中有一个固定长度的列,例如像NCHAR(10)类型的列,当你 ...