jQuery基础02：属性操作 + 文本操作 + 元素操作 + 尺寸、位置操作

最新推荐文章于 2022-06-11 20:10:42 发布
最新推荐文章于 2022-06-11 20:10:42 发布
阅读量259 收藏
点赞数
分类专栏： # jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44666644/article/details/109278405
版权

1.1. jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

1.1.1 元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性

比如 元素里面的 href ， 元素里面的 type。

语法

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

注意：

  • prop()除了普通属性操作，更适合操作表单属性：disabled、checked、selected等。

1.1.2 元素自定义属性值 attr()

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

语法

  1. 获取属性语法：attr(“属性”) // 类似原生getAttribute()
  2. 设置属性语法：attr(“属性”，“属性值”) // 类似原生setAttribute()

注意：

  • attr() 除了普通属性操作，更适合操作自定义属性（该方法也可以获取H5自定义属性）

1.1.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。

一旦页面刷新，之前存放的数据都将被移除。

语法

  1. 附加数据语法：data(“name”，“value”) // 向被选元素附加数据
  2. 获取数据语法：data(“name”) // 向被选元素获取数据

注意：

  • 同时还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

演示代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.min.js"></script>
</head>

<body>
  <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
  <input type="checkbox" name="" id="" checked>
  <div index="1" data-index="2">我是div</div>
  <span>123</span>
  <script>
    $(function () {

      /*
        element.prop("属性名") 获取元素固有的属性值
      */
      console.log($("a").prop("href")); // http://www.itcast.cn/
      
      // 设置元素固有的属性
      $("a").prop("title", "我们都挺好");

      // 获取单选框的选中状态
      $("input").change(function () {
        console.log($(this).prop("checked"));
      });

      /*
        element.attr() 获取元素的自定义属性
      */
      console.log($("div").attr("index")); // 1
      $("div").attr("index", 4);
      console.log($("div").attr("data-index")); // 2
      console.log($("div").attr("index")); // 4

      /*
        数据缓存 data() 这个里面的数据是存放在元素的内存里面
        该方法还可以获取h5自定义属性， data-属性 对应的值
        不用写data-  而且返回的是数字型
        $("div").data("index")
      */
      $("span").data("uname", "andy");
      console.log($("span").data("uname")); // andy

      // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
      console.log($("div").data("index")); // 数字 2
    })
  </script>
</body>

</html>

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

  1. 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
  2. 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
  3. 把全选按钮状态赋值给3小复选框就可以了。
  4. 当我们每次点击小的复选框按钮，就来判断：
  5. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
  6. checked 选择器 :checked 查找被选中的表单元素。

1.2. jQuery 文本属性值

jQuery的文本属性值常见操作有三种：

  • html() => 对应JS中的 innerHTML

  • text() => 对应JS中的 innerText

  • val() => 对应JS中的 value 属性

1.2.1 jQuery内容文本值

常见操作有三种：主要针对元素的内容还有表单的值操作

  1. html() => 对应JS中的 innerHTML
  2. text() => 对应JS中的 innerText
  3. val() => 对应JS中的 value 属性

语法

  1. 普通元素内容 html() =>相当于 原生innerHTML

    html() // 获取元素的内容

    html(“内容”) // 设置元素的内容

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

    text() // 获取元素的文本内容

    text(“内容”) // 设置元素的文本内容

  3. 表单的值 val() =>相当于 原生value

    value() // 获取表单的值

    value(“内容”) // 设置表单的值

注意：html() 可识别标签，text() 不识别标签。

演示代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div>
    <span>我是内容</span>
  </div>
  <input type="text" value="请输入内容">
  <script>

    // 1. 获取设置元素内容 html()
    console.log($("div").html()); // 获取设置元素内容 html()  <span>我是内容</span>
    $("div").html("123");
    console.log($("div").html()); // 获取设置元素内容 html("内容")  123

    // 2. 获取设置元素文本内容 text()
    console.log($("div").text());  // 获取设置元素文本内容 text()        123
    $("div").text("123");          // 修改设置元素文本内容 text("内容")  123

    // 3. 获取设置表单值 val()
    console.log($("input").val()); // 获取input输入框的属性value值：请输入内容
    $("input").val("123");        //  修改input输入框的属性value值  123

  </script>
</body>

</html>

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

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

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

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

1.3. jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

1.3.1. 遍历元素

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

语法1

$("div").each(function(index,domEle) { xxx; })

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

注意：此方法用于遍历jquery对象中的每一项，回调函数中元素为DOM对象，想要使用jquery方法需要转换

语法2

$.each(object,function(index,element) { xxx; })

// 遍历div元素
$.each($("div"), function (i, ele) {
    console.log(i);
    console.log(ele);
})

// 遍历数组	  
var arr = ["red", "green", "blue"];
$.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 属性值
})
  1. $.each() 方法可用于遍历任何对象。主要用于数据处理，比如：数组、对象
  2. 里面的函数有2个参数：index是每个元素的索引号；element 遍历内容

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

演示代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

  </style>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <script>
    $(function () {

      /*
         $("div").css("color", "red");  隐式迭代，为所有div元素，添加红色
         如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
      */
      var sum = 0;
      // 1. each() 方法遍历元素 
      var arr = ["red", "green", "blue"];
      $("div").each(function (i, domEle) {
        /*
          回调函数第一个参数一定是索引号  可以自己指定索引号号名称
          回调函数第二个参数一定是 dom元素对象 也是自己命名
        */
        $(domEle).css("color", arr[i]);    // 将DOM对象转换为jquery对象 $(domEle)
        sum += parseInt($(domEle).text()); // 求和：获取每一个元素的内容，然后相加求和
      })
      console.log(sum);  // 6

      /*
        方法2：$.each() 方法遍历元素 主要用于遍历数据，处理数据
      */
      $.each($("div"), function (i, ele) {
        console.log(i);
        console.log(ele);
      });

    })
  </script>
</body>

</html>

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

  1. 把所有文本框中的值相加就是总额数量，总计同理。
  2. 文本框里面的值不同，如果想要相加需要用 each() 遍历，声明一个变量做计数器，累加即可。

1.3.3. 创建、添加、删除

jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：

注意：这些只是元素的创建、添加、删除方法的常用方法，其他方法请参详API

语法总和

  1. 创建：$("<li></li>"); 动态的创建了一个li元素

  2. 内部添加：内部添加元素生成之后，它们是父子关系

    • element.append(“内容”)； 把内容放入匹配元素内部最后面，类似原生 appendChild
    • element.prepend(“内容”); 把内容放入匹配元素内部最前面

  3. 外部添加：外部添加元素生成之后，它们是兄弟关系

    • element.after(“内容”); 把内容放入目标元素后面
    • element.before(“内容”); 把内容放入目标元素前面

  4. 删除元素

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

    注意：

    remove 删除元素本身

    empty() 和 html("") 作用等价，都可以删除元素里面的内容，只不过html还可以设置内容

案例代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="jquery.min.js"></script>
</head>

<body>
  <ul>
    <li>原先的li</li>
  </ul>
  <div class="test">我是原先的div</div>
  <script>
    $(function () {
      // 1. 创建元素
      var li = $("<li>我是后来创建的li</li>");
      // 2. 添加元素

      // (1) 内部添加
      // $("ul").append(li);  内部添加并且放到内容的最后面 
      $("ul").prepend(li); // 内部添加并且放到内容的最前面

      // (2) 外部添加
      var div = $("<div>我是后来的div</div>");
      // $(".test").after(div);  // 放在页面div的后面
      $(".test").before(div);    // 放在页面div的前面

      // 3. 删除元素
      // $("ul").remove();  // 可以删除匹配的元素 自杀
      // $("ul").empty();   // 可以删除匹配的元素里面的子节点 孩子
      $("ul").html("");     // 可以删除匹配的元素里面的子节点 孩子

    })
  </script>
</body>

</html>

1.3.4 案例：购物车案例模块-删除商品模块

  1. 核心思路：把商品remove() 删除元素即可
  2. 有三个地方需要删除： 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
  3. 商品后面的删除按钮： 一定是删除当前的商品，所以从 $(this) 出发
  4. 删除选中的商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
  5. 清理购物车： 则是把所有的商品全部删掉

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

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

1.4. jQuery 尺寸、位置操作

jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。

1.4.1. jQuery 尺寸操作

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

语法

语法用法
width() 、height()取得匹配元素宽度和高度值 — 只算width/height
innerWidth() 、innerHeight()取得匹配元素宽度和高度值 — 包含padding
outerWidth()、outerHeight()取得匹配元素宽度和高度值 — 包含padding、border
outerWidth(true)、outerHeight(true)取得匹配元素宽度和高度值 — 包含padding、border、margin
  • 以上参数为空，则是获取相应值，返回的是数字型。
  • 如果参数为数字，则是修改相应值。
  • 参数可以不必写单位

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      padding: 10px;
      border: 15px solid red;
      margin: 20px;
    }
  </style>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div></div>
  <script>
    $(function () {

      // 1. width() / height() 获取设置元素 width和height大小 
      console.log($("div").width()); // width: 200px;
      // $("div").width(300); // 修改div的宽度

      // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
      console.log($("div").innerWidth()); // 220

      // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
      console.log($("div").outerWidth());  // 250

      // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
      console.log($("div").outerWidth(true));  // 290

    })
  </script>
</body>

</html>

1.4.2. jQuery 位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

语法

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

    offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

    该方法有2个属性left、top。

    • offset().top 用于获取距离文档顶部的距离
    • offset().left 用于获取距离文档左侧的距离

    可以设置元素的偏移：offset({ top: 10,left: 30});

  2. position() 获取元素偏移

    position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

    该方法有2个属性 left、top。

    • position().top 用于获取距离定位父级顶部的距离
    • position().left 用于获取距离定位父级左侧的距离

    该方法只能获取

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

    • scrollTop() 方法设置或返回被选元素被卷去的头部。
    • 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
      margin: 100px;
      overflow: hidden;
      position: relative;
    }

    .son {
      width: 150px;
      height: 150px;
      background-color: purple;
      position: absolute;
      left: 10px;
      top: 10px;
    }
  </style>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <script>
    $(function () {

      // 1. 获取设置距离文档的位置（偏移） offset
      console.log($(".son").offset());
      console.log($(".son").offset().top);
      // $(".son").offset({   // 修改距离文档的位置
      //     top: 200,
      //     left: 200
      // });


      // 2. 获取距离带有定位父级位置（偏移） position  如果没有带有定位的父级，则以文档为准
      console.log($(".son").position());  // 这个方法只能获取不能设置偏移

    })
  </script>
</body>

</html>

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

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      height: 2000px;
    }

    .back {
      position: fixed;
      width: 50px;
      height: 50px;
      background-color: pink;
      right: 30px;
      bottom: 100px;
      display: none;
    }

    .container {
      width: 900px;
      height: 500px;
      background-color: skyblue;
      margin: 400px auto;
    }
  </style>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div class="back">返回顶部</div>
  <div class="container">
  </div>
  <script>
    $(function () {

      /*
        被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
        $(document).scrollTop(100); // 设置文档距离页面顶部的距离
      */

      var boxTop = $(".container").offset().top; // container元素距离页面顶部的距离

      /*
        页面滚动事件
        $(document).scrollTop()  文档被卷去的高度
      */
      $(window).scroll(function () {
        console.log($(document).scrollTop());
        if ($(document).scrollTop() >= boxTop) {
          $(".back").fadeIn();  // 显示返回顶部按钮
        } else {
          $(".back").fadeOut(); // 隐藏返回顶部按钮
        }
      });

      // 返回顶部
      $(".back").click(function () {

        $("body, html").stop().animate({
          scrollTop: 0
        });

        // 注意：不能是文档而是 html和body元素做动画
        // $(document).stop().animate({  
        //     scrollTop: 0
        // }); 

      })

    })
  </script>
</body>

</html>

1.4.4. 案例： 品优购电梯导航（上）

  1. 当我们滚动到 今日推荐 模块，就让电梯导航显示出来
  2. 点击电梯导航页面可以滚动到相应内容区域
  3. 核心算法：因为电梯导航模块和内容区模块一一对应的
  4. 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
  5. 就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top
  6. 然后执行动画即可

1.4.5. 案例：品优购电梯导航（下）

  1. 当我们点击电梯导航某个小li， 当前小li 添加current类，兄弟移除类名
  2. 当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。
  3. 触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。
  4. 需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
  5. 判断的条件： 被卷去的头部 大于等于 内容区域里面每个模块的offset().top
  6. 就利用这个索引号找到相应的电梯导航小li添加类。
落花流雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery实现购物车根据商品的选择更改总价
weixin_44451084的博客
03-15 1066
jquery实现购物车根据商品的选择更改总价，数据为servlet页面获得，并用c标签的foreach循环遍历获得。主要为js部分的代码实现
通过jquery实现购物车的全选加减以及计算总价
weixin_52153452的博客
12-15 1865
通过jquery实现购物车的全选加减以及计算总价
jQuery实现购物车
qq_52108058的博客
05-04 7407
文章目录前言一、购物车属性全选1.案例演示2.实现代码3.实现方法二、使用步骤1.引入库2.读入数据总结 前言 自己对index.html进行清楚的理解，清楚div包括的范围，class类名的写法，从而可以更容易写出js内容。 一、购物车属性全选 1.案例演示 当用户点击全选按钮的时候，把所有的商品复选框选中。 2.实现代码 $('.checkall').change(function(){ $('.j-checkbox, .checkall').prop("checked",$(this).
JQuery案例：购物车加减
weixin_30242907的博客
07-12 123
购物车加减 <head> <meta charset="UTF-8"> <title>加减购物车</title> <style type="text/css"> input { width: 35px; height: 35px; ...
html5购物车数字加减,jQuery实现购物车数字加减效果_jquery
weixin_33350741的博客
06-07 654
我们在网上购物提交订单时，在网页上一般会有一个选择数量的控件，要求买家选择购买商品的件数，开发者会把该控件做成可以通过点击实现加减等微调操作，当然也可以直接输入数字件数。本文将介绍常见的几种使用spinner数字微调器来实现数字加减的功能的方法。左右加减数字像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实现左右加减数字，调...
jQuery入门之属性操作和内容文本【总结＋案例】
ovocc的博客
03-26 1018
简单总结jQuery属性操作和内容文本
jQuery 操作元素及属性
苦涩
05-02 331
JQuery的DOM和CSS操作页面内容操作属性操作CSS属性操作CSS类操作 页面内容操作 text()：获取或设置某个元素的 文本内容 html()：获取或设置某个元素的 HTML内容 val()：获取或设置“表单元素”的值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
jQuery 操作 HTML 元素和属性的方法
10-17
除了这些基础操作，jQuery还提供了其他高级方法来处理HTML元素和属性，如： - `removeAttr()`：移除指定的属性。 - `addClass()` / `removeClass()` / `toggleClass()`：添加、移除或切换CSS类。 - `data()`：存储...
jQuery学习3：操作元素属性和特性
10-29
在jQuery中，操作元素的属性和特性是常见的任务，这对于动态改变网页内容或者响应用户交互至关重要。本篇文章将深入探讨jQuery中与元素属性相关的API，包括`attr()`、`removeAttr()`、`html()`、`text()`、`height()...
JQuery属性操作与循环用法示例
10-17
### jQuery属性操作 #### 1. 读取属性 jQuery提供`.prop()`方法用于获取或设置元素的属性值。例如，要获取`<img>`标签的`src`属性，我们可以使用以下代码： ```javascript var $src = $('#img1').prop('src'); ``...
jQuery操作元素的内容和样式完整实例分析
11-27
在本实例中，我们将深入探讨如何使用jQuery操作元素的内容和样式。 首先，要使用jQuery，我们需要在HTML文档中引入jQuery库。在这个例子中，通过`<script>`标签引入了百度CDN上的jQuery 1.9.1版本。 ### 操作元素...
jquery购物车增减商品数量1-32
qq_41632427的博客
06-11 123
html
jQuery-修改商品小计
qq_39111074的博客
10-11 364
页面效果： 实现思路： 加元素绑定点击事件，事件处理程序- - - ① 改变数量：获取当前数量，点击后，数量加1， ② 改变小计：获取价格，获取文本值用text()，截取数字部分，例如：substr(1)；小计等于 价格 乘以 当前数量；再将计算出的数字赋值给小计，前面有非数字文字时，注意使用字符串连接后再赋值，例如：html(“￥” + p * num) 减元素绑定点击事件，事件处理程序- - - ① 改变数量：获取当前数量，点击后，数量减1；如果数量为1，不再继续减 ② 改变小计：获取价格，获取文本
jQuery购物车 商品数量加减和小计
qq_50839755的博客
04-05 2747
整体代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .body{ width: 300px; height: 100px; border: 1px solid silver; } a{ text-decoration: none; }
jquery实现单选按钮(radio)的选中与取消选中
Joyce_zheng_ou的博客
08-14 1154
** jquery实现单选按钮(radio)的选中与取消选中 ** 对于按钮需要在jquery中实现选中与不选中尝试了很多方法都没有实现普通的属性添加xxx.attr('checked', 'checked');并不能实现 注:并非完全不能实现而是会出现bug会导致按钮都不能选中,使用.prop()标签可实现 选中:$("input[name=xxx]").eq(1).prop('checked', 'checked'); 取消选中:$("input[name='xxx']").eq(0).removePr
jQuery（二）—— jQuery 属性操作 / jQuery 内容文本值 / jQuery 尺寸、位置操作
imByte的博客
10-27 774
原以为 jQuery 不需要学习，但是接触了一些 VUE 框架，发现用到了好多 jQuery 的知识，于是返回来重新学习。本系列笔记大概分为三篇，陆续更新。 参考：W3school —— jQuery 教程；黑马 pink 老师前端入门 系列笔记： jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果 文章目录一、jQuery 属性操作1. 设置或获取元素固有属性 prop()2. 设置或获取元素自定义属性 attr()3. 数据缓存 .
【第六章】使用jQuery操作表单和表格1
qq_45095748的博客
11-20 417
HTML表单概述 当用户填写完信息后做提交操作，将表单内的内容从客户端的浏览器传到服务器上，经过服务器处理程序后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。、 表单的主要功能是收集信息，具体说是收集浏览者的信息。 一表单标记form 1.action属性 action属性是指处理表单提交数据的脚本文件。 具体语法： <form action="URL"...
jQuery-JQuery属性操作-JQuery文本属性值-JQuery元素操作-JQuery尺寸、位置操作-建议收藏！
weixin_46575696的博客
04-23 143
jQuery 学习目标： 能够操作 jQuery 属性 能够操作 jQuery 元素 能够操作 jQuery 元素尺寸、位置 1.1. jQuery 属性操作 ​ jQuery 常用属性操作有三种：prop() / attr() / data()...
jQuery基础教程：属性操作与入门指南
在jQuery中，属性操作是DOM元素操作的重要部分。 `attr()`是jQuery中用于获取或设置HTML元素属性的关键方法。当你只传递一个参数时，例如`attr('attributeName')`，它会返回指定元素的属性值。如果传递两个参数，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

落花流雨

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值