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

jQuery属性操作

设置和获取元素固有属性：prop（）

设置或获取元素自定义属性值attr（）

   <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1">woshidiv</div>
    <script>
        $(function () {
            //element.prop("属性名")获取元素固有属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function () {
                console.log($(this).prop("checked"));
            })
            //2.自定义属性通过attr()获取
            console.log($("div").attr("index"));
            console.log($("div").attr("index", 10));

        })
    </script>

数据缓存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内容文本值

    <div>
        <span>我是内容</span>
    </div>
    <input type="text" name="" id="" value="请输入">
    <script>
        //1.获取设置元素内容html()
        console.log($("div").html());
        $("div").html("123");
        //2.获取设置元素文本内容 text()
        console.log($("div").text());
        $("div").text("123");
        //3.设置表单值 val()
        console.log($("input").val());
        $("input").val("123");
    </script>

案例：增减商品数量

//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()

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            var sum = 0;
            //1.each()遍历元素
            var arr = ["red", "green", "blue"];
            $("div").each(function (index, domEle) {
                //回掉函数第一个参数一定是索引号 可以自己制定索引号名称
                // console.log(index);
                //回掉函数第二个参数一定是dom元素对象
                //dom对象没有css方法
                $(domEle).css("color", arr[index]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            //2.$.each()遍历元素，主要用于处理数据
            $.each($(arr), function (index, ele) {
                console.log(index);
                console.log(ele);

            })
            $.each({
                name: "andy",
                age: 18
            }, function (i, ele1) {
                console.log(i);
                console.log(ele1);
            })

        })
    </script>

案例：计算总件数和总额

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>我是后来创建的li</li>");
            //2.添加元素
            //（1）内部添加 
            // $("ul").append(li);//放到内容的后面
            $("ul").prepend(li);//放到内容的前面
            //（2）外部添加
            var div = $("<div>我是后来添加的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尺寸、位置操作

   <div></div>
    <script>
        $(function () {
            //1.width()/height() 获取设置元素宽高的大小
            console.log($("div").width());
            $("div").width(300);
            //2.innerWidth() 包含padding
            console.log($("div").innerWidth());
            //3.outerWidth() 包含padding+border
            console.log($("div").outerWidth());
            //4.outerWidth(true) 包含padding+border+margin
            console.log($("div").outerWidth(true));
        })
    </script>

注：以上参数为空，则获取相应值，返回数字型

如果参数为数字，则为修改相应值

参数不必写单位

 

位置偏移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());

页面滚动

<div class="back">返回顶部</div>
    <div class="container"></div>
    <script>
        $(function () {
            //设置
            $(document).scrollTop(100);
            //被卷去的头部scrollTop()/srollLeft()
            //页面滚动
            var boxTop = $(".container").offset().top;
            $(window).scroll(function () {
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            })
            //返回顶部
           $(".back").click(function(){
               //不能是文档而是html和body元素做动画
               $("body,html").stop().animate({
                   scrollTop:0
               })
           })
        })
    </script>