javascript-jQuery(属性操作/文本操作/元素操作/位置操作)

jQuery属性操作

设置和获取元素固有属性：prop（） 设置或获取元素自定义属性值attr（）

   都挺好
    
    
woshidiv
    

数据缓存data()

该方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

           //3.数据缓存data(),数据存放在元素的内存里
            $("span").data("uname", "adny");
            console.log($("span").data("uname"));

案例：全选功能

$(function () {
    //1.全选 全不选功能模块
    //就是把全选按钮checkall的状态赋值给三个小按钮j-checkbox
    //事件可以使用change
    $(".checkall").change(function () {
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
    })
    //2.如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function () {
        //$(".j-checkbox").length这个是小复选框的个数
        if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    })

})

jQuery内容文本值

    

        我是内容
    
    
    

案例：增减商品数量

//3.增减数量
    $(".increment").click(function () {
        //得到兄弟文本框
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);

    });
    $(".decrement").click(function () {
        //得到兄弟文本框
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);

    })

修改商品小计

   //3.增减数量
    $(".increment").click(function () {
        //得到兄弟文本框
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        //计算商品小计模块 当前商品价格
        var p = $(this).parent().parent().siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        // console.log(p);
        $(this).parent().parent().siblings(".p-sum").html("￥" + p * n);


    });
    $(".decrement").click(function () {
        //得到兄弟文本框
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        //计算商品小计模块 当前商品价格
        var p = $(this).parent().parent().siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        // console.log(p);
        $(this).parent().parent().siblings(".p-sum").html("￥" + p * n);

    });

针对$(this).parent().parent().siblings(".p-price").html() 可以采用parents()返回指定的祖先   保留2位小数toFixed(2) bug：当修改文本框里面的值的时候，小计不变

   //4.用户修改文本框的值
    $(".itxt").change(function () {
        //先得到文本框里面的值 乘以 当前商品的单价
        var n = $(this).val();
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        $(this).parent().parent().siblings(".p-sum").html("￥" + (p * n).toFixed(2));
    })

jQuery元素操作

遍历元素 each()   遍历数据 $.each()

    
1
    
2
    
3
    

案例：计算总件数和总额

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));
    }

创建元素 添加元素 删除元素

$(function () {
            //1.创建元素
            var li = $("
我是后来创建的li
");
            //2.添加元素
            //（1）内部添加 
            // $("ul").append(li);//放到内容的后面
            $("ul").prepend(li);//放到内容的前面
            //（2）外部添加
            var div = $("
我是后来添加的div
")
            // $("div").after(div);
            $("div").before(div);
            //3.删除元素
            // $("ul").remove();//可以删除匹配的元素 自杀
            $("ul").empty();//删除匹配元素里面的子节点，杀孩子
            $("ul").html("");//删除匹配元素里面的子节点，杀孩子
}

案例:删除商品模块

 //6.删除商品模块
    //（1）商品后面的删除按钮
    $(".p-action ").click(function () {
        $(this).parents(".cart-item").remove();
        getSum();
    })
    //（2）删除选中的商品
    $(".remove-batch").click(function () {
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    })
    //（3）清空购物车 删除全部商品
    $(".clear-all").click(function () {
        $(".cart-item").remove();
        getSum();
    })

案例：选定商品可以添加背景颜色

$(".checkall").change(function () {
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            //让所有商品添加check-cart-item的类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            $(".cart-item").removeClass("check-cart-item")
        }
    })

jQuery尺寸、位置操作

注：以上参数为空，则获取相应值，返回数字型 如果参数为数字，则为修改相应值 参数不必写单位   位置偏移offset和position

           //1.获取设置距离文档的位置（偏移）offset
            console.log($("div").offset());
            console.log($("div").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
            //2.获取距离带有定位父级位置（偏移）position，如果没有带有定位的父级，则已文档为准
            //该方法不能设置偏移。
            console.log($(".son").position());

页面滚动

返回顶部