jQuery的一些基本操作（二）

只会浑

已于 2022-08-22 21:48:06 修改

阅读量253

点赞数 1

于 2022-05-23 09:46:36 首次发布

本文链接：https://blog.csdn.net/txl2498459886/article/details/124920345

版权

jQuery 文本内容类名操作样式设置属性管理

关键词由CSDN通过智能技术生成

在jQuery的一些基本操作（一）中，我们说到了jQuery的筛选器。今天我们来讲讲接下来的内容。

一、操作元素文本内容

jQuery操作元素文本内容有三种，分别是：

1、html()：等价于原生JS中的innerHTML方法。

获取--html()：以字符串的形式返回，包括HTML标签。

设置--html("要设置的内容")：可以识别并解析HTML结构字符串。

2、text()：

获取--text()：以字符串的形式返回,不包括html标签

设置--text("要设置的内容"):只能是文本,如果有html标签，则不会进行解析

3、val()：元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值。

获取--val()：返回当前元素的值。

设置--val("要设置的内容")：只能是纯文本内容。

接下来当然就是举例咯（老规矩，别忘了引入jquery文件！）：

<div>
      hello
      <p>你好，世界</p>
      world
</div>
<input type="text" value="hello world" />

在测试用例的时候，自己把注释取消掉，挨个测试。

<script>      
      //   html（）获取
      //   console.log($("div").html());
      //   html（）设置
      //   $("div").html("我是后面设置的内容");
      //   $("div").html("<h1>我是后面设置的内容</h1>");

      //   console.log($("div").text());
      //   $("div").text("我是后面设置的内容");
      //   $("div").text("<h1>我是后面设置的内容</h1>");

      //   console.log($("input").val());
      //   $("input").val("我是后来设置的");
</script>

二、操作元素类名

jQuery提供的操作元素类名常见的方法有三种：

1、addClass()

语法：元素集合.addClass(需要添加的类名)

2、removeClass()

语法：元素集合.removeClass(需要移除的类名)

3、toggleClass()

语法：元素集合.toggleClass(需要切换的类名)

切换：如果本身有这个类名，那么就是删除，如果本身没有这个类名，那么就是添加。

这里其实没啥好说的，咱就直接上代码：

<div class="a b c d"></div>
<button>切换类名</button>

<script>

      // 1、addClass()
      $("div").addClass("e");
      //   2、removeClass()
      $("div").removeClass("a");
      //   3、toggleClass()
      var btn = document.querySelector("button");
      btn.onclick = function () {
        $("div").toggleClass("f");
      };
</script>

三、操作元素样式

在jQuery中，提供一个操作样式的方法：css()。

该方法总共有三种用法：

1、获取样式：可以获取到元素的行内样式和非行内样式。

语法：元素集合.css("要获取的样式名称")。

返回值：该样式的样式值。

2、设置样式：

语法：元素集合.css("要设置的样式名","样式值")

3、批量设置样式：

语法：元素集合.css({

你所有需要设置的样式，如：

width:100px,

height:100px

})

咱们在head标签中通过style标签对div写一个样式，然后在div标签中写上一个行内样式，方便测试。

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
      div {
        height: 200px;
        background-color: skyblue;
      }
    </style>
</head>

<body>
    <div style="width: 100px"></div>
</body>

<script>
      //   console.log($("div").css("width"));
      //   console.log($("div").css("height"));
      //   console.log($("div").css("background-color"));

      //   当需要给一个元素设置值为px单位的时候，可以省略不写单位
      //   $("div").css("width", "300px");
      //   $("div").css("width", 300);
      //   $("div").css("background-color", "red");

      // 批量设置样式
      $("div").css({
        width: 260,
        height: 320,
        backgroundColor: "red",
        opacity: 0.5,
      });
</script>

四、操作元素属性

jQuery提供操作属性的方法有两对：attr()和removeAttr()、prop()和removeProp()。

1、attr() 和 removeAttr()：

1.1 attr()

作用：可以设置和获取元素的属性。

获取：元素集合.attr("你要获取的属性名")

返回值：该属性名对应的属性值

设置：元素集合.attr(属性名,属性值)

注意：一般用于操作元素的自定义属性（也可以操作原生属性。），attr操作的所有属性都会直接的出现在元素标签身上。

1.2 removeAttr()

作用：对元素的属性进行删除操作

语法：元素集合.removeAttr("属性名")

<div id="box" hello="world">我是一个div标签</div>

      // 1、attr()
      console.log($("div").attr("hello"));
      console.log($("div").attr("id"));
      //   $("div").attr("a", 100);
      //   $("div").attr("id", "container");
      //   2、removeAttr()
      //   $("div").removeAttr("hello");
      //   $("div").removeAttr("id");

2、prop()和removeProp()：

2.1 prop()

可以获取和设置元素的属性。

设置：

语法：元素集合.prop("属性名"，"属性值")

获取：

语法：元素集合.prop("要获取的属性名")

返回值：属性值

注意：

1、当prop设置元素的原生属性，会直接影响在元素标签身上；当prop设置元素自定义属性，不会直接影响在父元素标签身上，而是会响应在元素对象身上。

2、prop方法不能获取元素标签身上的自定义属性，只能获取到通过prop方法自己设置的自定义属性。

2.2 removeProp()

用来删除元素属性。

语法：元素集合.removeProp("要删除的属性名")。

注意：不能删除原生属性，只能删除由prop自定义的属性。

<div id="box" hello="world">我是一个div标签</div>

      // prop

      $("div").prop("style", "background-color:red");
      $("div").prop("id", "container");
      $("div").prop("a", "100");
      //   console.log($("div").prop("hello")); //undefined
      console.log($("div").prop("style"));
      console.log($("div"));

      // removeProp

      $("div").removeProp("a");
      console.log($("div"));

好啦，这篇文章的内容就到这，大家好好消化一下，有什么不懂的可以私聊我哦，也欢迎大家在评论区留言，互相探讨和进步~

作者其他相关文章：

jQuery的一些基本操作（一）

jQuery的一些基本操作（三）

jQuery的一些基本操作（四）