jQuery基础（文本内容、元素操作、尺寸、位置）

最新推荐文章于 2023-06-15 00:53:11 发布

DF-vegan

最新推荐文章于 2023-06-15 00:53:11 发布

阅读量172

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_57920269/article/details/129488129

版权

文章详细介绍了如何使用jQuery进行文本内容操作，包括html()、text()和val()方法，以及元素的遍历、创建、添加、删除。此外，还讲解了jQuery中获取和修改元素尺寸及位置的方法，如width(),height(),offset()和position()等。

摘要由CSDN通过智能技术生成

一、文本内容操作

1. 普通元素包含标签内容html（）

html（）获取元素的内容（标签）
html（‘内容’）设置元素内容
注意此处有一个清除元素的方法很类似；在下方注意

        console.log($("div").html()); //得到div标签+内容
        console.log($("div").html("123")); //设置div内容

2. 只有元素内容text()

text（）获取元素的内容
text（‘内容’）设置元素内容

        console.log($("div").text()); //得到div内容
        console.log($("div").text("你好")); //修改div内容

3. input值value值获取

val（） // 获取input的内容
val（‘内容’） //设置input内容

        console.log($("input").val()); //得到input设置的value内容
        console.log($("input").val("你好")); //修改input的value内容

4. 案例- 点击+或者-修改内容并修改小计总值

 $('.increment').click(function () {
        // 当前兄弟文本框的内容
        var n = $(this).siblings('.itxt').val();
        // console.log(n);
        n++;
        $(this).siblings('.itxt').val(n);
        
        // ---------------------------------------------------------------------
        // 4.点击之后的父亲的兄弟小计计算
        // 单价获取
        var p = $(this).parents('.p-num').siblings('.p-price').html();
        // console.log(p);
        p = p.substr(1);
        // console.log(p);
        // 总计计算此处使用小数点保留两位方法
        var price = (p * n).toFixed(2);
        $(this).parents('.p-num').siblings('.p-sum').html('￥' + price);
    })

页面效果：点击加号，数量增加一次，总计值数值也在增加
代码解析：获取到加号并进行点击
- 获取input中的值
- 点击之后就会自增一次
- 当前加号的兄弟值就会变成n
- ---------------------------------------
- 获取当前绑定事件的对应父级进行获取其单价
- 利用字符串内置对象截取不包含￥的内容
- 根据点击次数进行计算
- 最后赋值给小计数

5. 点击按钮修改父级模块背景

        if ($(this).prop('checked')) {
            //添加一个点击之后的背景修改的类名
            $(this).parents('.cart-item').addClass('check-cart-item');
        } else {
            $(this).parents('.cart-item').removeClass('check-cart-item');
        }

二、元素操作

主要是遍历、创建、添加、删除操作

1. 遍历：主要用于处理数据

如果设置相同属性：直接使用隐式迭代

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

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

     $("div").each(function (index, domEle) {
          // 回调函数第一个参数（语义命名）一定是索引号:可以自己指定索引号
          // 第二个参数是dom对象
          console.log(index);
          console.log(domEle);
          //   -----------------------------------------
          //   使用jquery修改元素
          //   dom元素没有直接修改css的方法
          //   domEle.css("color", "red");
          //   把dom对象转换成jquery对象(不需要引号)
          $(domEle).css("color", arr[index]);
          //index作为索引号，因为each遍历所以arr的元素也在变化
        });

  //直接遍历对象
  $.each(
          {
            name: "anan",
            age: 18,
          },
          function (one, two) {
            console.log(one); //对象名
            console.log(two); //对象值
          }
        );
      });

2. 创建元素节点

$("<li></li>") 直接创建

3. 添加元素

element.append('内容') 内部添加到父级元素最后

element.preappend('内容') 内部添加到父级元素最开始

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

elemenr.after('内容') 内容放在目标元素后面

elemenr.before('内容') 内容放在目标元素前面

        var div = $("<div>我是新创建的div</div>"); //创建div
        $("div").after(div);
        $("div").before(div);

4.删除元素

element.remove(); //删除匹配元素

element.empty(); //删除匹配元素的集合所有子节点(包括文本)

例如删除ul下面的所有保存ul

element.html(''); //删除匹配元素的集合所有子节点

例如删除ul下面的所有保存ul

        $("li").remove();   //删除匹配元素节点：ul还在
        $("ul").empty();    //删除的是匹配元素的子节点：包括文本元素但是ul还在
        $("ul").html("");   //等同于empty方法

三、jQuery尺寸、位置

1. 尺寸

如果括号中无参数：获得值而且是数字型
如果有参数数字（无单位）：修改原来的值

    <script>
      $(function () {
        // 1.width()  / height()  获取元素width和height大小值
        console.log($("div").width());
        $("div").width(300); //括号直接添加参数就是修改

        // 2.innerwidth() / innerheight() 获取元素width和height + padding大小
        console.log($("div").innerWidth());
        // 3.outerwidth() / outerheight() 获取元素width和height + padding + border大小
        console.log($("div").outerWidth());
        // 4 .outerwidth(true) / outerheight(true) 获取元素width和height + padding + border + margin大小
        console.log($("div").outerWidth(true));
      });
    </script>

2. 位置

element.offset（）获取距离文档的位置(可带方向（一个或多个）)

offset（）方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
该方法有offset（）.left()/top()两个属性获取指定位置距离
直接在offset（）括号内添加修改对象{top：10...}可以不带数值

element.position（）获取带有定位父级元素的位置：如果父级没有定位则以文档为准

position（）方法用于返回元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
只可获取不可以修改

element.ScrollTop（）/ScrollLeft（）

scrollTop（）方法设置返回被选取元素或被卷去的头部
返回顶部：执行点击事件添加动画，不可以直接修改文档，因为只有元素可以使用动画

    <script>
      $(function () {
        // 1.获取元素距离文档的位置
        // 与父级定位无关
        console.log($(".son").offset()); //以对象形式获得
        console.log($(".son").offset().top); //获取元素的top值
        //设置距离
        console.log(
          $(".son").offset({
            top: 200,
            left: 200,
          })
        );
        // 2.获取距离带有定位的父级元素位置；如果父级没有定位则以文档为准
        console.log($(".son").position()); //值可以获取不可以修改
      });
    </script>

     // 返回顶部
        $(".back").click(function () {
          //   $(document).scrollTop(0);
          $("body ,html").stop.animate({ scrollTop: 0 });
        });
        // 只有元素可以做动画不能是文档（而是html和body做动画）
      });