jQuery：jQuery元素操作（遍历、创建、添加、删除元素）

主要是遍历、创建、添加、删除元素操作。

1.遍历元素
jQuery的隐式迭代是对同一类元素做了同样的操作，如果想给同一类元素做不同操作，就需要用到遍历，隐式迭代并不能满足。

<script>
$(function(){
// jQuery的隐式迭代只能将字体全部设置成红色
	$(".car").css("color","red");
})
</script>

那如果想要第一个字体红色，第二个字体蓝色，第三个字体粉色呢？因此还是需要用到遍历。

遍历语法1：

$("div").each(function(index,domEle){
	......
});

参数：
index：是每个元素的索引号（可以自己指定索引号的名称）
domEle：返回每一个dom元素(是一个dom元素对象)，因此要使用jQuery方法，需要将这个dom元素转换为jQuery对象$(domEle)
each()方法主要用于DOM处理。

遍历语法1的代码示例：

<div class="car">
	<ul>
		<li>单价</li>
		<li>数量</li>
		<li>小计</li>
		<li>操作</li>
	</ul>
</div>
<script>
var arr = ["red","green","blue","pink"];
$(function(){
	$(".car ul li").each(function(i,domEle){
		// jQuery遍历会自动给每个元素添加上索引号
		console.log(i); // 获取的是0 1 2 3，因为有4个li
		console.log(domEle); // 获取的是每个dom元素li
		// 4个li分别遍历了arr中的4个颜色
		$(domEle).css("color",arr[i]);
	})
})
</script>

遍历语法2：

$.each(obj,function(index,element){
	......
});

参数：
index：是每个元素的索引号
element：遍历内容
$.each()方法可以用语遍历任何对象，主要用于数据处理，比如数组、对象。

遍历语法2的代码示例：

<div class="car">
	<ul>
		<li>单价</li>
		<li>数量</li>
		<li>小计</li>
		<li>操作</li>
	</ul>
</div>
<script>
var arr = ["red","green","blue","pink"];
$(function(){
$.each($(".car ul li"),function(i,ele){
	console.log(i); // 获取的还是0 1 2 3，因为有4个li
	console.log(ele); // 获取的是每个dom元素li
})
// 不同的是$.each()主要遍历数据，因此可以遍历数组，比上个方法更好用
$.each($(arr),function(i,ele){
	console.log(i); // 获取到arr里每个元素的索引号
	console.log(ele); // 获取到arr里每个值
})
// 也可以遍历对象
$.each({
	name:"Tom",
	age:21,
	sex:"男"
	},function(i,ele){
	console.log(i); // 获取到对象的属性名
	console.log(ele); // 获取到对象的属性值
})
</script>

因此遍历DOM对象用each()方法，如果遍历的是数组、对象可以用$.each()方法