6.jQuery元素操作

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

6.1.遍历元素each()

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

$("div").css("color","red")是给所有获取到的div字体设置为红色。假设有三个div想要让三个盒子字体颜色不同则隐式迭代不能实现。

语法1：

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

each（）方法遍历匹配的每一个元素，主要用DOM处理。

参数：

  1. index：是每个元素的索引号
  2. domEle：返回每一个dom元素(是一个dom元素对象)，因此要使用jQuery方法，需要将这个dom元素转换为jQuery对象$(domEle)
 1 <div>1</div>
 2     <div>2</div>
 3     <div>3</div>
 4 
 5     <script>
 6         var arr = ["red", "green", "blue", "pink"];
 7         $(function () {
 8             $("div").each(function (index, domEle) {
 9                 //回调函数第一个是索引号
10                 // jQuery遍历会自动给每个元素添加上索引号
11                 console.log(index); // 获取的是0 1 2 
12                 console.log(domEle); // 获取的是每个dom元素
13                 $(domEle).css("color", arr[index]);
14                 //domEle是DOM对象，不能用jQuery方法
15             })
16         })
17     </script>

 语法2：

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

 obj为遍历对象，$("div")，数组，对象都可。

 $.each()方法可以用语遍历任何对象，主要用于数据处理，比如数组、对象。

$.each($(arr),function(i,ele){
    console.log(i); // 获取到arr里每个元素的索引号
    console.log(ele); // 获取到arr里每个值
})

当遍历的是对象时，i输出的是属性名

 

6.1.1 购物车案例——总额模块

① 核心思路：把所有文本框里面的值相加就是总计数量，总额同理。

② 文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可。

③ 点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额。

④ 因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可。

⑤ 注意：总计是文本框里面的值，相加用val()，总额是普通元素的内容，用text()。

注意相加字符型转数字型

 

 function getSum() {
        var count = 0; // 计算总件数 
        var money = 0; // 计算总价钱
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

最后在增加减少商品事件中记得调用getSum();

 

6.2 创建元素

语法：

$("<li></li>"); // 动态创建了一个li标签

6.3 添加元素

1.内部添加

// 把内容放入到元素的最后面
element.append("内容");
// 把内容放入到元素的最前面
element.prepend("内容");

示例;

$(function(){
// 向ul中动态添加了一个li标签 且放到元素内部的最后面
$("ul").append($("<li>5</li>"));
// 又向ul中动态添加了一个li标签 且放到元素内部的最前面
$("ul").prepend($("<li>6</li>"));
})

3.外部添加

在每个匹配的元素之后插入内容。

// 把内容放到元素最后面
element.after("内容");
// 把内容放到元素最前面
element.before("内容");

示例;

<div class="car">我是原来的div</div>
<script>
$(function(){
// 先创建div元素
var box = $("<div>我是新添加的div</div>");
// 外部添加元素 且添加到元素的最后面
$(".car").after(box);
})
// 外部添加元素 且添加到元素的最前面
$(".car").before(box);
})
</script>

 

6.4 删除元素

语法：

// 删除匹配元素本身 自杀
element.remove(); 
// 删除匹配元素中所有的子节点 也就是删除孩子
element.empty();
// 清空匹配的元素内容 也是删除孩子
element.html("");

 

 

 

完整购物车代码可以参考：javascript:void(0)