jQuery属性操作_内容文本值_元素操作_购物车案例

五、属性操作

1.设置或获取元素固有属性

prop()

element.prop("属性名") 
element.prop("属性名","属性值")

2.设置或获取元素自定义属性

attr()

3.数据缓存

data()
这个里面的数据存放在元素的内存里面 返回数字型

六、内容文本值

1.普通元素内容

html()

相当于innerHTML

html("") 设置内容

2.普通元素文本内容

text()

相当于innerText

3.获取设置表单值

val()

相当于value

七、元素操作

1.遍历元素

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

index：索引号

domEle：dom元素对象

$.each($("arr"),function(i,ele))

遍历数据用第二个比较好

2.创建元素

var li = $("<li>xxx</li>")

3.添加元素

（1）内部添加

$("ul").append(li)	//把内容放入匹配元素的最后面

$("ul").append(li)	//把内容放入匹配元素的最前面

（2）外部添加

var div = $("<div>yyyy</div>")
$(".test").after(div)		//放置在test的后面
$(".test").before(div)		//放置在test的前面

（4）删除元素

$("ul").remove()	//删除匹配元素
$("ul").empty()		//删除子节点

购物车案例

html结构如下

功能

1. 两个全选复选框选中时，实现每个复选框都被选中；当三个复选框都被选中时，两个全选框也被选中。

$(".checkall").change(function(){
    //将复选框checked值与全选值相同
    $(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
    getSum();
    if($(this).prop("checked")){
        $(".item").addClass("check-item");		//给被选中的商品添加样式
    }else{
        $(".item").removeClass("check-item");
    }
});
$(".j-checkbox").change(function(){
    if($(".j-checkbox:checked").length === $(".j-checkbox").length){
        $(".checkall").prop("checked",true)	  //:checked选择器返回复选框选择的个数
    }else{
        $(".checkall").prop("checked",false)
    }
    getSum();
    if($(this).prop("checked")){
        $(this).parent().parent().addClass("check-item");//给被选中的商品添加样式
    }else{
        $(this).parent().parent().removeClass("check-item");
    }
});

2. 点击数量+和-时，数量增减，小计变化。

$(".increase").click(function(){
    //获取原本数量
    var n = $(this).siblings(".num").prop("value");
    n++;
    //更改增加后的数量
    $(this).siblings(".num").prop("value",n);
    //获取单价
    var price = $(this).parent().siblings(".price1").text().substr(1);
    //更改小计
    $(this).parent().siblings(".price2").text("￥"+(n*price).toFixed(2))
    getSum()
});
//减少与增加类似
$(".decrease").click(function(){
    var n = $(this).siblings(".num").prop("value");
    //增加判断，当数量只有一个时，不可再减
    if(n==1){
        return false
    }
    n--;
    $(this).siblings(".num").prop("value",n);
    var price = $(this).parent().siblings(".price1").text().substr(1);
    $(this).parent().siblings(".price2").text("￥"+(n*price).toFixed(2))
    getSum()
});

3. 直接输入数字改变数量时，小计变化。

$(".num").change(function(){
    var number = $(this).prop("value");
    var price = $(this).parent().siblings(".price1").text().substr(1);
    $(this).parent().siblings(".price2").text("￥"+(number*price).toFixed(2))
    getSum()
});

4. 记录总件数和总价getSum()，在多处需被调用。

getSum();
function getSum(){
    var count = 0; //计算总件数
    var money = 0; //计算总价
    //遍历被选中商品的“数量”输入框，获取其数量值计入总件数
    $(".j-checkbox:checked").parent().siblings(".number").find(".num").each(function(i,ele){
        count += parseInt($(ele).val());
    });
    $(".numm").text(count);
    //遍历被选中商品的小计值，将其计入总价
    $(".j-checkbox:checked").parent().siblings(".price2").each(function(i,ele){
        money+= parseFloat($(ele).text().substr(1));
    })
    $(".sumPrice").text("￥"+money.toFixed(2));
}

5. 删除按钮、删除选中商品、清理购物车

//删除
$(".delete a").click(function(){
    $(this).parent().parent().remove();
    getSum();
});
//删除选中商品
$(".deletes a").click(function(){
    $(".j-checkbox:checked").parent().parent().remove();
    getSum();
});
//清理购物车
$(".clearAll").click(function(){
    $(".price1").parent().remove()
    getSum();
})