元素操作
主要是遍历、创建、添加、输出元素操作
遍历元素
jQuery隐式迭代是对同一类的元素做了相同的操作。如果想要给同一类的元素做不同的操作,就需要用到遍历。
语法1:
$("div").each(function(index,domEle){xxx;})
- each()方法遍历匹配的每一个元素。只要用DOM处理。each每一个
- 里面的回调函数又2个参数:index 是每个元素的索引号;demEle是每个DOM元素对象,不是jQuery对象
- 所以想要使用jQuery方法,需要给这个dom元素转换为jQuery对象 $(domEle)
语法2:
$.each(object,function(index,element){xxx;})
- $each()方法可用于遍历任何对象。主要用于处理数据,比如数组,对象
- 里面的函数有两个参数:index 是每个元素的索引号;element 遍历内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
// index 和 domEle可以自己命名
var sum = 0;
var arr = ["red", "yellow", "blue"];
$("div").each(function (index, domEle) {
// console.log(index); index 返回每个元素索引号
// console.log(domEle); domEle返回每个DOM元素对象 想要使用jQuery方法,需要给这个dom元素转换为jQuery对象 $(domEle)
$(domEle).css("color", arr[index]); // 给每个元素 修改成不一样的颜色
sum += parseFloat(($(domEle).text())); // 求每个元素中的内容的和
});
console.log(sum);
$.each(arr,function (index,element) {
console.log(index); //index 返回每个元素索引号
console.log(element); //element返回数组中的每个内容
});
var obj={
name:"andy",
age:18
};
$.each(obj,function (i,ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
</script>
</body>
</html>
创建元素
$("<li></li>"); //创建完之后,记得添加!!!
添加元素
内部添加
element.append("内容") // 把内容放到匹配元素内部最后面,类似原生appendChild
element.prepe("内容") // 把内容放到匹配元素内部最前面
外部添加
element.after("内容") // 把内容放入目标元素最后面
element.before("内容") // 把内容放入目标元素最前面
删除元素
element.remove("内容") // 删除匹配元素(本身)
element.empty("内容") // 删除匹配元素集合中所有的子节点
element.html("") // 清空匹配的元素内容
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素
// (1) 内部添加
// $("ul").append(li); 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// (2) 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
})
</script>
</body>