[TOC]

JQuery DOM

4.1、操作文本

常用方法

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>操作文本</title>
</head>
<body>
 <div id="div">我是div</div>
 <input type="button" id="btn1" value="获取div的文本">
 <input type="button" id="btn2" value="设置div的文本">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
  //1. html()   获取标签的文本内容
  $("#btn1").click(function(){
      //获取div标签的文本内容
      let value = $("#div").html();
      alert(value);
  });

  //2. html(value)   设置标签的文本内容，解析标签
  $("#btn2").click(function(){
      //设置div标签的文本内容
      //$("#div").html("我真的是div");
      $("#div").html("<b>我真的是div</b>");
  });
</script>
</html>

4.2、操作对象

常用方法
代码实现
```html <!DOCTYPE html>
```
<a name="43fbd204"></a>
## 4.3、操作样式

-  **常用方法**<br />![操作样式.png](https://cdn.nlark.com/yuque/0/2021/png/1455470/1629611719066-4201046f-3df4-4ca5-adce-cfd452b82d89.png#clientId=uf0a00ccf-bfb5-4&from=drop&id=u02e96212&margin=%5Bobject%20Object%5D&name=%E6%93%8D%E4%BD%9C%E6%A0%B7%E5%BC%8F.png&originHeight=273&originWidth=628&originalType=binary&ratio=1&size=47539&status=done&style=none&taskId=uf22bebc0-bca7-4657-9b03-41cf55508b6)
-  **代码实现**  
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作样式</title>
    <style>
        .cls1{
            background: pink;
            height: 30px;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid red;" id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;
    <input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;
    <br><br><br>
    <input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;
    <input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.css(name)   获取css样式
    $("#btn1").click(function(){
        alert($("#div").css("border"));
    });

    // 2.css(name,value)   设置CSS样式
    $("#btn2").click(function(){
        $("#div").css("background","blue");
    });

    // 3.addClass(value)   给指定的对象添加样式类名
    $("#btn3").click(function(){
        $("#div").addClass("cls1");
    });

    // 4.removeClass(value)  给指定的对象删除样式类名
    $("#btn4").click(function(){
        $("#div").removeClass("cls1");
    });

    // 5.toggleClass(value)  如果没有样式类名，则添加。如果有，则删除
    $("#btn5").click(function(){
        $("#div").toggleClass("cls1");
    });

</script>
</html>
```
4.4、操作属性
- 常用方法
- 代码实现
```html <!DOCTYPE html>

男女

```
  
  4.5、小结
  - 操作文本
    - html() html(…)：获取或设置标签的文本，解析标签。
  - 操作对象
    - $(“元素”)：创建指定元素。
    - append(element)：添加成最后一个子元素，由添加者对象调用。
    - prepend(element)：添加成第一个子元素，由添加者对象调用。
    - before(element)：添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用。
    - after(element)：添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用。
    - remove()：删除指定元素(自己移除自己)。
  - 操作样式
    - addClass(value)：给指定的对象添加样式类名。
    - removeClass(value)：给指定的对象删除样式类名。
  - 操作属性
    - attr(name,[value])：获得/设置属性的值。
    - prop(name,[value])：获得/设置属性的值(checked，selected)。

JQuery DOM

JQuery DOM

4.1、操作文本

4.2、操作对象

4.4、操作属性

4.5、小结