菜单 搜索
首页 前端知识 jQuery 元素操作

jQuery 元素操作

2024-06-13 21:06:16 前端知识 前端哥 762 909 我要收藏

文章目录

    • 1. jQuery 样式操作
      • 1.1 操作 css 方法
      • 1.2 设置类样式方法
        • *案例--tab栏切换
      • 1.3 类操作和className 区别
    • 2. jQuery 效果
      • 2.1 显示隐藏效果
      • 2.2 滑动效果
        • 事件切换
        • 动画队列及其停止排队方法
      • 3.3 淡入淡出效果
        • 利用渐进方式调整透明度
        • *案例--高亮突出显示
      • 3.4 自定义动画 animate
        • *案例--王者荣耀手风琴
    • 3. jQuery 属性操作
      • 3.1 设置或获取元素固有属性值 prop()
      • 3.2 设置或获取元素自定义属性值 attr()
      • 3.3 补充知识: 数据缓存 data()
        • *案例--购物车模块-全选全不选
    • 4. jQuery 文本属性值
      • 4.1 普通元素内容 html()
      • 4.2 普通元素文本内容 text()
      • 4.3 获取表单值 val()
        • *案例--购物车模块-增减商品数量 以及计算小计
        • 补充知识：寻找父级元素 parents()
        • 补充知识：最后结果保留两位小数 toFixed(2)
    • 5. jQuery 元素操作
      • 5.1 遍历元素
      • *案例--购物车模块-计算总计和总额
      • 5.2 创建元素
      • 5.3 添加元素
      • 5.4 删除元素
        • *案例--购物车模块-清理购物车
        • *案例--购物车模块-选中商品添加背景
    • 6. jQuery 尺寸、位置操作
      • 6.1 jQuery 尺寸
      • 6.2 jQuery 位置
        • 案例--带有动画的返回顶部
        • *案例--品优购电梯导航
          • 电梯导航案例节流阀(互斥锁)

1. jQuery 样式操作

1.1 操作 css 方法

  1. 会返回值+单位；在这里插入图片描述
  2. 属性值如果是数字可以不加单位和引号在这里插入图片描述
  3. 属性和值（数字）可以不用加引号；复合属性需要采用驼峰命名法；值非数字一定要加引号！在这里插入图片描述

1.2 设置类样式方法

  1. 添加类 addClass()在这里插入图片描述

  2. 删除类 removeClass()在这里插入图片描述

  3. 切换类 toggleClass()在这里插入图片描述

*案例–tab栏切换

在这里插入图片描述

1.3 类操作和className 区别

在这里插入图片描述

2. jQuery 效果

在这里插入图片描述

2.1 显示隐藏效果

show() 、hide() 、toggle()三种函数形参定义一样！
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.2 滑动效果

以下三种函数形参定义与前面显示隐藏效果函数一样！

  1. 在这里插入图片描述
  2. slideUp()
  3. slideToggle()
    在这里插入图片描述
    这种函数可以应用于tab 栏切换！
事件切换

在这里插入图片描述
简单写法：
在这里插入图片描述
更简单写法：
toggle() 函数很强大嘛

动画队列及其停止排队方法

在这里插入图片描述
在这里插入图片描述
stop() 函数必须写在动画前面！
写在后面时，动画效果刚要实现就被停止
在这里插入图片描述
在这里插入图片描述

3.3 淡入淡出效果

以下三种函数形参定义与前面显示隐藏效果函数一样！

  1. fadeIn()在这里插入图片描述
  2. fadeOut()
  3. fadeToggle()
利用渐进方式调整透明度

在这里插入图片描述
以上效果函数中speed 参数必须写；而渐进函数fadeTo() 中必须写speed 参数和opacity 参数！

在这里插入图片描述

*案例–高亮突出显示

在这里插入图片描述

<body>
    <div class="wrap">
        <ul>
            <li><img src="../../../imageForTest/img1.jpg" alt=""></li>
            <li><img src="../../../imageForTest/img2.jpg" alt=""></li>
            <li><img src="../../../imageForTest/img3.jpg" alt=""></li>
        </ul>
    </div>
    <script src="../jQuery.min.js"></script>
    <script>
        $(function () {
            //鼠标进入
            $('.wrap li').hover(function () {
                $(this).siblings().stop().fadeTo(0, 0.5);
            },function () {
                $(this).siblings().stop().fadeTo(0, 1);
            })
        });

    </script>
</body>

3.4 自定义动画 animate

在这里插入图片描述
params 参数定义：
在这里插入图片描述
在这里插入图片描述

*案例–王者荣耀手风琴

在这里插入图片描述
手风琴效果css 样式：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. jQuery 属性操作

3.1 设置或获取元素固有属性值 prop()

  1. 获取属性值 prop(“属性”)；
  2. 设置属性语法 prop(“属性”，“属性值”)。

元素属性改变事件 change
在这里插入图片描述

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

在这里插入图片描述

3.3 补充知识: 数据缓存 data()

data() 是设置或获取元素自定义属性值的另一种方法！
在这里插入图片描述
该方法获取h5 新增自定义属性值 不需要写data-，而且返回的是数字型。

*案例–购物车模块-全选全不选

在这里插入图片描述
补充知识：
jQuery 中 :checked选择器可以选出 checked 属性为true 的元素

$(function () {
    // 1. 全选 全不选功能
    $(".checkall").change(function () {
        $('.j-checkbox, .checkall').prop('checked', $(this).prop('checked'));
    });
    // 2. 小复选框被选中的个数为3 就应该把全选按钮选上，否则全选按钮不选
    $(".j-checkbox").change(function () {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    });
})

4. jQuery 文本属性值

4.1 普通元素内容 html()

在这里插入图片描述

4.2 普通元素文本内容 text()

在这里插入图片描述

4.3 获取表单值 val()

获取表单value 值
在这里插入图片描述

*案例–购物车模块-增减商品数量 以及计算小计

注意：寻找元素的兄弟时需要一层一层的找 直接使用类名寻找会将所有的元素找出来！

 $(".increment").click(function () {
        // 得到当前兄弟文本框的 value 值
        var n = $(this).siblings(".itxt").val();
        n++;
        $(this).siblings(".itxt").val(n);
        // 4.小计跟随商品数量变换
        // 要注意寻找元素的兄弟时需要一层一层的找 直接使用类名寻找会将所有的元素找出来
        // var p = $("this").parent().parent().siblings(".p-price").html();
        var p = $("this").parents("p-num").siblings(".p-price").html();
        p = p.substr(1);
        $("this").parents("p-num").siblings(".p-price").html("￥" + p * n.toFixed(2));

    });
    $(".decrement").click(function () {
        // 得到当前兄弟文本框的 value 值
        var n = $(this).siblings(".itxt").val();
        if (n === 1) {
            return false;
        } else {
            n--;
            $(this).siblings(".itxt").val(n);
            var p = $("this").parents("p-num").siblings(".p-price").html();
            p = p.substr(1);
            $("this").parents("p-num").siblings(".p-price").html("￥" + p * n.toFixed(2));
        }
    })
    // 5. 用户直接修改文本框值 计算 小计模块
    $(".itxt").change(function () {
        var n = $(this).val();
        var p = $("this").parents("p-num").siblings(".p-price").html();
        p = p.substr(1);
        $("this").parents("p-num").siblings(".p-price").html("￥" + p * n.toFixed(2));
    })
补充知识：寻找父级元素 parents()
<div class="one">
<div class="two">
<div class="three">I
<div class="four">我不容易</div>
</div>
</div>
</div>
<script>
console.log($(".four").parent().parent().parent());
</script>

之前我们想要找寻子元素的某个父级盒子，需要通过parent() 一级一级的寻找；但是我们现在可以通过parents(‘选择器’) 返回指定祖先元素。

<script>
console.log($(".four").parents('one'));
</script>
补充知识：最后结果保留两位小数 toFixed(2)

在这里插入图片描述

5. jQuery 元素操作

5.1 遍历元素

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

  1. $(“选择器”).each(function(index, domEle){xxx; }) 在这里插入图片描述在这里插入图片描述
  2. $.each(obj, function(index, element){xxx; }) 主要用于遍历数据 – 遍历数组、对象在这里插入图片描述
    在这里插入图片描述

如果要遍历DOM 对象，可以使用前者；如果遍历数据，后者更为合适。

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

注意：在商品数量变化时需要调用下面的函数！

 // 6.计算总计和总额模块
    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)).toFixed(2);
        });
        $(".price-sum em").text("￥" + money);
    }

5.2 创建元素

在这里插入图片描述

5.3 添加元素

  1. 内部添加
    element.append() – 添加到元素的后面；
    element.prepend() – 添加到元素的前面。
    在这里插入图片描述

  2. 外部添加
    element.after(“内容”) – 把内容放到目标元素后面；
    element.before(“内容”) – 把内容放到目标元素前面。

在这里插入图片描述

5.4 删除元素

  1. element.emove()-- 删除某个元素
  2. element.empty()-- 删除匹配元素的所有子节点
  3. element.html(“”)-- 删除匹配元素的内容
    在这里插入图片描述
*案例–购物车模块-清理购物车
// 7. 删除商品模块
    // (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 () {
        $(".j-checkbox").parents(".cart-item").remove();
        getSum();
    });
*案例–购物车模块-选中商品添加背景
 // 1. 全选 全不选功能
    $(".checkall").change(function () {
        $('.j-checkbox, .checkall').prop('checked', $(this).prop('checked'));
        if ($(this.prop(checked))) {
            $(".cart-item").addClass("check-cart-item");
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    // 2. 小复选框被选中的个数为3 就应该把全选按钮选上，否则全选按钮不选
    $(".j-checkbox").change(function () {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this.prop(checked))) {
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });

6. jQuery 尺寸、位置操作

6.1 jQuery 尺寸

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.2 jQuery 位置

  1. offset()
    在这里插入图片描述
    在这里插入图片描述
  2. position()
    在这里插入图片描述

注意position() 只能获取不能设置值！
在这里插入图片描述

  1. scrollTop()/scrollLeft
    该方法可以获取值也可以设置值！

补充知识：页面滚动事件scroll
在这里插入图片描述
在这里插入图片描述

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

注意：annimate 函数只能是元素才能做动画！
在这里插入图片描述

*案例–品优购电梯导航

在这里插入图片描述
核心算法：导航模块和内容区域是一一对应的

$(function () {
    // 1. 页面中今日推荐模块滚动到页面最上方时 电梯导航模块显示出来
    var toolTop = $(".recommend").offset().top;
    toggleTool();

    // 节流阀
    var flag = true;
    // 3. 封装起来toggleTool() 当页面加载完毕后进行判断
    function toggleTool() {
        if ($("document").scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        }
    }
    $(window).scroll(function () {
        // 该部分代码是在页面滚动之后才进行 但如果此时页面仍停在此处 且此时刷新页面
        // 不滚动的话电梯导航就不会出现 所以需要将以下代码封装起来toggleTool() 当页面加载完毕后进行判断
        // if ($("document").scrollTop() >= toolTop) {
        //     $(".fixedtool").fadeIn();
        // } else {
        //     $(".fixedtool").fadeOut();
        // }
        toggleTool();

        // 5. 电梯导航自动设置current 类
        if (flag) {
            $(".floor .w").each(function (i, ele) {
                if ($(document).scrollTop >= $(ele).offset().top) {
                    $(".fixedtool li").eq(i).addClass(".current").siblings().removeClass();
               } 
            });
       }
    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域 导航模块和内容区域是一一对应的
    $(".fixedtool li").click(function () {
        flag = false;
        console.log($(this).index());
        var current = $(".floor .w").eq($(this).index()).offset().top;
        $("body, html").stop().animate({
            scrollTop: current
        }, function () {
            flag = true;
        });
        // 4. 点击之后给当前小li 添加current 类名 姐妹移除current 类名
        $(this).addClass("current").siblings().removeClass();
    });
})
电梯导航案例节流阀(互斥锁)

在这里插入图片描述
想要的效果：点击某个小li 时就直接选择当前小li ，而不是一个一个的选择知道选择到当前小li 。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12024.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！