1、parent()：获得当前匹配元素集合中每个元素的父元素，该方法只会向上一级对 DOM 树进行遍历
$('li.item-a').parent().css('background-color', 'red'); // 寻找类名为item-a的li元素的父节点元素，并设置背景色为红色
1.1、parents() ：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
$("span").parents().css({"color":"red","border":"2px solid red"}); // 将span元素直到HTML节点之前的所有父节点元素设置边框样式
1.2、parentsUntil() ：返回介于两个给定元素之间的所有祖先元素
<!DOCTYPE html> <html> <head> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors"> body (曾曾祖父) <div style="width:500px;">div (曾祖父) <ul>ul (祖父) <li>li (直接父) <span>span</span> </li> </ul> </div> </body> </html>
2、children()：返回返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历
$('ul.level-2').children().css('background-color', 'red'); // 寻找类名为level-2的ul元素，并将其子节点背景色设置为红色
2.1、find() ：返回被选元素的后代元素，一路向下直到最后一个后代
<!DOCTYPE html> <html> <head> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("div").find("span").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (current element) <p>p (子) <span>span (孙)</span> </p> <p>p (child) <span>span (孙)</span> </p> </div> </body> </html>
3、创建节点：写好html内容，直接用$()包裹
var $newDiv = $("<div id="newDiv"></div>");
4、clone()：生成被选元素的副本，包含子节点、文本和属性
$("p:first").clone(true); // 复制每个 p 元素，事件处理器同样被复制到p元素
5、append()：在被选元素的结尾（仍然在内部）插入指定内容
$("p").append(function(n){
return "<b>This p element has index " + n + "</b>";
}); // 在每个 p 元素的结尾添加内容
6、appendTo()：在被选元素的结尾（仍然在内部）插入指定内容（与append()不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。）
$("<b> Hello World!</b>").appendTo("p"); // 在每个 p 元素的结尾添加内容
7、prepend()：在被选元素的开头（仍位于内部）插入指定内容
$("p").prepend("<b>Hello world!</b> "); // 在每个 p 元素的开头插入内容
8、prependTo()：在被选元素的开头（仍位于内部）插入指定内容（与prepend()差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。）
$("<b>Hello World!</b>").prependTo("p"); // 在每个 p 元素的开头插入文本
9、before() ：在被选元素前插入指定的内容（被选元素外部）
$("p").before(function(n){
return "<p>The p element below has index " + n + "</p>";
}); // 在每个段落前面插入新的段落
10、after() ： 在被选元素后插入指定的内容（被选元素外部）
$("p").after(function(n){
return "<p>The p element above has index " + n + "</p>";
}); // 在每个 p 元素后插入内容
11、insertBefore()：在被选元素前插入 HTML 元素（被选元素外部）
$('<span>insertBefore content</span>').insertBefore('p'); // 在p元素前插入span元素
12、insertAfter() ：在被选元素后插入 HTML 元素（被选元素外部）
$('<span>insertAfter content</span>').insertAfter('p'); // 在p元素后面插入span元素
13、remove() ：移除被选元素，包括所有文本和子节点；除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据
$('p').remove();
13.1、removeAttr() ：从被选元素中移除属性
$("p").removeAttr("id"); // 从任何 p 元素中移除 id 属性
13.2、removeClass() ：从被选元素移除一个或多个类（注释：如果没有规定参数，则该方法将从被选元素中删除所有类）
$("p").removeClass("intro"); // 移除所有 <p> 的 "intro" 类
$("p").removeClass(); // 删除<p>元素的所有类
14、detach() ：移除被选元素，包括所有文本和子节点；detach() 会保留所有绑定的事件、附加的数据
$('p').detach()
15、empty() ：从被选元素移除所有内容，包括所有文本和子节点
$('p').empty();
16、replaceWith() ：用指定的 HTML 内容或元素替换被选元素
$('p').replaceWith('<b>replaceWith content!</b>') // 用粗体文本替换所有段落
17、replaceAll() ：指定的 HTML 内容或元素替换被选元素 （与replaceWith差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。）
$('p').replaceAll('<b>replaceAll content!</b>');
18、wrap() ：把每个被选元素放置在指定的 HTML 内容或元素中
$("p").wrap(function(){ return "<div></div>" }); // 用 div 包裹每个段落
18.1、unwrap() ：删除被选元素的父元素
$("p").unwrap(); // 删除所有 <p> 元素的父元素
19、wrapAll() ：在指定的 HTML 内容或元素中放置所有被选的元素
$("p").wrapAll("<div></div>"); // 用一个 div 包裹所有段落
20、warpInner()：使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)
$("p").wrapInner("<b></b>"); // 加粗段落中的文本
21、each()：为每个匹配元素规定运行的函数（遍历指定元素）
$("li").each(function(){
alert($(this).text())
}); // 输出每个列表项的值
22、text()：设置或返回被选元素的文本内容
$("p").text("Hello world!"); // 改变所有 p 元素的文本内容
$("p").text(); // 获取p元素的文本内容
23、html()：返回或设置被选元素的内容 (inner HTML)
$("p").html("Hello <b>world!</b>"); // 改变 p 元素的内容
$("p").html(); // 获取p元素的内容
text()和HTML()的区别：
区别一：text()函数可用于xml 文档 和 html 文档，而 html() 只能用于html文档。
区别二：html()函数不仅仅显示文本，输出的还包括标签对和文本，而text()只有文本。
24、val()：返回或设置被选元素的值，元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值
$(":text").val("Hello Kitty"); // 改变文本域的值
25、next()：获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素
$("p").next(".selected").css("background", "yellow"); // 查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落，设置背景色为黄色
25.1、siblings()：返回被选元素的所有同胞元素
$("h2").siblings().css({"color":"red","border":"2px solid red"}); // 为h2标签同级的所有元素设置边框样式
$("h2").siblings("p").css({"color":"red","border":"2px solid red"}); // 为h2标签同级的所有p元素设置边框样式
25.2、next() ：返回被选元素的下一个同胞元素，该方法只返回一个元素
$("h2").next().css({"color":"red","border":"2px solid red"}); // 为h2元素的下一个同胞元素设置边框样式
25.3、nextAll() ：返回被选元素的所有跟随的同胞元素
$("h2").nextAll().css({"color":"red","border":"2px solid red"}); // 为h2元素的后面所有同胞元素设置边框样式
25.4、nextUntil() ：返回介于两个给定参数之间的所有跟随的同胞元素
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"}); // 为h2元素后的所有同胞元素，直到h6元素设置边框样式
25.5、prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
26、attr() ：设置或返回被选元素的属性值
（1）设置被选元素的属性和值：
$("img").attr("width","180"); // 设置图像的 width 属
（2）返回被选元素的属性值：
$("img").attr("width"); // 返回图像的宽度
（3）使用函数来设置属性/值：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("img").attr("width",function(n,v){ return v-50; }); }); }); </script> </head> <body> <img src="/i/eg_smile.gif" width="128" height="128" /> <br /> <button>减少图像的宽度 50 像素</button> </body> </html>
（4）为被选元素设置一个以上的属性和值：
$("img").attr({width:"50",height:"80"}); // 设置图像的 width 和 height 属性
27、获取并设置 CSS 类：
- addClass()：向被选元素添加一个或多个类
- removeClass()：从被选元素删除一个或多个类
- toggleClass()：对被选元素进行添加/删除类的切换操作
- css()：设置或返回样式属性
- hasClass() ：检查被选元素是否包含指定的 class
.important { font-weight:bold; font-size:xx-large; } .blue { color:blue; }
例子：
$("div").addClass(""important blue""); // 向 div 元素添加类 "important blue"
$("div").removeClass("blue"); // 从div元素上删除类blue
$("div").toggleClass("blue"); // div元素切换 CSS 类blue
$("p").css("background-color"); // 返回 p 元素的背景色
$("p").css("background-color","yellow"); // 设置 p 元素的背景色
$("p").css({"background-color":"yellow","font-size":"20px"}); // 为 p 元素设置多个样式
$("p").hasClass("intro"); // 检查段落是否拥有类 "intro"
28、处理元素和浏览器窗口的尺寸：
- width()：设置或返回元素的宽度（不包括内边距、边框或外边距）
- height()：设置或返回元素的高度（不包括内边距、边框或外边距）
- innerWidth()：返回元素的宽度（包括内边距）
- innerHeight()：返回元素的高度（包括内边距）
- outerWidth()：返回元素的宽度（包括内边距和边框）
- outerHeight()：返回元素的高度（包括内边距和边框）
- outerWidth(true)：返回元素的宽度（包括内边距、边框和外边距）
- outerHeight(true)：返回元素的高度（包括内边距、边框和外边距）
例子：
$("#div1").width(); // 返回id为div1元素的宽
$("#div1").height(); // 返回id为div1元素的高
$("#div1").innerWidth(); // 返回id为div1元素的宽度（包括内边距）
$("#div1").innerHeight(); // 返回id为div1元素的高度（包括内边距）
$("#div1").outerWidth(); // 返回id为div1元素的宽度（包括内边距和边框）
$("#div1").outerHeight(); // 返回id为div1元素的宽度（包括内边距和边框）
$("#div1").outerWidth(true); // 返回id为div1元素的宽度（包括内边距、边框和外边距）
$("#div1").outerHeight(true); // 返回id为div1元素的宽度（包括内边距、边框和外边距）
$(window).width(); // 显示文档和窗口的宽
$(window).height(); // 显示文档和窗口的高
$("#div1").width(320); // 调整 div 的宽
$("#div1").height(320); // 调整 div 的高
$("#div1").width(320).height(320); // 调整 div 的尺寸
29、元素的过滤：
- first() ：返回被选元素的首个元素
- last() ：返回被选元素的最后一个元素
- eq() ：返回被选元素中带有指定索引号的元素
- gt()：选择器选取 index 值高于指定数的元素（index 值从 0 开始）
- lt()：选取 index 值小于指定数的元素（index 值从 0 开始）
- filter() ：允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
- not() ：返回不匹配标准的所有元素（提示：not() 方法与 filter() 相反）
例子：
$("div p").first(); // 返回首个 <div> 元素内部的第一个 <p> 元素
$("div p").last(); // 返回最后一个 <div> 元素中的最后一个 <p> 元素
$("p").eq(1); // 返回第二个 <p> 元素（索引号 等于1）
$("tr:gt(2)"); // 返回第3个<tr>元素后的所有<tr>元素（索引号大于2）
$("tr:lt(2)"); // 返回前3个<tr>元素（索引号小于2）
$("p").filter(".intro"); // 返回带有类名 "intro" 的所有 <p> 元素
$("p").not(".intro"); // 返回不带有类名 "intro" 的所有 <p> 元素
