jQuery系列：DOM操作
1. 访问元素
在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问主要包括对元素属性、内容、值、CSS的操作。
1.1 元素属性操作
1.1.1 设置或返回被选元素的属性值
语法格式：
attr( name | properties | key, value | fn)
其中，参数
name：属性名称
properties：作为属性的“名/值对”对象
key, value：属性名称，属性值
key, function(index, attr)：
◊ 属性名称；
◊ 返回属性值的函数，第一个参数为当前元素的索引值，第二个参数为原先的属性值。
1.1.2 获取元素的属性
语法格式：
attr( name )
其中，参数
name：属性的名称
示例：
$("img").attr("src");
语法格式：
attr(key, function(index, attr))
其中，参数
key：属性名称
index：当前元素的索引号，整个函数返回一个字符串作为元素的属性值。
示例：
$("img").attr("title", function () {
return this.src;
});
1.1.3 设置元素的属性
语法格式：
attr(key, value)
其中，参数
key：属性的名称
value：属性的值。
设置多个属性语法格式：
attr({ key0: value0, key1: value1 })
示例：
$("img").attr("src", "images/01.jpg");
$("img").attr({
src: "images/01.jpg",
alt: "第一张"
});
1.1.4 删除元素的属性
语法格式：
removeAttr(name)
其中，参数
name：元素属性的名称
示例：
$("img").removeAttr("src");
2. 元素内容操作
jQuery中操作元素内容的方法包括：html()和text()。html()获取或设置元素的HTML内容，text()获取或设置元素文本内容。
| 语法格式 | 参数说明 | 功能描述 |
|---|---|---|
| html() | 获取元素的HTML内容 | |
| html(val) | val：元素的HTML内容 | 设置元素的HTML内容 |
| text() | 获取元素的文本内容 | |
| text(val) | val：元素的文本内容 | 设置元素的文本内容 |
示例：
var strHTML = $("#divContainer").html(); // 获取HTML内容
var strText = $("#divContainer").text(); // 获取文本内容
$("#divHTML").html(strHTML); // 设置HTML内容
$("#divText").text(strText); // 设置文本内容
3. 获取/设置元素值
语法格式：
val([val|fn|arr])
其中，参数
无参数：获取元素的值
val：要设置的值
function(index, value)：函数返回一个要设置的值。参数：index为元素在集合中的索引位置，text为原先的text值。
array：用于 check/select 的值
示例：
$("input").val();
$("input").val("hello world!");
$("input:text.items").val(function () {
return this.value + ' ' + this.className;
});
示例：array
<select id="single">
<option>item1</option>
<option>item2</option>
<option>item3</option>
<option>item4</option>
<option>item5</option>
<option>item6</option>
</select>
<script type="text/javascript">
$(function () {
$("#single").val("item2");;
});
</script>
<select id="multiple" multiple="multiple">
<option>item1</option>
<option>item2</option>
<option>item3</option>
<option>item4</option>
<option>item5</option>
<option>item6</option>
</select>
$("#multiple").val(["item2", "item5"]);
<select id="multiple" multiple="multiple">
<option selected="selected">item1</option>
<option>item2</option>
<option selected="selected">item3</option>
<option>item4</option>
<option selected="selected">item5</option>
<option>item6</option>
</select>
$("#multiple").val().join(",")
示例：checkbox、radio
<input type="checkbox" value="check1" /> check1
<input type="checkbox" value="check2" /> check2
<input type="radio" value="radio1" /> radio1
<input type="radio" value="radio2" /> radio2
$("input").val(["check2", "radio1"]);
4. 元素样式操作
4.1 直接设置元素样式属性
语法格式：
css( name | pro | [,val | fn] )
其中，参数
name：样式属性名称
properties：要设置为样式属性的名/值对
name,value：样式属性名，样式属性值
name,function(index, value)：
name：属性名
function(index, value)：函数返回要设置的属性值。参数index为元素在对象集合中的索引位置，value是原先的属性值。
示例：
$("div").css("color");
$("div").css("color", "ff0011");
$("div").css({
"color": "#FF0011",
"background-color":"#FFFFEE"
});
$("div").click(function () {
$(this).css({
width: function (index, value) {
return parseFloat(value) * 1.2;
},
height: function (index, value) {
return parseFloat(value) * 1.2;
}
});
});
4.2 增加CSS类
语法格式：
addClass(class|fn)
其中，参数
class：一个或多个类名称，多个类名称之间使用空格分开。
function(index, class)：函数必须返回一个或多个空格分隔的类名。参数index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
示例：
$("li").addClass("item");
$("li").addClass("item selected");
$("li").addClass(function () {
return "Item-" + $(this).index();
});
4.3 切换类
语法格式：
toggleClass(class|fn[,sw])
其中，参数
class：类名称，当元素中包含class的CSS类时，删除该类，否则添加该类名称。
示例：
<script type="text/javascript">
$(function () {
$("li").bind("click",function(){
$(this).toogleClass("selected");
});
});
</script>
4.4 删除类
语法格式：
removeClass([class|fn])
其中，参数
class：一个或多个类名称，多个类名称之间使用空格分开。如果没有类名，则删除元素的全部类。
function(index, class)：函数必须返回一个或多个空格分隔的类名。参数index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
示例：
$("li").removeClass("selected");
$("li").removeClass("item selected");
$("li").removeClass(); // 删除元素全部类
// 删除元素上与前面重复的class
$("li").removeClass(function() {
return $(this).prev().attr("class");
});
5. 创建节点元素
函数$()用于动态创建页面元素，语法格式：
$(html)
其中，参数
html：用于动态创建DOM元素的HTML标记字符串。
示例：
<script type="text/javascript">
$(function () {
$("body").html("<ul><li class='item'>选项1</li><li class='item selected'>选项2</li><li class='item'>选项3</li></ul>")
});
</script>
6. 插入节点
6.1 内部插入节点
内部插入节点方法表：
| 语法格式 | 参数说明 | 功能描述 |
|---|---|---|
| append(content) | content：追加到目标中的内容 | 向所选元素的结尾（仍然在内部）插入指定内容 |
| append(function(index, html)) | 通过function函数返回需要追加到目标中的内容 | 向所选择元素的结尾（仍然在内部）插入function函数所返回的内容 |
| appendTo(content) | content：追加到目标中的内容 | 把所有选取的元素追加到另一个指定的元素集合中 |
| prepend(content) | content：前置到目标中的内容 | 向所选元素的开头（仍然在内部）插入指定内容 |
| prepend(function(index, html)) | 通过function函数返回需要前置到目标中的内容 | 向所选择元素的开头（仍然在内部）插入function函数所返回的内容 |
| prependTo(content) | content：前置到目标中的内容 | 把所有选取的元素前置到另一个指定的元素集合中 |
6.1.1 append(content | fn)
语法格式：
append(content | fn)
向选取的元素内部追加内容，其中，参数
content：要追加到目标中的内容
function(index, html)：返回一个HTML字符串，用于追加到每一个匹配元素的里边。
index-可选：对象在这个集合中的索引值
html-可选：被选取元素原先的html内容
示例：append(content)
$(selector).append(content)
初始HTML：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
</ul>
<script type="text/javascript">
$(function () {
$("ul").append("<li class='item'>选项3</li>");
});
</script>
运行结果：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
示例：append(function(index,html))
$(selector).append(function(index,html))
<script type="text/javascript">
$(function () {
$("ul").append(function () {
return "<li class='item'>选项3</li>";
});
});
</script>
6.1.2 appendTo(content)
语法格式：
appendTo(content)
在被选元素的结尾（仍然在内部）插入指定内容。其中，参数
content：要追加到目标中的内容
append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
示例：appendTo(content)
$(content).appendTo(selector)
其中，参数
content：需要插入的内容
selector：选取的需要追加内容的元素
<script type="text/javascript">
$(function () {
$("<li class='item'>选项3</li>").appendTo("ul");
});
</script>
6.1.3 prepend(content | fn)
语法格式：
prepend(content | fn)
向选取的元素内部前置内容，其中，参数
content：要前置到目标中的内容
function(index, html)：返回一个HTML字符串，用于前置到每一个匹配元素的里边。
index-可选：对象在这个集合中的索引值
html-可选：被选取元素原先的html内容
示例：prepend(content)
$(selector).prepend(content)
初始HTML：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
</ul>
<script type="text/javascript">
$(function () {
$("ul").prepend("<li class='item'>选项0</li>");
});
</script>
运行结果：
<ul>
<li class="item">选项0</li>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
</ul>
示例：prepend(function(index,html))
$(selector).prepend(function(index,html))
<script type="text/javascript">
$(function () {
$("ul").prepend(function () {
return "<li class='item'>选项0</li>";
});
});
</script>
6.1.4 prependTo(content)
语法格式：
prependTo(content)
在被选元素的开头（仍然在内部）插入指定内容。其中，参数
content：要前置到目标中的内容
prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。
示例：prependTo(content)
$(content).prependTo(selector)
其中，参数
content：需要插入的内容
selector：选取的需要前置内容的元素
<script type="text/javascript">
$(function () {
$("<li class='item'>选项0</li>").prependTo("ul");
});
</script>
6.2 外部插入节点
外部插入节点方法表：
| 语法格式 | 参数说明 | 功能描述 |
|---|---|---|
| after(content) | content：插入目标元素外部后面的内容 | 向所选元素外部后面插入指定内容 |
| after(function) | 通过function函数返回插入目标外部后面的内容 | 向所选元素外部后面插入function函数所返回的内容 |
| before(content) | content：插入目标元素外部前面的内容 | 向所选元素外部前面插入指定内容 |
| before(function) | 通过function函数返回插入目标外部前面的内容 | 向所选元素外部前面插入function函数所返回的内容 |
| insertAfter(content) | content：插入目标元素外部后面的内容 | 将所选择的元素插入到另一个指定的元素外部后面 |
| insertBefore(content) | content：插入目标元素外部前面的内容 | 将所选择的元素插入到另一个指定的元素外部前面 |
6.2.1 after(content | fn)
after(content | fn) 方法在被选元素后插入指定的内容。
语法：
$(selector).after(content)
其中，参数
content：需要插入的内容（可包含 HTML 标签）。
$(selector).after(function(index))
其中，参数
function(index)：函数必须返回一个待插入的html字符串。
index - 可选：接收选择器的 index 位置。
示例：after(content)
初始HTML：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$(".selected").after("<li class='item'>选项0</li>");
});
</script>
运行结果：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项0</li>
<li class="item">选项3</li>
</ul>
示例：after(function(index))
<script type="text/javascript">
$(function () {
$(".selected").after(function () {
return "<li class='item'>选项0</li>";
});
});
</script>
6.2.2 before(content | fn)
before(content | fn)方法在被选元素前插入指定的内容。
语法：
$(selector).before(content)
其中，参数
content：需要插入的内容（可包含 HTML 标签）。
$(selector).before(function(index))
其中，参数
function(index)：函数必须返回一个待插入的html字符串。
index - 可选：接收选择器的 index 位置。
示例：before(content)
初始HTML：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$(".selected").before("<li class='item'>选项0</li>");
});
</script>
运行结果：
<ul>
<li class="item">选项1</li>
<li class="item">选项0</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
示例：before(function(index))
<script type="text/javascript">
$(function () {
$(".selected").before(function () {
return "<li class='item'>选项0</li>";
});
});
</script>
6.2.3 insertAfter(content)
insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
语法：
$(content).insertAfter(selector)
其中，参数
content：指定要插入的内容。可能的值：选择器表达式 \ HTML 标记
selector：指定在何处插入被选元素。
示例：insertAfter HTML标记
初始HTML：
<ul>
<li id="item-01" class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$("<li class='item'>选项0</li>").insertAfter(".selected");
});
</script>
运行结果：
<ul>
<li id="item-01" class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项0</li>
<li class="item">选项3</li>
</ul>
示例：insertAfter选择器表达式
初始HTML：
<ul>
<li id="item-01" class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$("#item-01").insertAfter(".selected");
});
</script>
运行结果：
<ul>
<li class="item selected">选项2</li>
<li id="item-01" class="item">选项1</li>
<li class="item">选项3</li>
</ul>
6.2.4 insertBefore(content)
insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
语法：
$(content).insertBefore(selector)
其中，参数
content：指定要插入的内容。可能的值：选择器表达式 \ HTML 标记
selector：指定在何处插入被选元素。
示例：insertBefore HTML标记
初始HTML：
<ul>
<li id="item-01" class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$("<li class='item'>选项0</li>").insertBefore(".selected");
});
</script>
运行结果：
<ul>
<li id="item-01" class="item">选项1</li>
<li class="item">选项0</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
示例：insertBefore选择器表达式
初始HTML：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
<li id="item-03" class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$("#item-03").insertBefore(".selected");
});
</script>
运行结果：
<ul>
<li class="item">选项1</li>
<li id="item-03" class="item">选项3</li>
<li class="item selected">选项2</li>
</ul>
7. 复制节点
clone() 方法生成被选元素的副本，包含子节点、文本和属性。
语法：
$(selector).clone(includeEvents)
其中，参数
includeEvents：可选，布尔值，true或者空，是否复制元素的所有事件处理。
示例：clone()
初始HTML：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$("li").click(function () {
$(this).after($(this).clone());
});
});
</script>
运行结果：
示例：clone(true)
<script type="text/javascript">
$(function () {
$("li").click(function () {
$(this).after($(this).clone(true));
});
});
</script>
以上示例，在复制出来的元素li，单击仍可继续复制自身li。
示例：clone() DOM中包含事件
初始HTML：
<ul>
<li class="item" onclick="$(this).after($(this).clone());">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$("li").click(function () {
$(this).after($(this).clone());
});
});
</script>
以上示例，在复制出来的第一个li元素，单击仍可继续复制自身li，初始HTML中其他li的复制元素则不能再复制自身。
<script type="text/javascript">
$(function () {
$("li").click(function () {
$(this).clone().insertAfter($(this));
});
});
</script>
8. 替换节点
8.1 replaceWith(content|fn)
replaceWith(content|fn)用指定的 HTML 内容或元素替换被选元素。
语法：
$(selector).replaceWith(content)
其中，参数：
selector：选取的需要替换的元素。
content：替换被选元素的内容。
可能的值：HTML 代码 - 比如 ("<div></div>")、新元素 - 比如 (document.createElement("div"))及已存在的元素 - 比如 ($(".div1"))。
已存在的元素不会被移动，只会被复制，并包裹被选元素。
示例：替换HTML代码
初始HTML：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$(".selected").replaceWith("<li class='item'>选项2</li>");
});
</script>
运行结果：
<ul>
<li class="item">选项1</li>
<li class="item">选项2</li>
<li class="item">选项3</li>
</ul>
示例：替换已存在的元素
初始HTML：
<ul>
<li id="item-01" class="item">选项1</li>
<li id="item-02" class="item selected">选项2</li>
<li id="item-03" class="item">选项3</li>
</ul>
<ul>
<li id="item-04" class="item">选项4</li>
<li id="item-05" class="item">选项5</li>
<li id="item-06" class="item">选项6</li>
</ul>
<script type="text/javascript">
$(function () {
$(".selected").replaceWith($("#item-05"));
});
</script>
运行结果：
<ul>
<li id="item-01" class="item">选项1</li>
<li id="item-05" class="item">选项5</li>
<li id="item-03" class="item">选项3</li>
</ul>
<ul>
<li id="item-04" class="item">选项4</li>
<li id="item-06" class="item">选项6</li>
</ul>
示例：replaceWith(function)
<script type="text/javascript">
$(function () {
$(".selected").replaceWith(function () {
return "<li id='item-02' class='item'>选项2</li>";
});
});
</script>
<script type="text/javascript">
$(function () {
$(".selected").replaceWith(function () {
return $("#item-03");
});
});
</script>
8.2 replaceAll(selector)
replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。
语法：
$(content).replaceAll(selector)
其中，参数：
selector：选取的需要替换的元素。
content：替换被选元素的内容。
可能的值：HTML 代码 - 比如 ("<div></div>")、新元素 - 比如 (document.createElement("div"))及已存在的元素 - 比如 ($(".div1"))。
replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。
示例：
初始HTML：
<ul>
<li id="item-01" class="item">选项1</li>
<li id="item-02" class="item selected">选项2</li>
<li id="item-03" class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$("#item-01").replaceAll($("#item-03"));
});
</script>
运行结果：
<ul>
<li id="item-02" class="item selected">选项2</li>
<li id="item-01" class="item">选项1</li>
</ul>
9. 包裹节点
包裹节点方法表：
9.1 wrap(html|element|fn)
wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。
语法：
$(selector).wrap(wrapper)
其中，参数：
selector：选取的需要替换的元素。
wrapper：包裹被选元素的内容。
可能的值：HTML 代码 - 比如 ("<div></div>")、新元素 - 比如 (document.createElement("div"))及已存在的元素 - 比如 ($(".div1"))。
已存在的元素不会被移动，只会被复制，并包裹被选元素。
$(selector).wrap(function())
其中，参数
function()：返回包裹元素的函数。
示例：wrap() HTML代码
初始HTML：
<div id="container">
<span>选项1</span>
<span>选项2</span>
<span>选项3</span>
</div>
<script type="text/javascript">
$(function () {
$("#container span").wrap("<div class='item'></div>");
});
</script>
运行结果：
<div id="container">
<div class="item">
<span>选项1</span>
</div>
<div class="item">
<span>选项2</span>
</div>
<div class="item">
<span>选项3</span>
</div>
</div>
示例：wrap(function)
初始HTML：
<div id="container">
<span>选项1</span>
<span>选项2</span>
<span>选项3</span>
</div>
<script type="text/javascript">
$(function () {
$("#container span").wrap(function () {
return "<div class='item' title='" + $(this).text() + "'></div>";
});
});
</script>
运行结果：
<div id="container">
<div class="item" title="选项1">
<span>选项1</span>
</div>
<div class="item" title="选项2">
<span>选项2</span>
</div>
<div class="item" title="选项3">
<span>选项3</span>
</div>
</div>
9.2 wrapAll(html|ele)
wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。
语法：
$(selector).wrapAll(wrapper)
其中，参数
wrapper：包裹被选元素的内容。
可能的值：HTML 代码 - 比如 ("<div></div>")、新元素 - 比如 (document.createElement("div"))及已存在的元素 - 比如 ($(".div1"))。
示例：wrapAll(html)
初始HTML：
<div id="container">
<span>选项1</span>
<span>选项2</span>
<span>选项3</span>
</div>
<script type="text/javascript">
$(function () {
$("#container span").wrapAll("<div class='item'></div>");
});
</script>
运行结果：
<div id="container">
<div class="item">
<span>选项1</span>
<span>选项2</span>
<span>选项3</span>
</div>
</div>
示例：wrapAll(element)
初始HTML：
<div id="container">
<span>选项1</span>
<span>选项2</span>
<span>选项3</span>
</div>
<script type="text/javascript">
$(function () {
$("#container span").wrapAll(document.createElement("div"));
});
</script>
运行结果：
<div id="container">
<div>
<span>选项1</span>
<span>选项2</span>
<span>选项3</span>
</div>
</div>
9.3 wrapInner(htm|element|fn)
wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。
语法：
$(selector).wrapInner(wrapper)
其中，参数
wrapper：包裹被选元素的内容。
可能的值：HTML 代码 - 比如 ("<div></div>")、新元素 - 比如 (document.createElement("div"))及已存在的元素 - 比如 ($(".div1"))。
$(selector).wrapInner(function())
其中，参数
function：返回包围元素的函数。
示例：wrapInner(html)
初始HTML：
<div id="container">
<ul>
<li class="item">选项1</li>
<li class="item">选项2</li>
<li class="item">选项3</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("li").wrapInner("<span></span>");
});
</script>
运行结果：
<div id="container">
<ul>
<li class="item">
<span>选项1</span>
</li>
<li class="item">
<span>选项2</span>
</li>
<li class="item">
<span>选项3</span>
</li>
</ul>
</div>
示例：wrapInner(element)
<script type="text/javascript">
$(function () {
$("li").wrapInner(document.createElement("span"));
});
</script>
示例：wrapInner(function)
<script type="text/javascript">
$(function () {
$("li").wrapInner(function () {
return document.createElement("span");
});
});
</script>
9.4 unwrap()
unwrap() 方法删除被选元素的父元素。
语法：
$(selector).unwrap()
示例：
初始HTML：
<div id="container">
<ul>
<li class="item">
<div>
<span>选项1</span>
</div>
</li>
<li class="item">
<div>
<span>选项2</span>
</div>
</li>
<li class="item">
<div>
<span>选项3</span>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("span").unwrap();
});
</script>
运行结果：
<div id="container">
<ul>
<li class="item">
<span>选项1</span>
</li>
<li class="item">
<span>选项2</span>
</li>
<li class="item">
<span>选项3</span>
</li>
</ul>
</div>
10. 删除元素
jQuery提供两种可以删除元素的方法：remove()和empty()。empty()方法并非真正意义上的删除，该方法清空全部的节点或节点所包括的所有后代元素，并非删除节点和元素。
10.1 remove([expr])
remove() 方法移除被选元素，包括所有文本和子节点。
语法格式：
$(selector).remove([expr])
其中，参数
expr - 可选：筛选元素的jQuery表达式
示例：$(selector).remove()
初始HTML：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$(".selected").remove();
});
</script>
运行结果：
<ul>
<li class="item">选项1</li>
<li class="item">选项3</li>
</ul>
示例：$(selector).remove([expr])
<script type="text/javascript">
$(function () {
$("li").remove(".selected");
});
</script>
10.2 empty()
empty() 方法从被选元素移除所有内容，包括所有文本和子节点。
语法结构：
$(selector).empty()
示例：
初始HTML：
<ul>
<li class="item">选项1</li>
<li class="item selected">选项2</li>
<li class="item">选项3</li>
</ul>
<script type="text/javascript">
$(function () {
$("ul").empty();
});
</script>
运行结果：
<ul></ul>
jQuery系列：DOM操作的更多相关文章
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
- js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- 03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- Jquery所有Dom操作汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery系列 第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...
- HTML 学习笔记 JQuery（DOM 操作）
一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...
- 解密jQuery内核 DOM操作的核心函数domManip
domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...
随机推荐
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
- 背后的故事之 - 快乐的Lambda表达式（一）
快乐的Lambda表达式(二) 自从Lambda随.NET Framework3.5出现在.NET开发者眼前以来,它已经给我们带来了太多的欣喜.它优雅,对开发者更友好,能提高开发效率,天啊!它还有可能 ...
- InnoDB关键特性学习笔记
插入缓存 Insert Buffer Insert Buffer是InnoDB存储引擎关键特性中最令人激动与兴奋的一个功能.不过这个名字可能会让人认为插入缓冲是缓冲池中的一个组成部分.其实不然,Inn ...
- Android数据加密之MD5加密
前言: 项目中无论是密码的存储或者说判断文件是否是同一文件,都会用到MD5算法,今天来总结一下MD5加密算法. 什么是MD5加密? MD5英文全称“Message-Digest Algorithm 5 ...
- jQuery动画-圣诞节礼物
▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...
- 分布式系列文章——从ACID到CAP/BASE
事务 事务的定义: 事务(Transaction)是由一系列对系统中数据进行访问与更新的操作所组成的一个程序执行逻辑单元(Unit),狭义上的事务特指数据库事务. 事务的作用: 当多个应用程序并发访问 ...
- PHP中PDO事务的使用方法
事务 (Transaction) 是操作数据库中很重要的一个功能, 它可以让你预定一条, 或者一系列 SQL 语句, 然后一起执行. 在执行的过程中, 如果其中的某条执行失败, 可以回滚所有已更改的操 ...
- PHP好用但又容易忽略的小知识
1.PHP函数之判断函数是否存在 当我们创建了自定义函数,并且了解了可变函数的用法,为了确保程序调用的函数是存在的,经常会先使用function_exists判断一下函数是否存在.同样的method_ ...
- maven 中snapshot版本和release版本的区别
maven中的仓库分为两种,snapshot快照仓库和release发布仓库.snapshot快照仓库用于保存开发过程中的不稳定版本,release正式仓库则是用来保存稳定的发行版本.定义一个组件/模 ...
- 微信小程序开发日记——高仿知乎日报（下）
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...