02_jQuery DOM操作

目录

一、jQuery对象访问

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

参数：
	callback
		对于每个匹配的元素所要执行的函数
	
注：回调函数里面可以传递两个参数，第一个参数是表示从0开始进行迭代的数值；第二个表示的就是this对象；

示例代码：

<img/>
<img/>
<script>
	// 迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
    // each回调函数里面传递的参数,表示从0开始的数值,每次叠加1
    $("img").each(function(i){
        this.src = "test" + i + ".jpg";
    });
    
    // 如果你想得到 jQuery对象，可以使用 $(this) 函数。
    $("img").each(function (i) {
        $(this).attr("src", "test" + i + ".jpg");
    });
</script>

size()和length

  • size()
jQuery 对象中元素的个数。

示例代码：

<img src="test1.jpg"/> <img src="test2.jpg"/>

<script>
	// 计算文档中所有图片数量
    $("img").size(); // 2
</script>
  • length
jQuery 对象中元素的个数。

同size()效果一致;

selector

返回传给jQuery()的原始选择器。

换句话说，就是返回你用什么选择器来找到这个元素的。可以与context一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。

示例代码:

// 确定查询的选择器
$("ul")
  .append("<li>" + $("ul").selector + "</li>") 
  .append("<li>" + $("ul li").selector + "</li>")
  .append("<li>" + $("div#foo ul:not([class])").selector + "</li>");

// ul
// ul li
// div#foo ul:not([class])

context

返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。

可以与selector一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。

示例代码：

// 检测使用的文档内容
$("ul")
  .append("<li>" + $("ul").context + "</li>")
  .append("<li>" + $("ul", document.body).context.nodeName + "</li>");

// [object HTMLDocument]  //如果是IE浏览器，则返回[object]
// BODY

get([index])

取得其中一个匹配的元素。 

这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。

参数：
	[index]		
		取得第 index 个位置上的元素

示例代码：

<img src="test1.jpg"/> 
<img src="test2.jpg"/>
<script>
	$("img").get(0); // [ <img src="test1.jpg"/> ]
</script>

index([selector|element])

搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
 
如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。

参数:
	selector
		一个选择器，代表一个jQuery对象，将会从这个对象中查找元素。
	element
		获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

示例代码：

<ul>
    <li id="foo">foo</li>
    <li id="bar">bar</li>
    <li id="baz">baz</li>
</ul>
<script>
    $('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
    $('li').index($('#bar')); //1，传递一个jQuery对象
    $('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
    $('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置
    $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。  
</script>

二、数据缓存

data([key],[value])

在元素上存放数据,返回jQuery对象。

如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。

参数：
	key：
		存储的数据名.
	key,value：
		key:存储的数据名
		value:将要存储的任意数据
	obj：
		一个用于设置数据的键/值对

示例代码：

<!-- 在一个div上存取数据 -->
<div></div>
<script>
    $("div").data("blah"); // undefined
    $("div").data("blah", "hello"); // blah设置为hello
    $("div").data("blah"); // hello
    $("div").data("blah", 86); // 设置为86
    $("div").data("blah"); //  86
    $("div").removeData("blah"); //移除blah
    $("div").data("blah"); // undefined
</script>

<!-- 在一个div上存取名/值对数据 -->
<div></div>
<script>
    $("div").data("test", { first: 16, last: "pizza!" });
    $("div").data("test").first  //16;
    $("div").data("test").last  //pizza!;
</script>

removeData([name|list])

在元素上移除存放的数据

与$(...).data(name, value)函数作用相反

参数:
	name:
		存储的数据名
	list:
		移除数组或以空格分开的字符串

示例代码：

$("div").data({
    first: 16,
    second: "222",
    three: "333",
    last: "pizza!",
});
$("div").removeData("second"); // {first: 16, three: "333", last: "pizza!"}
$("div").removeData("first last"); // {three: "333"}
$("div").removeData(["first", "three"]); // {last: "pizza!"}

三、属性操作

属性

attr(name|pro|key,val|fn)

获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。

在jQuery 1.6中,当属性没有被设置时候，.attr()方法将返回undefined。若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态，请使用.prop()方法。

参数:
	name：
		属性名称
	properties：
		作为属性的“名/值对”对象
	key,value：
		属性名称，属性值
	key,function(index, attr)：
		1:属性名称。
		2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

示例代码：

<img src="images/1.png" alt="">
<img src="images/2.png" alt="">
<img src="images/3.png" alt="">
<script>
    // 参数name 描述:返回文档中"所有"图像的src属性值。
    $("img").attr("src");

    // 参数properties 描述:为所有图像设置src和alt属性。
    $("img").attr({
        src: "images/4.png",
        alt: "Test Image"
    });

    // 参数key,value 描述:为所有图像设置src属性。
    $("img").attr("src", "images/5.png");

    //参数key,回调函数 描述:把src属性的值设置为title属性的值。
    $("img").attr("title", function () {
        return this.src
    });
</script>

removeAttr(name)

从每一个匹配的元素中删除一个属性

1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);1.7版本在IE6下已支持删除disabled。

参数：
	name：
		要删除的属性名

示例代码：

<img src="test.jpg"/>
<script>
	// 将文档中图像的src属性删除
	$("img").removeAttr("src");
</script>

prop(n|p|k,v|f)

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

参数：
	同attr

示例代码：

// 参数name 描述:选中复选框为true，没选中为false
$("input[type='checkbox']").prop("checked");

// 参数properties 描述:禁用页面上的所有复选框。
$("input[type='checkbox']").prop({
    disabled: true
});

// 参数key,value 描述:禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

// 参数key,回调函数 描述:通过函数来设置所有页面上的复选框被选中。
$("input[type='checkbox']").prop("checked", function (i, val) {
    return !val;
});

removeProp(name)

用来删除由.prop()方法设置的属性集

随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

参数:
	propertyName
		要删除的属性名

示例代码：

<p> </p>
<script>
    // 设置一个段落数字属性，然后将其删除。
    var $para = $("p");
    $para.prop("luggageCode", 1234);
    $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
    $para.removeProp("luggageCode");
    $para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
</script>

attr() 方法 和 prop() 方法区别

  • attr() 方法设置或返回被选元素的属性值。
  • prop() 方法设置或返回被选元素的属性和值。

注：单纯从定义看的话，两个方法的作用都是一样的。而且用法也都差不多

作用一：返回被选元素的属性值。语法如下：

$(selector).attr(attribute)
$(selector).prop(property)

作用二：设置被选元素的属性和值。语法如下：

$(selector).attr(attribute,value)
$(selector).prop(property,value)

作用三：设置多个属性和值。语法如下：

$(selector).attr( {attribute:value, attribute:value ...} ) //对象的写法，键值对
$(selector).prop( {property:value, property:value,...} ) //对象的写法，键值对

作用四：使用函数设置属性和值。语法如下：

//第二个参数：规定返回要设置的属性值的函数。
/*该函数包括两个参数：
*	index - 检索集合中元素的 index 位置。
*	oldvalue / currentvalue - 检索被选元素的当前属性值。
*/
$(selector).attr(attribute,function(index,oldvalue))
$(selector).prop(property,function(index,currentvalue))

我们会发现：

  • 两个方法的用法都如出一辙，只是方法名称存在差异。一个是 attr，一个是 prop。
  • attr 的 全拼是 attribute。 prop 的全拼是 property。它们是两个不同的单词，虽说都有 属性 的意思，但其中的寓意必然不一样。

property 和 attribute 的 区别

  • property n. 属性，性质，性能；财产；所有权
  • attribute n. 属性；特质

由此可见，两者非常容易混淆，因为在中文上的翻译都特别接近。但实际上，它们两个是不同的东西，属于不同的范畴。

  • 深究它们的中文含义，我们可以将 attribute 理解为 “特性” ，而将 property 理解为 “属性”。
  • 显而易见，一个是 属性，一个是特性。肯定不一样了。
  • 如果你百度 “属性” 关键字的话，你会发现，属性 对应的英文直接就是 property。而且百度含义对 “属性” 的　详细释义　是：指事物本身固有的不可缺少的性质。

现在，我们知道了：

  • property　属性。它是与生俱来的，并不是后天赋予的。比如说，某些对象在定义时就具有某一些属性。
  • attribute　特性。本身没有的，后天赋予的。比如说，某些对象在创建后，自定义赋予的一些属性。

对应到 js 中就是：

  • property 是 DOM 中的属性，是 JavaScript 里的对象；
  • attribute 是 HTML 标签上的特性（属性），它的值只能够是字符串；

对应到 jQuery 中就是：

  • 对于 HTML 元素本身就带有的固有属性，或者说 W3C 标准里就包含有这些属性，更直观的说法就是，编辑器里面可以智能提示出来的一些属性，如：src、href、value、class、name、id等。在处理时，使用 prop() 方法。
  • 对于 HTML 元素我们自定义的 DOM 属性，即元素本身是没有这个属性的，如：data-*。在处理时，使用 attr() 方法。

`attr()方法 和 prop() 方法 的返回值:

  • $(eleStr).attr()
<img src="/smile.jpg"/>
<button>获取图像的 class 属性值</button>
<script>
	$("button").click(function(){
        //如果属性存在，则返回属性值；如果属性不存在，则返回 undefined
        console.log( $("img").attr("class") );
        //如果属性存在，则返回属性值；如果属性不存在，则返回 空（""）
        console.log( $("img").prop("class") );
    });
</script>
  • $(eleStr).prop()
<input type="checkbox">
<button>获取复选框的选中状态</button>
<script>
	$("button").click(function(){
        //如果属性值存在，则返回 true；如果属性值不存在，则返回 false。
        console.log( $("input").prop("checked") ); 
        //如果属性值存在，则返回 checked；如果属性值不存在，则返回 undefined。
        console.log( $("input").attr("checked") );
	});
</script>

如果要从根源上弄清楚二者的区别，可以参考下面这篇博文，分析的特别到位。

https://www.cnblogs.com/lmjZone/p/8760232.html

CSS类

addClass(class|fn)

为每个匹配的元素添加指定的类名。

参数：
	class：
		一个或多个要添加到元素中的CSS类名，请用空格分开
	function(index, class)：
		此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例代码：

<p> </p>
<ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
</ul>
<script>
    // 参数class 描述:为匹配的元素加上 'selected' 类
    $("p").addClass("selected");
    $("p").addClass("selected1 selected2");

    // 给li加上不同的class
    $('ul li:last').addClass(function () {
        return 'item-' + $(this).index();
    });
</script>

removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类。

参数:
	class:
		一个或多个要删除的CSS类名，请用空格分开
	function(index, class):
		此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

示例代码：

<p class="selected cp"> </p>
<ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
</ul>
<script>
    // 参数class 描述:从匹配的元素中删除 'selected' 类
    $("p").removeClass("selected");

    // 参数class 描述:删除匹配元素的所有类
    $("p").removeClass();

    // 回调函数描述:删除最后一个元素上与前面重复的class
    $('li:last').removeClass(function () {
        return $(this).prev().attr('class');
    });
</script>

toggleClass(class|fn[,sw])

如果存在（不存在）就删除（添加）一个类。

参数:
	class:
		CSS类名
	class,switch:
		1:要切换的CSS类名. 
		2:用于决定元素是否包含class的布尔值
	switch:
		用于决定元素是否包含class的布尔值。
	function(index, class,switch)[, switch] 
		1:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
		2: 一个用来判断样式类添加还是移除的 boolean 值。

示例代码：

// 参数class 描述:为匹配的元素切换 'selected' 类
$("p").toggleClass("selected");

// 参数class,switch 描述:每点击三下加上一次 'highlight' 类
var count = 0;
$("p").click(function(){
    $(this).toggleClass("highlight", count++ % 3 == 0);
});

HTML代码/文本/值

html([val|fn])

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

参数：
	val：
		用于设定HTML内容的值
	function(index, html)：
		此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

示例代码：

// 无参数 描述:返回p元素的内容。
$('p').html();

// 参数val 描述:设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");

// 回调函数描述:使用函数来设置所有匹配元素的内容。
$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
});

text([val|fn])

取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

参数：
	val：
		用于设置元素内容的文本
	function(index, text)：
		此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

示例代码：

//无参数 描述:返回p元素的文本内容。
('p').text();

// 参数val 描述:设置所有 p 元素的文本内容
$("p").text("Hello world!");

// 回调函数 描述:使用函数来设置所有匹配元素的文本内容。
$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
});

val([val|fn|arr])

获得匹配元素的当前值。

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

参数：
	val：
		要设置的值。
	function(index, value)
		此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，value为原先的value值。
	array：
		用于 check/select 的值

示例代码：

<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
<script>
	// 无参数 描述:获取文本框中的值
    $("input").val();

    // 参数val 描述:设定文本框的值
    $("input").val("hello world!");

    // 设定一个select和一个多选的select的值
    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check2", "radio1"]);
</script>

四、CSS样式操作

CSS操作

css(name|pro|[,val|fn])1.9*

访问匹配元素的样式属性。

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

参数：
	name：
		要访问的属性名称
	properties：
		要设置为样式属性的名/值对
	name,value：
		属性名,属性值
	name,function(index, value)：
		1:属性名
		2:此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。

示例代码：

// 参数name 描述:取得第一个段落的color样式属性的值。
$("p").css("color");

// 参数properties 描述:将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" });

// 参数name,value 描述:将所有段落字体设为红色
$("p").css("color","red");

// 参数name,回调函数 描述:逐渐增加div的大小
$("div").click(function() {
    $(this).css({
        width: function(index, value) {
            return parseFloat(value) * 1.2;
        }, 
        height: function(index, value) {
            return parseFloat(value) * 1.2;
        }
    });
});

位置操作

offset([coordinates])

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

参数：
	coordinates{top,left}：
		规定以像素计的 top 和 left 坐标。
		可能的值：
			值对，比如 {top:100,left:0} 
			带有 top 和 left 属性的对象 
	function(index,coords)：
		规定返回被选元素新偏移坐标的函数。
			index - 可选。接受选择器的 index 位置 
			oldvalue - 可选。接受选择器的当前坐标

示例代码：

// 无参数描述:获取第二段的偏移
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

// 参数coordinates 描述:设置第二段的偏移
$("p:last").offset({ top: 10, left: 30 });

position()

获取匹配元素相对父元素的偏移。

返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

注：如果父元素没有定位属性，则继续向上找定位父元素，直到html根元素

示例代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parentDiv {
            width: 400px;
            height: 400px;
            background: red;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }

        #childDiv {
            width: 200px;
            height: 200px;
            background: yellow;
            position: relative;
            left: 50px;
            top: 50px;
        }
    </style>
</head>

<body>
    <script src="jquery.js"></script>
    <div id="parentDiv">
        <div id="childDiv">
            2
        </div>
    </div>
    <script>
        var position = $("#childDiv").position();
        console.log($("#childDiv"))
        console.log(position);
    </script>
</body>

</html>

scrollTop([val])

获取匹配元素相对滚动条顶部的偏移。

此方法对可见和隐藏元素均有效。

参数:
	val:
		设定垂直滚动条值

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parentDiv {
            width: 400px;
            height: 400px;
            background: red;
            margin: 300px auto 500px;
            overflow: hidden;
            position: relative;
        }
    </style>
</head>

<body>
    <script src="jquery.js"></script>
    <div id="parentDiv">
        1
    </div>
    <script>
        $(document).click(function () {
            console.log($(this).scrollTop());
        })
    </script>
</body>

</html>

回到顶部案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            height: 1500px;
        }

        #btn {
            width: 50px;
            height: 50px;
            position: fixed;
            right: 50px;
            bottom: 10px;
        }
    </style>
</head>

<body>

    <a href="javascript:;" id="btn" title="回到顶部">回到<br>顶部</a>
    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //首先将#btn隐藏
            $("#btn").hide();
            //当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
            $(function () {
                $(window).scroll(function () {
                    if ($(window).scrollTop() > 50) {
                        $("#btn").fadeIn(200);
                    } else {
                        $("#btn").fadeOut(200);
                    }
                });
                //当点击跳转链接后，回到页面顶部位置
                $("#btn").click(function () {
                    $('body,html').animate({
                            scrollTop: 0
                        },
                        200);
                    return false;
                });
            });
        });
    </script>
</body>

</html>

scrollLeft([val])

获取匹配元素相对滚动条左侧的偏移。

此方法对可见和隐藏元素均有效。

参数：
	val：
		设定水平滚动条值

尺寸操作

height([val|fn])

取得匹配元素当前计算的高度值（px）。

在 jQuery 1.2 以后可以用来获取 window 和 document 的高

参数：
	val：
		设定CSS中 'height' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。
	function(index, height)：
		返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。

示例代码：

// 无参数描述:获取第一段的高
$("p").height();

// 参数val 描述:把所有段落的高设为 20:
$("p").height(20);

// 参数function(index, height) 描述:以 10 像素的幅度增加 p 元素的高度
 $("button").click(function(){
     $("p").height(function(n,c){
         return c+10;
     });
 });

width([val|fn])

取得第一个匹配元素当前计算的宽度值（px）。

在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

注:用法同height()

innerHeight()

获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

此方法对可见和隐藏元素均有效

示例代码：

<p>Hello</p><p>2nd Paragraph</p>
    
<script>
	// 获取第一段落内部区域高度。
    var p = $("p:first");
	$("p:last").text( "innerHeight:" + p.innerHeight() );// innerHeight: 16
</script>

innerWidth()

获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。

此方法对可见和隐藏元素均有效。

注：用法同innerHeight()

outerHeight([soptions])

获取第一个匹配元素外部高度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。

参数：
	options：
		设置为 true 时，计算边距在内。

示例代码：

<p>Hello</p><p>2nd Paragraph</p>
    
<script>
	// 获取第一段落外部高度。
    var p = $("p:first");
    $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
</script>

outerWidth([options])

获取第一个匹配元素外部宽度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。

注：用法同outerHeight()

五、文档处理

内部插入

append(content|fn)

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

参数:
	content: String, Element, jQuery
		要追加到目标中的内容
	function(index, html):
		返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值

示例代码：

// 向所有段落中追加一些HTML标记。
$("p").append("<b>Hello</b>");

appendTo(content)

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例二。

示例代码：

<p>I would like to say: </p>
<div></div><div></div>

<script>
	// 把所有段落追加到div元素中。
    $("p").appendTo("div");
    
    // 新建段落追加div中并加上一个class
     $("<p/>")
       .appendTo("div")
       .addClass("test")
       .end()
       .addClass("test2");
</script>

prepend(content|fn)

向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

参数:
	content:
		要插入到目标元素内部前端的内容
	function(index, html):
		返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

示例代码：

<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
<p>I would like to say: </p><b>Hello</b>
<script>
	// 向所有段落中前置一些HTML标记代码。
    $("p").prepend("<b>Hello</b>");
    
    // 将一个DOM元素前置入所有段落
    $("p").prepend( $(".foo")[0] );
    
    // 向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
    $("p").prepend( $("b") );
</script>

prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。

参数：
	content：
		用于匹配元素的jQuery表达式

<p>I would like to say: </p>

<div id="foo"></div>

<script>
	// 把所有段落追加到ID值为foo的元素中。
    $("p").prependTo("#foo");
</script>

外部插入

after(content|fn)

在每个匹配的元素之后插入内容。

参数:
	content:String, Element, jQuery
		插入到每个目标后的内容
	function:
		函数必须返回一个html字符串。

示例代码：

<p>I would like to say: </p>

<b id="foo">Hello</b>

<p>I would like to say: </p>
<script>
    // 在所有段落之后插入一些HTML标记代码。
    $("p").after("<b>Hello</b>");

    // 在所有段落之后插入一个DOM元素。
    $("p").after($("#foo")[0]);

    // 在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
    $("p").after( $("b") );
</script>

before(content|fn)

在每个匹配的元素之前插入内容。

参数:
	content:String, Element, jQuery
		插入到每个目标后的内容
	function:
		函数必须返回一个html字符串。

示例代码：

<p>I would like to say: </p>
<script>
    // 在所有段落之前插入一些HTML标记代码。
    $("p").before("<b>Hello</b>");
</script>

insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。

参数：
	content：
		用于匹配元素的jQuery表达式

示例代码：

<p>I would like to say: </p>
<b id="foo">Hello</b>
<script>
    // 把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
    $("p").insertAfter("#foo");
</script>

insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。

参数：
	content：
		用于匹配元素的jQuery表达式

示例代码：

<b id="foo">Hello</b>
<p>I would like to say: </p>
<script>
    // 把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。
    $("p").insertBefore("#foo");
</script>

包裹

wrap(html|ele|fn)

把所有匹配的元素用其他元素的结构化标记包裹起来。

这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。

参数：
	html：
		HTML标记代码字符串，用于动态生成元素并包裹目标元素
	element：
		用于包装目标元素的DOM元素
	fn：
		生成包裹结构的一个函数

示例代码：

<p>我是p段落</p>
<p>我是p段落</p>
<a href="">百度一下</a>
<p>我是p段落</p>
<div id="content"></div>
<script>
    // html参数描述:把所有的段落用一个新创建的div包裹起来
    $("p").wrap("<div class='wrap'></div>");

    // 用ID是"content"的div将每一个段落包裹起来
    $("p").wrap(document.getElementById('content'));
</script>

unwrap()

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

示例代码：

<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>

<div class="cc">
    <p>Hello</p>
</div>
<script>
    // 去除p元素的外部包裹
    $("p").unwrap()
</script>

wrapAll(html|ele)

将所有匹配的元素用单个元素包裹起来

这于 '.wrap()'<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

参数：
	html：
		HTML标记代码字符串，用于动态生成元素并包装目标元素
	elem：
		用于包装目标元素的DOM元素

示例代码：

// 用一个生成的div将所有段落包裹起来
$("p").wrapAll("<div></div>");

// 用DOM元素包裹所有的段落元素
$("p").wrapAll(document.createElement("div"));

wrapInner(html|ele|fn)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

参数：
	html：
		HTML标记代码字符串，用于动态生成元素并包装目标元素
	element：
		用于包装目标元素的DOM元素
	fn：
		生成包裹结构的一个函数

示例代码：

// 把所有段落内的每个子内容加粗
$("p").wrapInner("<b></b>");

// 把所有段落内的每个子内容加粗
$("p").wrapInner(document.createElement("b"));

替换

replaceWith(content|fn)

将所有匹配的元素替换成指定的HTML或DOM元素。

参数:
	content:String, Element, jQuery, Function
		用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话，函数返回值必须是HTML字符串

示例代码：

// 把所有的段落标记替换成加粗的标记。
$("p").replaceWith("<b>Paragraph. </b>");

// 用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。
$('.third').replaceWith($('.first'));

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。

参数:
	selector:
		用于查找所要被替换的元素

示例代码：

// 把所有的段落标记替换成加粗标记
$("<b>Paragraph. </b>").replaceAll("p");

删除

empty()

删除匹配的元素集合中所有的子节点。

示例代码：

$("p").empty();

remove([expr])

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

参数：
	expr：
		用于筛选元素的jQuery表达式

示例代码：

// 从DOM中把所有段落删除
$("p").remove();

// 从DOM中把带有hello类的段落删除
$("p").remove(".hello");

detach([expr])

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

参数：
	expr：
		用于筛选元素的jQuery表达式

示例代码：

// 从DOM中把所有段落删除
$("p").detach();

// 从DOM中把带有hello类的段落删除
$("p").detach(".hello");

复制

clone()

克隆匹配的DOM元素并且选中这些克隆的副本。

在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

参数：
	Events：
		一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

	Events[,deepEvents]
		1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
		2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

示例代码：

// 克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
$("b").clone().prependTo("p");

// 创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

六、高级筛选

过滤

eq(index|-index)

获取第N个元素

参数：
	index：
		一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
	-index：
		一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)

示例代码：

<p> This is just a test.</p> <p> So is this</p>

<script>
	// 参数index描述:获取匹配的第二个元素
	$("p").eq(1)
</script>

first()

获取第一个元素

示例代码：

<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>
	// 描述:获取匹配的第一个元素
	$('li').first()
</script>

last()

获取最后个元素

示例代码：

<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>
	// 描述:获取匹配的最后个元素
	$('li').last()
</script>

hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，则返回true。

这其实就是 is("." + class)。

参数：
	class：
		用于匹配的类名

示例代码：

<div class="protected"></div><div></div>
<script>
	//描述:给包含有某个类的元素进行一个动画。
    $("div").click(function(){
        if ( $(this).hasClass("protected") )
            $(this)
                .animate({ left: -10 })
                .animate({ left: 10 })
                .animate({ left: -10 })
                .animate({ left: 10 })
                .animate({ left: 0 });
    });
</script>

filter(expr|obj|ele|fn)

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

参数：
	expr：
		字符串值，包含供匹配当前元素集合的选择器表达式。
	jQuery object：
		现有的jQuery对象，以匹配当前的元素。
	element：
		一个用于匹配元素的DOM元素。
	function(index) ：
		一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

示例代码：

<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>
<script>
	// 保留带有select类的元素
    $("p").filter(".selected")
</script>

is(expr|obj|ele|fn)

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

如果没有元素符合，或者表达式无效，都返回'false'。 '''注意：'''在jQuery 1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true

参数:
	同上

示例代码：

<form><input type="checkbox" /></form>

<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>
	// 参数expr 描述:由于input元素的父元素是一个表单元素，所以返回true。
	$("input[type='checkbox']").parent().is("form")
    
    // 回调函数 描述:判断点击li标签增加背景色为红色，如果点击的是第2个strong,当前的li增加背景色为绿色
	$("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>

map(callback)

将一组元素转换成其他数组（不论是否是元素数组）

你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

参数：
	callback：
		给每个元素执行的函数

示例代码：

<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>
	// 描述:把form中的每个input元素的值建立一个列表。
	$("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );
</script>

has(expr|ele)

保留包含特定后代的元素，去掉那些不含有指定后代的元素。

.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。

参数：
	expr：
		字符串值，包含供匹配当前元素集合的选择器表达式。
	element：
		一个用于匹配元素的DOM元素。

示例代码：

<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>
	// 给含有ul的li加上背景色
    $('li').has('ul').css('background-color', 'red');
</script>

not(expr|ele|fn)

删除与指定表达式匹配的元素

参数：
	expr：
		一个选择器字符串。
	element：
		一个用于匹配元素的DOM元素。
	function(index) ：
		一个用来检查集合中每个元素的函数。this是当前的元素。

示例代码：

<p>Hello</p>
<p id="selected">Hello Again</p>
<script>
	// 从p元素中删除带有 select 的ID的元素
    $("p").not( $("#selected")[0] )
</script>

slice(start,[end])

选取一个匹配的子集

参数：
	start：
		开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
	end：
		结束选取自己的位置，如果不指定，则就是本身的结尾。

示例代码：

<p>Hello</p>
<p>cruel</p>
<p>World</p>

<script>
	// 选择第一个p元素
    $("p").slice(0, 1).wrapInner("<b></b>");
    
    // 选择前两个p元素
    $("p").slice(0, 2).wrapInner("<b></b>");
    
    // 只选取第二个p元素
    $("p").slice(1, 2).wrapInner("<b></b>");
    
    // 只选取第二第三个p元素
    $("p").slice(1).wrapInner("<b></b>");
    
    // 选取第最后一个p元素
    $("p").slice(-1).wrapInner("<b></b>");
</script>

查找

children([expr])

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

参数:
	expr:
		用以过滤子元素的表达式

示例代码：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>
<div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <p>And Again</p>
</div>
<script>
	// 查找DIV中的每个子元素。
    $("div").children()
    
    // 在每个div中查找 .selected 的类。
    $("div").children(".selected")
</script>

closest(e|o|e)1.7*

jQuery 1.3新增。从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。 

closest对于处理事件委托非常有用。 

.closest( selectors [, context ] )方法从 jQuery 1.7 开始，不再建议使用该方法，但是 jQuery 1.7 之前仍然可以使用。该方法将主要用于 jQuery 内部或插件作者使用。 

参数：
	expr：
		用以过滤元素的表达式。jQuery 1.4开始，也可以传递一个字符串数组，用于查找多个元素。
	jQuery object ：
		一个用于匹配元素的jQuery对象
	element ：
		一个用于匹配元素的DOM元素。

示例代码：

<ul>
    <li></li>
    <li></li>
</ul>
<script>
	// 展示如何使用clostest查找多个元素
    $("li:first").closest(["ul", "body"]);
    
    // 展示如何使用clostest来完成事件委托。
    $(document).bind("click", function (e) {
        $(e.target).closest("li").toggleClass("hilight");
    });
</script>

find(e|o|e)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

参数:
	同上

示例代码：

<p>
    <span>Hello</span>, how are you?
</p>
<script>
	// 从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
    $("p").find("span")
</script>

next([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

参数：
	expr ：
		用于筛选的表达式

示例代码：

<p>Hello</p>
<p>Hello Again</p>
<div>
    <span>And Again</span>
</div>
<hr>
<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>
<script>
	// 找到每个段落的后面紧邻的同辈元素。
    $("p").next()
    
    // 找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
    $("p").next(".selected")
</script>

nextAll([expr])

查找当前元素之后所有的同辈元素。

可以用表达式过滤

参数：
	expr：
		用来过滤的表达式

示例代码：

<div></div>
<div></div>
<div></div>
<div></div>
<script>
	// 给第一个div之后的所有元素加个类
    $("div:first").nextAll().addClass("after");
</script>

nextUntil([e|e][,f])

查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。

参数：
	[expr][,filter]：
		expr: 用于筛选祖先元素的表达式。
		filter: 一个字符串，其中包含一个选择表达式匹配元素。
	[element][,filter]：
		element: 用于筛选祖先元素的DOM元素。
		filter: 一个字符串，其中包含一个选择表达式匹配元素。

示例代码：

<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>
	// 给#term-2后面直到dt前的元素加上红色背景
    $('#term-2').nextUntil('dt').css('background-color', 'red');

    var term3 = document.getElementById("term-3");
    $("#term-1").nextUntil(term3, "dd").css("color", "green");
</script>

offsetParent()

返回第一个匹配元素用于定位的父节点。

这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

示例代码：

<div style="width:70%;position:absolute;left:100px;top:100px">
  <div style="margin:50px;background-color:yellow">
     <p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p>
   <div>
</div>
<button>点击这里</button>
<script>
    // 设置最近的祖先定位元素的背景颜色
    $("button").click(function(){
        $("p").offsetParent().css("background-color","red");
    });
</script>

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

参数：
	expr ：
		用来筛选的表达式

示例代码：

<div>
    <p>Hello</p>
    <p>Hello</p>
</div>

<div>
    <p>Hello</p>
</div>
<div class="selected">
    <p>Hello Again</p>
</div>
<script>
	// 查找每个段落的父元素
    $("p").parent()
    
    // 查找段落的父元素中每个类名为selected的父元素。
    $("p").parent(".selected")
</script>

parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

参数：
	expr ：
		用来筛选的表达式

示例代码：

<div>
    <p>
        <span>Hello</span>
    </p>
    <span>Hello Again</span>
</div>

<script>
    // 找到每个span元素的所有祖先元素。
    $("span").parents()

    // 找到每个span的所有是p元素的祖先元素。
    $("span").parents("p")
</script>

parentsUntil([e|e][,f])

查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。 

参数：
	[expr][,filter]：
		expr: 用于筛选祖先元素的表达式
		filter: 一个字符串，其中包含一个选择表达式匹配元素。
	[element][,filter]：
		element:用于筛选祖先元素的DOM元素
		filter: 一个字符串，其中包含一个选择表达式匹配元素。

示例代码：

<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>
    // 查找item-a的祖先，但不包括level-1
	$('li.item-a').parentsUntil('.level-1')
    	.css('background-color', 'red');
</script>

prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

参数：
	expr：
		用于筛选前一个同辈元素的表达式

示例代码：

<p>Hello</p>
  <div>
    <span>Hello Again</span>
  </div>
  <p>And Again</p>
  <div>
    <span>Hello</span>
  </div>
  <p class="selected">Hello Again</p>
  <p>And Again</p>
  <script>
    // 找到每个段落紧邻的前一个同辈元素。
    $("p").prev()

    // 找到每个段落紧邻的前一个同辈元素中类名为selected的元素。
    $("p").prev(".selected")
  </script>

prevall([expr])

查找当前元素之前所有的同辈元素

可以用表达式过滤。

参数:
	expr:
		用于过滤的表达式

示例代码：

<div></div><div></div><div></div><div></div>
<script>
	// 给最后一个之前的所有div加上一个类
    $("div:last").prevAll().addClass("before");
</script>

prevUntil([e|e][,f])

查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 .prevAll()效果一样。

参数：
	同上

示例代码：

<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>
	// 给#term-2前面直到dt前的元素加上红色背景
    $('#term-2').prevUntil('dt').css('background-color', 'red');
</script>

siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

参数：
	expr：
		用于筛选同辈元素的表达式

示例代码：

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p>And Again</p>
<div>
    <span>Hello</span>
</div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
	// 找到每个div的所有同辈元素。
    $("div").siblings()
    
    // 找到每个div的所有同辈元素中带有类名为selected的元素。
    $("div").siblings(".selected")
</script>

串联

add(e|e|h|o[,c])1.9*

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

jQuery 1.4 中， .add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序，而不再是简单的添加。

jQuery 1.9 中， .add()方法返回的结果总是按照节点在document（文档）中的顺序排列。在1.9之前，如果上下文或输入的集合中任何一个以脱离文档的节点（未在文档中）开始，使用.add()方法节点不会按照document（文档）中的顺序排序。现在，返回的节点按照文档中的顺序排序，并且脱离文档的节点被放置在集合的末尾。

参数：
	expr：
		一个用于匹配元素的选择器字符串。
	elements：
		DOM元素。
	html：
		HTML片段添加到匹配的元素
	jQuery object：
		一个jqeruy对象增加到匹配的元素
	expr,context：
		expr:用于匹配元素并添加的表达式字符串，或者用于动态生成的HTML代码，如果是一个字符串数组则返回多个元素 
	context:作为待查找的 DOM 元素集、文档或 jQuery 对象。

示例代码：

<p>Hello</p>
<span>Hello Again</span>
<p>Hello</p>
<p>
    <span id="a">Hello Again</span>
</p>
<script>
	// 添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。
    $("p").add("span")
    
    // 动态生成一个元素并添加至匹配的元素中
    $("p").add("<span>Again</span>")
    
    // 为匹配的元素添加一个或者多个元素
    $("p").add(document.getElementById("a"))
</script>

addBack()1.9+

添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。

如上所述在讨论中的.end()， jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个DOM遍历方法被调用时，新的元素集合推入到堆栈中。 如果还需要包含先前的元素集合，.addBack() 可以提供帮助。

示例代码：

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li class="third-item">list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script>
    // 下面的代码的返回结果是后面3，4和5项是一个红色的背景：
    $('li.third-item').nextAll().addBack().css('background-color', 'red');
</script>

contents()

查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

注：案例存在问题

示例代码：

<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>

<iframe src="/index-blank.html" width="300" height="100"></iframe>
<script>
	// 查找所有文本节点并加粗
    $("p").contents().not("[nodeType=1]").wrap("<b/>");
    
    // 往一个空框架中加些内容
    $("iframe").contents().find("body").append("I'm in an iframe!");
</script>

end()

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

示例代码：

<p>
    <span>Hello</span>
    ,how are you?
</p>
<script>
	// 选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素
    $("p").find("span").end()
</script>
posted @ 2023-10-31 14:36  城市炊烟  阅读(8)  评论(0)  编辑  收藏  举报