jQuery - 捕获内容和属性

怼烎@ 2023-06-15 09:47 21阅读 0赞

前言：

jQuery拥有可以操作HTML元素和属性的强大方法

--------------------

### 1.用过jQuery来获得内容的三个方法： ###

*  text() ： 设置或者返回所选元素的文本内容
 *  html():   设置或返回所选元素的内容（包括HTML标记）

**包括HTML标记   是 text() 和 html() 两个方法的最大区别**

*  val() ： 设置或者返回表单字段的值

案例：

<body>
        <div>
                <span>hahah </span>
        </div>
        <input type="text" value="请输入内容">
        <script>
            //1.获取设置元素内容 html（）
            console.log($("div").html());
            //结果为 <span>hahah </span>
    
            //设置元素内容
            $("div").html("哈哈");
    
            //2.获取设置元素文本内容 text()
            console.log($("div").text());
            //结果为 哈哈
    
            $("div").text("23");
    
            //3.获取设置表单值
            console.log($("input").val);
            $("input").val("123");
        </script>
    </body>

### 页面中显示的结果：   ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70][]

--------------------

### 2.通过jQuery来获得元素属性  ###

**2.1 设置或获取元素固有属性  prop()方法**

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href 比如<input>元素里的type属性

**2.1.1 获取属性语法： **

prop("属性")

** 2.1.2 设置属性语法：**

prop（"属性"，"属性值"）

案例：

**2.2.设置或获取元素自定义属性值  attr() 方法 **

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

**2.2.1获取属性语法：**

attr("属性")

**2.2.2 设置属性语法：**

attr("属性","属性值");

案例：

<div index="1" data-index="2">我是div</div> 
    
    
      //元素自定义属性 我们通过 attr()
                console.log($("div").attr("index"));
                $("div").attr("index",4);
                console.log($("div").attr("data-index"));

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191121170055439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70