jQuery_2

最新推荐文章于 2022-07-18 16:55:09 发布

一麻袋小猫

最新推荐文章于 2022-07-18 16:55:09 发布

阅读量162

点赞数

分类专栏： JavaScript jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/Zmongo/article/details/104638067

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

jQuery样式操作

操作css方法：
1. 参数只写属性名，则是返回属性值
$(this).css(“color”);
2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(“color”,“red”);
3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
1. 添加类
  $(“div”).addClass(“current”);
  $(function() {
  //添加类
  $(“div”).click(function() {
  $(this).addClass(“current”);
  })
  })
2. 移除类
  $(“div”).removeClass(“current”);
3. 切换类
  如果你没有这个类名，就给你加上，如果你有就给你去掉
  $(“div”).toggleClass(“current”);
4. 链式操作：
给当前元素添加类切换，给当前元素的兄弟元素去除类

$(this).toggleClass("current").siblings().removeClass("current");

tab栏切换

记得每个方法加括号，因为都是人家封装好的函数，所以要加括号调用。

$(function() {
            //添加类
            $(".tab_list li").click(function() {
                $(this).toggleClass("current").siblings().removeClass("current");
                var index = $(this).index();
                // console.log(index);
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })

jQuery中的addClass相当于追加类名，不影响以前的类名。原声js中的className相当于覆盖类名

jQuery效果

jQueryAPI
在这里插入图片描述

show()
事件切换
事件切换就是鼠标经过和离开的复合写法
hover([over,]out)
(1)over:鼠标移到元素上要触发的函数（相当于mouseenter）
(2)out:鼠标移出元素要触发的函数（相当于mouseleave）

（3）事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数(滑动切换)
$(".nav>li").hover(function(){
$(this).children(“ul”).sliderToggle();
})
动画队列及其停止排队方法
（1）动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
（2）停止排队
stop(): 必须写在动画的前面，可以链式写法，可以解决动画排队问题
把上一个动画效果停止，再执行当前动画。
淡入淡出
多一个透明度fadeTo效果

$(“button”).eq(3).click(function() {
//速度和透明度必须写
$(“div”).fadeTo(1000, 0.5);
})
自定义动画 animate

 $("button").click(function() {
                $("div").animate({
                    width: 500,
                    left: 500,
                    top: 300,
                    opacity: .4
                }, 500);
            })

手风琴案例

$(function() {
            $(".king li").mouseenter(function() {
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().stop().siblings(".big").fadeOut();
            })
        })

jQuery属性操作

设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type
元素的自定义属性通过attr()获取
数据缓存 data()（1,2用的最多）
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
把数据当成变量存储在内存中，然后正常使用。
H5 data- 自定义属性
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
用户代理会完全忽略前缀为 “data-” 的自定义属性
使用data-*可以解决自定义属性混乱无管理的现状，所以自定义属性前面必须加data-。换句话说：只要见到data-开头就是自定义属性。这是H5新规定的
:checked 选择器
j-checkbox:checked 被选中的复选框的个数

jQuery内容文本值

主要针对元素的内容还有表单的值操作
(1)获取设置元素内容 html() ——> 相当于innerHtml
(2)获取设置元素文本内容 text() ——> 相当于innerText
(3)获取设置表单值 val() ——>相当于 value
substr(n); 截取字符串
截取第n个之后的字符串
parents(“选择器”) 返回祖先级元素
如果想要保留2位小数通过toFixed(2) 方法
toFixed(n);

购物车案例

$(function() {
    //全选/全不选模块
    //就是把全选按钮的状态赋值给三个小的按钮就可以了
    //事件可以使用change
    $(".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");
            }
        })
        //如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function() {
        // console.log($(".j-checkbox:checked").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 {
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });
    //增减商品数量模块
    //页面加载时，先调用一次函数
    getSum();
    $(".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();
        p = p.substr(1);
        var price = (p * n).toFixed(2);
        // console.log(p);
        //小计模块
        //在html里面直接赋值就可以
        $(this).parent().parent().siblings(".p-sum").html('￥' + price);
        getSum();
    });
    $(".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).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        var price = (p * n).toFixed(2);
        // console.log(p);
        //小计模块
        //在html里面直接赋值就可以
        $(this).parents(".p-num").siblings(".p-sum").html('￥' + price);
        getSum();
    });
    //修改当前商品小计
    //用户修改文本框的值 计算 小计模块
    $(".itxt").change(function() {
        //得到文本框里的值 乘以 当前商品的单价
        var n = $(this).val();
        //当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = p.substr(1);
        var price = (p * n).toFixed(2);
        $(this).parents(".p-num").siblings(".p-sum").html('￥' + price);
        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));
    }
    //删除商品模块
    //商品后面的删除按钮
    $(".p-action a").click(function() {
            $(this).parents(".cart-item").remove();
            getSum();
        })
        //删除选中的商品
    $(".remove-batch").click(function() {
            $(".j-checkbox:checked").parents(".cart-item").remove();
            getSum();
        })
        //清空购物车 删除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    })
})