写在前面

• 能够写出常用的jQuery选择器
• 能够操作jQuery样式
• 能够写出常用的jQuery动画
• 能够操作jQuery属性
• 能够操作jQuery元素
• 能够操作jQuery元素尺寸，位置

jQuery选择器

jQuery样式操作

jQuery效果

以上标题在第一篇已经讲过了

---

jQuery属性操作

设置或获取元素固有属性值

所谓元素固有属性就是元素本身自带的属性，比如< a>元素里面的href，比如< input>元素里面的type

设置或获取元素自定义属性值attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index=“1”

• 获取属性语法

javascript">attr("属性")  //类似原生getAttribute()

• 设置属性语法

javascript">attr("属性","属性值")  //类似原生setAttribute()

数据缓存data()

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

• 附加数据语法

javascript">data("name","value") //向被选元素附加数据

• 获取数据语法

javascript">data("name") //向被选元素获取数据

javascript">        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
        })

案例：购物车模块-全选模块

• 1.全选思路：里面三个小的复选按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走
• 2.因为checked是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性
• 3.把全选按钮状态复制给三个复选框就可以了
• 4.当我们每次点击小的复选框按钮，就来判断：
• 5.如果小复选框被选中的个数等于3就应该把全选按钮悬赏，否则全选按钮不选

javascript">    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function() {
        // if(被选中的小的复选框的个数 === 3) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });

jQuery内容文本值

主要针对元素的内容还有表单的值操作

普通元素内容html()(相当于原生inner HTML)

javascript">html()  //获取元素的内容
html("内容") //设置元素的内容

普通元素文本内容text() (相当于原生innerText)

javascript">text()  //获取元素的文本内容
text("文本内容") //设置元素的文本内容

表单的值val() (相当于原生value)

javascript">        // 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");

案例：购物车案例模块-增减商品数量

• 1.核心思路：首先声明一个变量，当我们点击+号(increment)，就让这个值++，然后复制给文本框
• 2.注意1：只能增加本商品的数量，就是当前+号的兄弟文本框(itxt)的值
• 3.修改扁担的值是val()方法
• 4.注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++，要获取表单的值
• 5.减号(decrement)思路同理，但是如果文本框的值是1，就不能再减了

javascript">    // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
    $(".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);
    });

案例：购物车案例模块-修改商品小计

• 1.核心思路：每次点击+号或者-号，根据文本框的值乘以当前商品的价格就是商品的小计
• 2.注意1：只能增加本商品的小计，就是当前商品的小计模块(p-sum)
• 3.修改普通元素的内容是text()方法
• 4.注意2：当前商品的价格，要把￥符号去掉再相乘，截取字符串substr(1)
• 5.parents(‘选择器’)可以返回指定祖先元素
• 6.最后计算的结果如果想要保留2位效数，通过toFixed(2)方法

javascript">		// var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        // 小计模块 
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));

• 7.用户也可以直接修改表单里面的值，同样要计算小计。用表单change事件
• 8.用最新的表单内的值乘以单价即可，但是还是当前商品小计

javascript">    //  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).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
    });

jQuery元素操作

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

遍历元素

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

语法1：$("div").each(function(index,domEle){xxx； })

• 1.each()方法遍历匹配的每一个元素，主要用DOM处理。
• 2.里面的回调函数又2个参数：index是每个元素的索引号demEle是每个DOM元素对象，不是jquery对象
• 3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)

javascript">            // $("div").css("color", "red");
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            // 1. each() 方法遍历元素 
            var arr = ["red", "green", "blue"];
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(index);
                // console.log(i);
                // 回调函数第二个参数一定是 dom元素对象 也是自己命名
                // console.log(domEle);
                // domEle.css("color"); dom对象没有css方法
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);

语法2：$.each(object,function(index,element){xxx； })

• 1.$.each()方法可以用于遍历任何对象。主要用于数据处理，比如数组，对象
• 2.里面的函数又2个参数：index是每个元素的索引号；element遍历内容

javascript">            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })

案例：购物车案例模块-计算总计和总额

• 1.核心思路：把所有文本框里面的值相加就是总计数量，总额同理
• 2.文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可
• 3.点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额
• 4.因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可
• 5.注意1：总计是文本框里面的值相加用val() 总额是普通元素的内容用text()

javascript">    // 5. 计算总计和总额模块
    getSum();
    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));
    }

创建元素

javascript">$("<li></li>");

动态的创建了一个< li>

添加元素

• 1.内部添加

javascript">element.append("内容") //把内容放入匹配元素内部最后面，类似原生appendChild
element.prepend("内容") //把内容放入匹配元素内部最前面。

• 2.外部添加

javascript">element.after("内容")  //把内容放入目标元素后面
element.before("内容") //把内容放入目标元素前面

内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，他们是兄弟关系

删除元素

javascript">element.remove()   //删除匹配的元素(本身)
element.empty()    //删除匹配的元素集合中所有的子节点
element.html("")   //清空匹配的元素内容

购物车模块-清理购物车

• 1.核心思路：把商品remove()删除元素即可
• 2.有三个地方需要删除：1.商品后面的删除按钮 2.删除选中的商品 3.清理购物车
• 3.商品后面的删除按钮：一定是删除当前的商品，所以从$(this)出发

javascript">	// 6. 删除商品模块
    // (1) 商品后面的删除按钮
    $(".p-action a").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();
    })

购物车案例模块-选中商品添加背景

• 1.核心思路：选中的商品添加背景，不选中移除背景即可
• 2.全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
• 3.小的复选框点击：如果是选中状态，则当前商品添加背景，否则移除背景
• 4.这个背景，可以通过类名修改，添加类和删除类

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

jQuery尺寸，位置操作

jQuery尺寸

语法	用法
width()/height()	取得匹配元素宽度和高度值，只算width/height
innerWidth()/innerHeight()	取得匹配元素狂赌和高度值，包含padding
outerWidth()/outerHeight()	取得匹配元素狂赌和高度值，包含padding，border
outerWidth(true)/outerHeight(true)	取得匹配元素狂赌和高度值，包含padding，border，margin

• 以上参数为空，则是获取相应值，返回的是数字型
• 如果参数为数字，则是修改相应值
• 参数可以不必写单位

jQuery位置

位置主要有三个：offset()，position()，scrollTop()/scrollLeft()

offset()设置或获取元素偏移

• 1.offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
• 2.该方法有2个属性left，top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
• 3.可以设置元素的偏移：offset({top：10，left：30})

position()获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
这个方法只能获取不能设置

scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

scrollTop()方法设置或返回元素被卷去的头部

javascript">            $(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });

案例：带有动画的返回顶部

• 1.核心原理：使用animate动画返回顶部
• 2.animate动画函数里面有个scrollTop属性，可以设置位置
• 3.但是是元素做动画，因此$(“body,html”).animate({scrollTop:0})

javascript">            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })

案例：品优购电梯导航

• 1.当我们滚到到今日推荐模块，就让典题导航显示出来

javascript">    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }

• 2.点击典题导航页面可以滚动到相应内容区域
• 3.核心算法：因为典题导航模块和内容区模块一一对应
• 4.当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
• 5.就可以把animate要移动的距离求出来：昂前索引号内容区模块它的offset().top

javascript">    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        });
    })

---

• 1.当我们点击电梯导航某个小li，当前小li添加current类，兄弟移除类名
• 2.当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类
• 3.触发的事件是页面滚动，因此这个功能要写道页面滚动事件里面
• 4.需要用到each，遍历内容区域大模块。each里面能拿到内容区域每一个模块元素和索引号
• 5.判断的条件：被卷去的头部 大于等于内容区域里面的每个模块的offset().top

javascript">    $(window).scroll(function() {
           $(".floor .w").each(function(i, ele) {
               if ($(document).scrollTop() >= $(ele).offset().top) {
                   console.log(i);
                   $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
               }
           })
       }
    });

节流阀 互斥锁

javascript">$(function() {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
    toggleTool();

    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }
    $(window).scroll(function() {
        toggleTool();
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
        if (flag) {
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
                }
            })
        }
    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        flag = false;
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
})