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

jQuery 元素操作

2024-06-13 21:06:16 前端知识 前端哥 754 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

【JQuery】返回的JSON数据解析错误问题

2024-06-20 00:06:30

html css javascript jquery bootstarp响应式旅行社旅游平台网站模板(14页)

2024-06-20 00:06:22

HTML期末作业 蛋糕bootstrap响应式网站html css javascript jquery bootstarp

2024-05-26 00:05:19

JQuery函数 | 选择器 | 事件

2024-06-20 00:06:11

jQuery实现购物车完整功能，script css完整代码 详细解释，可复制粘贴使用，更改图片及相关数据即可

2024-06-20 00:06:10

双X轴的Echarts图

2024-06-20 00:06:08

在Vue3中使用echarts图表

2024-06-20 00:06:07

ECharts图例中的圆点怎么去掉

2024-06-20 00:06:04

将echarts封装为js文件

2024-06-20 00:06:04

利用Echarts画地图和飞线

2024-06-20 00:06:03

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

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

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

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

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

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