JQuery 元素操作主要讲的是用 JQuery 方法，操作标签的遍历、创建、添加、删除等操作。
以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
selector.each(callback);
迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。
<img /><img />
$("img").each(function (i) {
this.src = "test" + i + ".jpg";
});
如果你想得到 jQuery 对象，可以使用 $(this) 函数。
<button>Change colorsbutton>
<span>span>
<div>div>
<div>div>
<div>div>
<div>div>
<div id="stop">Stop herediv>
<div>div>
<div>div>
<div>div>
$("img").each(function () {
$(this).toggleClass("example");
});
你可以使用 ‘return’ 来提前跳出 each() 循环。
<button>Change colorsbutton>
<span>span>
<div>div>
<div>div>
<div>div>
<div>div>
<div id="stop">Stop herediv>
<div>div>
<div>div>
<div>div>
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
jQuery 对象中元素的个数。
这个函数的返回值与 jQuery 对象的 size() 属性一致。
selector.length;
计算文档中所有图片数量
<img src="test1.jpg" /> <img src="test2.jpg" />
$("img").length;
返回传给jQuery()的原始选择器。
换句话说，就是返回你用什么选择器来找到这个元素的。可以与context一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
selector.selector;
确定查询的选择器
$("ul")
.append("- "
+ $("ul").selector + "")
.append("- "
+ $("ul li").selector + "")
.append("- "
+ $("div#foo ul:not([class])").selector + "");
返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
可以与selector一起使用，用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
selector.context;
检测使用的文档内容
$("ul")
.append("- "
+ $("ul").context + "")
.append("- "
+ $("ul", document.body).context.nodeName + "");
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。从0开始，返回的是DOM对象，类似的有eq(index)，不过eq(index)返回的是jQuery对象。
这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
selector.get(index);
selector.get(); // 取得所有匹配的 DOM 元素集合。
<img src="test1.jpg" /> <img src="test2.jpg" />
$("img").get(0);
选择文档中所有图像作为元素数组，并用数组内建的 reverse 方法将数组反向。
<img src="test1.jpg" /> <img src="test2.jpg" />
$("img").get().reverse();
搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。
selector.index();
selector.index(selector);
selector.index(element);
查找元素的索引值
<ul>
<li id="foo">fooli>
<li id="bar">barli>
<li id="baz">bazli>
ul>
$("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，不传递参数，返回这个元素在同辈中的索引位置。
通用遍历方法，可用于遍历对象和数组。
不同于遍历 jQuery 对象的 $().each() 方法，此方法可用于遍历任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。
$.each(object, callback);
遍历数组，同时使用元素索引和内容。
$.each([0, 1, 2], function (i, n) {
alert("Item #" + i + ": " + n);
});
遍历对象，同时使用成员名称和变量内容。
$.each({ name: "John", lang: "JS" }, function (i, n) {
alert("Name: " + i + ", Value: " + n);
});
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。 未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。
$.extend(target, object1, objectN);
$.extend(deep, target, object1, objectN);
合并 settings 和 options，修改并返回 settings。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
合并 defaults 和 options, 不修改 defaults。
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
使用过滤函数过滤数组元素。
此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
$.grep(array, callback);
$.grep(array, callback, invert);
过滤数组中小于 0 的元素。
$.grep([0, 1, 2], function (n, i) {
return n > 0;
});
排除数组中大于 0 的元素，使用第三个参数进行排除。
$.grep(
[0, 1, 2],
function (n, i) {
return n > 0;
},
true
);
提供一种方法来执行一个或多个对象的回调函数，延迟对象通常表示异步事件。
$.when(deferreds);
执行Ajax请求后两个函数是成功的。
$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function (a1, a2) {
/* a1 and a2 are arguments resolved for the
page1 and page2 ajax requests, respectively */
var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
if (/Whip It/.test(jqXHR.responseText)) {
alert("First page has 'Whip It' somewhere.");
}
});
执行函数myfunc当两个Ajax请求是成功的，如果任一或myFailure有一个错误。
$.when($.ajax("/page1.php"), $.ajax("/page2.php")).then(myFunc, myFailure);
将类数组对象转换为数组对象。
类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。
$.makeArray(obj);
过滤数组中小于 0 的元素。
<div>Firstdiv>
<div>Seconddiv>
<div>Thirddiv>
<div>Fourthdiv>
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用数组翻转函数
将一个数组中的元素转换到另一个数组中。
作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。
$.map(arr, callback);
$.map(obj, callback);
将原数组中每个元素加 4 转换为一个新数组。
$.map([0, 1, 2], function (n) {
return n + 4;
});
原数组中大于 0 的元素加 1 ，否则删除。
$.map([0, 1, 2], function (n) {
return n > 0 ? n + 1 : null;
});
原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。
$.map([0, 1, 2], function (n) {
return [n, n + 1];
});
确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。
$.inArray(value, array);
$.inArray(value, array, fromIndex);
查看对应元素的位置
var arr = [4, "Pete", 8, "John"];
jQuery.inArray("John", arr); //3
jQuery.inArray(4, arr); //0
jQuery.inArray("David", arr); //-1
jQuery.inArray("Pete", arr, 2); //-1
把jQuery集合中所有DOM元素恢复成一个数组。
selector.toArray();
得到所有li的元素数组
alert($("li").toArray());
合并两个数组
返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()
$.merge(first, second);
合并两个数组到第一个数组上。
$.merge([0, 1, 2], [2, 3, 4]);
$.uniqueSort()函数通过搜索的数组对象，排序数组，并移除任何重复的节点。 如果一个节点和已经在数组中的节点完全相同，那么它被认为是重复的；两个不同的节点具有相同的属性是被认为不重复的。 此功能只适用于普通的JavaScript DOM元素的数组，主要是jQuery内部使用。你可能永远都不需要使用它。
在jQuery 3.0之前, 这个方法叫做 jQuery.unique()
$.uniqueSort(array);
删除重复 div 标签。
$.uniqueSort(document.getElementsByTagName("div"));
解析一个字符串到一个XML文件。
jQuery.parseXML使用原生解析函数浏览器创建一个有效的XML文档。这文档可以被传递给jQuery创建一个典型的jQuery对象，可以查询及操作。
$.parseXML(data);
创建一个jQuery对象使用一个XML字符串并得到标题节点的值。
var xml = 'RSS Title 这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。
jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。
默认情况下, 如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。在jQuery 1.3.2以后，其返回的元素顺序等同于在context中出现的先后顺序。
$(selector, [context]);
$(element);
$(object);
$(elementArray);
$(jQuery object);
$(); // 返回一个空的jQuery对象。
找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。
$("div > p");
设置页面背景色。
$(document.body).css("background", "black");
隐藏一个表单中所有元素。
$(myForm.elements).hide();
在文档的第一个表单中，查找所有的单选按钮(即：type 值为 radio 的 input 元素)。
$("input:radio", document.forms[0]);
在一个由 AJAX 返回的 XML 文档中，查找所有的 div 元素。
$("div", xml.responseXML);
根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。
你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用$("") 或 $("") ，但不推荐 $("")。在jQuery 中，这个语法等同于$(document.createElement("span")) 。
在jQuery 1.8中，通过$(html,props)， 您可以使用任何jQuery对象的方法或插件。在此之前，你只能使用一个方法名的短名单，并有没有成文的方式添加到列表中。然而，请注意，这可能会导致你的代码的行为改变，如果插件添加后，有相同的名称作为HTML属性。
jQuery(html, [ownerDocument]);
jQuery(html, props);
动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。
$("Hello
").appendTo("body");
创建一个 元素必须同时设定 type 属性。因为微软规定 元素的 type 只能写一次。
// 在 IE 中无效:
$("").attr("type", "checkbox");
// 在 IE 中有效:
$("");
动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。
$("", {
class: "test",
text: "Click me!",
click: function () {
$(this).toggleClass("test");
}
}).appendTo("body");
- 1
- 2
- 3
- 4
- 5
- 6
- 7
创建一个
$("", {
type: "text",
val: "Test",
focusin: function () {
$(this).addClass("active");
},
focusout: function () {
$(this).removeClass("active");
}
}).appendTo("form");
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
3、jQuery(callback)
3.1、概述
$(document).ready()的简写。
允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。 你可以在一个页面中使用任意多个$(document).ready事件。
3.2、语法
jQuery(callback);
- 1
3.3、参数
- callback：【Function】当DOM加载完成后要执行的函数
3.4、示例
当DOM加载完成后，执行其中的函数。
$(function () {
// 文档就绪
});
- 1
- 2
- 3
使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
jQuery(function ($) {
// 你可以在这里继续使用$作为别名...
});
- 1
- 2
- 3
4、jQuery.readyException( error )
4.1、概述
处理包裹在jQuery()中函数同步抛出的错误。
当包裹在jQuery()或jQuery( document ).ready()，或等效的函数中的函数同步抛出错误的时候，这个方法就会被触发。默认情况下，在一个超时，它重新抛出错误，因此它被记录在控制台中，并传递给window.onerror，而不是被静悄悄的吞噬。如果你想以不同的方式处理这种错误，可以覆盖此方法。
4.2、语法
jQuery.readyException(error);
- 1
4.3、参数
- error：错误信息；
4.4、示例
传递接受到的错误给 console.error。
jQuery.readyException = function (error) {
console.error(error);
};
- 1
- 2
- 3
四、内部插入
1、append(content|fn)
1.1、概述
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
1.2、语法
selector.append(content);
selector.append(fn);
- 1
- 2
1.3、参数
- content：【String、Element、jQuery】要追加到目标中的内容
- function(index, html)：【Function】返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
1.4、示例
向所有段落中追加一些HTML标记。
<p>I would like to say:p>
- 1
$("p").append("Hello");
- 1
2、appendTo(content)
2.1、概述
把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
在jQuery 1.3.2中，appendTo，prependTo，insertBefore，insertAfter 和 replaceAll 这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例二。
2.2、语法
selector.appendTo(content);
- 1
2.3、参数
- content：【String】用于被追加的内容
2.4、示例
把所有段落追加到ID值为foo的元素中。
<p>I would like to say:p>
<div>div>
<div>div>
- 1
- 2
- 3
$("p").appendTo("div");
- 1
新建段落追加div中并加上一个class
<div>div>
<div>div>
- 1
- 2
$("").appendTo("div").addClass("test").end().addClass("test2");
- 1
3、prepend(content)
3.1、概述
向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式。
3.2、语法
selector.prepend(content);
selector.prepend(fn);
- 1
- 2
3.3、参数
- content：【String、Element、jQuery】要插入到目标元素内部前端的内容
- function(index, html)：【Function】返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
3.4、示例
向所有段落中前置一些HTML标记代码。
<p>I would like to say:p>
- 1
$("p").prepend("Hello");
- 1
将一个DOM元素前置入所有段落
<p>I would like to say:p>
<p>I would like to say:p>
<b class="foo">Hellob>
<b class="foo">Good Byeb>
- 1
- 2
- 3
- 4
$("p").prepend($(".foo")[0]);
- 1
向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
<p>I would like to say:p>
<b>Hellob>
- 1
- 2
$("p").prepend($("b"));
- 1
4、prependTo(content)
4.1、概述
把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
在jQuery 1.3.2中，appendTo，prependTo，insertBefore，insertAfter 和 replaceAll 这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。
4.2、语法
selector.prependTo(content);
- 1
4.3、参数
- content：【String】用于匹配元素的jQuery表达式
4.4、示例
把所有段落追加到ID值为foo的元素中。
<p>I would like to say:p>
<div id="foo">div>
- 1
- 2
$("p").prependTo("#foo");
- 1
五、外部插入
1、after(content|fn)
1.1、概述
在每个匹配的元素之后插入内容。
1.2、语法
selector.after(content);
selector.after(fn);
- 1
- 2
1.3、参数
- content：【String，Element，jQuery】插入到每个目标后的内容
- function：【Function】函数必须返回一个html字符串。
1.4、示例
在所有段落之后插入一些HTML标记代码。
<p>I would like to say:p>
- 1
$("p").after("Hello");
- 1
在所有段落之后插入一个DOM元素。
<b id="foo">Hellob>
<p>I would like to say:p>
- 1
- 2
$("p").after($("#foo")[0]);
- 1
在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
<b>Hellob>
<p>I would like to say:p>
- 1
- 2
$("p").after($("b"));
- 1
2、before(content|fn)
2.1、概述
在每个匹配的元素之前插入内容。
2.2、语法
selector.before(content);
selector.before(fn);
- 1
- 2
2.3、参数
- content：【String，Element，jQuery】插入到每个目标后的内容
- function：【Function】函数必须返回一个html字符串。
2.4、示例
在所有段落之前插入一些HTML标记代码。
<p>I would like to say:p>
- 1
$("p").before("Hello");
- 1
在所有段落之前插入一个DOM元素。
<p>I would like to say:p>
<b id="foo">Hellob>
- 1
- 2
$("p").before($("#foo")[0]);
- 1
在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
<p>I would like to say:p>
<b>Hellob>
- 1
- 2
$("p").before($("b"));
- 1
3、insertAfter(content)
3.1、概述
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
在jQuery 1.3.2中，appendTo，prependTo，insertBefore，insertAfter 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。
3.2、语法
selector.insertAfter(content);
- 1
3.3、参数
- content：【String】用于匹配元素的jQuery表达式
3.4、示例
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
<p>I would like to say:p>
<b id="foo">Hellob>
- 1
- 2
$("p").insertAfter("#foo");
- 1
4、insertAfter(content)
4.1、概述
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
在jQuery 1.3.2中，appendTo，prependTo，insertBefore，insertAfter 和 replaceAll 这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。
4.2、语法
selector.insertAfter(content);
- 1
4.3、参数
- content：【String】用于匹配元素的jQuery表达式
4.4、示例
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
<p>I would like to say:p>
<b id="foo">Hellob>
- 1
- 2
$("p").insertAfter("#foo");
- 1
六、删除元素
1、empty()
1.1、概述
删除匹配的元素集合中所有的子节点。
1.2、语法
selector.empty();
- 1
1.3、示例
把所有段落的子元素（包括文本节点）删除
<p>Hello, <span>Personspan> <a href="#">and persona>p>
- 1
$("p").empty();
- 1
2、remove([expr])
2.1、概述
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
2.2、语法
selector.remove();
selector.remove(expr);
- 1
- 2
2.3、参数
- expr：【String】用于筛选元素的jQuery表达式
2.4、示例
从DOM中把所有段落删除
<p>Hellop>
how are
<p>you?p>
- 1
- 2
- 3
$("p").remove();
- 1
从DOM中把带有hello类的段落删除
<p class="hello">Hellop>
how are
<p>you?p>
- 1
- 2
- 3
$("p").remove(".hello");
- 1
3、detach([expr])
3.1、概述
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
3.2、语法
selector.detach();
selector.detach(expr);
- 1
- 2
3.3、参数
- expr：【String】用于筛选元素的jQuery表达式
3.4、示例
从DOM中把所有段落删除
<p>Hellop>
how are
<p>you?p>
- 1
- 2
- 3
$("p").detach();
- 1
从DOM中把带有hello类的段落删除
<p class="hello">Hellop>
how are
<p>you?p>
- 1
- 2
- 3
$("p").detach(".hello");
- 1
4、html
见html
也是清空匹配元素或者删除元素。
写在最后
如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！