目录
一、遍历元素
1、概述
2、语法
二、创建元素
三、添加元素
四、删除元素
五、思维导图
一、遍历元素
1、概述
jQuery隐式迭代是对同一类元素做了同样的操作。
如果相对同一元素做不同的操作，就需要用到遍历
2、语法
遍历分为两种
2.1
$("div").each(function( index, domele){ })
元素 $("div")写在外面，主要用于遍历 元素
1、each( )方法遍历匹配的每一个元素，主要用DOM处理。
2、里面的回调函数有两个参数：index是每一个元素的索引；domele是每一个DOM元素对象，不是jQuery对象。
3、如果想要使用jQuery方法，需要给这个DOM元素转换为jQuery对象 $(domele)
$("div").each(function(index, domele) {
console.log(index);
console.log(domele);
})
------> 1
<div></div>
2
<div></div>
遍历完这一遍，返回去重新再遍历2.2
$.each(object ,function( index ,domele){ })元素 $("div") / 对象 写在里面。
$.each( )可以遍历任何对象，主要用于遍历数据，处理数据。
如果数据是数字类型的，能直接遍历出数字类型。
$.each({
name: 'andy',
age: 18
}, function(index, domele) {
console.log(index);
console.log(domele);
})
----->name
andy
age
18
把对象中的 "属性：属性值" 都遍历出来二、创建元素
$("<li></li>")；
动态创建一个元素
三、添加元素
生成元素是父子级关系
1、内部后添加
element.append("内容")；
将内容放在匹配元素内部最后面。（子元素）
在下图中明显看出是在 .nav盒子中添加子元素，且添加的子元素在原有元素的后面
<ul>
<li></li>
<li></li>
<li class="nav">
<div class="before">原有元素</div>
</li>
<li></li>
<li></li>
</ul>
<script>
$(function() {
var lili = $("<li>新创建的元素</li>");
$(".nav").append(lili);
})
</script>
2、内部前添加
element.prepend("内容")；
在下图中明显看出是在 .nav盒子中添加子元素，且添加的子元素在原有元素的前面
<ul>
<li></li>
<li></li>
<li class="nav">
<div class="before">原有元素</div>
</li>
<li></li>
<li></li>
</ul>
<script>
$(function() {
var lili = $("<li>新创建的元素</li>");
$(".nav").prepend(lili);
})
</script>
生成元素是兄弟关系
1、把内容放在目标内容后边（兄弟级关系）
element.after("内容")；
在下图可清晰看出是在 .nav 盒子后面生成一个兄弟元素节点
<ul>
<li></li>
<li></li>
<li class="nav">
<div class="before">原有元素</div>
</li>
<li></li>
<li></li>
</ul>
<script>
$(function() {
var lili = $("<li>新创建的元素</li>");
$(".nav").after(lili);
})
</script>
2、把内容放在目标内容前边（兄弟级关系）
element.before("内容")
内容相似，不再展示
四、删除元素
1、删除匹配的元素
element.remove( )；
2、删除匹配的元素集合中所有的子节点(元素节点，属性节点，文本节点（文字、空格、换行）)
element.empty( )；
3、清空匹配的元素内容，和empty( )效果相同，html(" ")还能赋值。
element.html(" ")；
五、思维导图
