jQuery的学习第二天

最新推荐文章于 2024-01-20 21:49:50 发布

相信光的奥特王小懒

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量100

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_51415327/article/details/120164158

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 属性操作

1.1 获取属性的语法

1.1.1 获取元素固有的属性值

 element.prop("属性名") 获取元素固有的属性值

console.log($("a").prop("href"));

1.1.2 获取自定义属性值

在这里插入图片描述

1.2 设置属性值

在这里插入图片描述

1.2 全选案例

在这里插入图片描述

2. 内容文本值

在这里插入图片描述

2.1 增减商品数量模块

在这里插入图片描述

2.2 修改商品小计

在这里插入图片描述

3. 元素操作

3.1 遍历对象

在这里插入图片描述
注意：each相当于原生的for循环。用于遍历每一个元素。

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // $("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);
	</script>
<body>

在这里插入图片描述

 $.each($("div"), function(i, ele) {
       console.log(i);
       console.log(ele);

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

3.2 购物车总计金额

在这里插入图片描述

3.3 创建、添加和删除元素

3.3.1 创建

在这里插入图片描述

3.3.2 添加

在这里插入图片描述
pre指的是在内容最前放添加。

3.3.3 删除

在这里插入图片描述

3.3.4 清理购物车模块

在这里插入图片描述

4. jQuery尺寸及位置操作

4.1 尺寸

在这里插入图片描述

4.2 位置

4.2.1 offset() (以文档为标准的位置)

在这里插入图片描述

4.2.2 position() （以有定位的父级位置为标准，若没有定位的父级则以文档为标准）

在这里插入图片描述

注意：此方法只能获取，不能设置偏移

4.2.3 scrollTop()

在这里插入图片描述

1. 不带动画的返回顶部

2. 带动画的返回顶部

4.3 品优购的电梯导航案例

1.通过导航栏控制内容
在这里插入图片描述
第一次尝试，bug是只有我们滚动页面的时候导航栏才会出现，故刷新一次就会消失

解决方式：

2.通过内容控制导航栏

在这里插入图片描述

相信光的奥特王小懒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的学习第二天

1. 属性操作1.1 获取属性的语法1.1.1 获取元素固有的属性值 element.prop("属性名") 获取元素固有的属性值console.log($("a").prop("href"));1.1.2 获取自定义属性值1.2 设置属性值
复制链接

扫一扫

专栏目录