jQuery HTML之捕获、设置、元素添加、元素删除

墨蓝 2022-06-14 10:09 307阅读 0赞

## **一、jQuery:捕获HTML** ##

1.1 jQuery - 获取内容和属性  
获得内容 - text()、html() 以及 val()  
三个简单实用的用于 DOM 操作的 jQuery 方法：

>  *  text() - 设置或返回所选元素的文本内容
>  *  html() - 设置或返回所选元素的内容（包括 HTML 标记）
>  *  val() - 设置或返回表单字段的值  
>     1.2 获取属性 - attr()
>  *  jQuery attr() 方法用于获取属性值。

## **二、jQuery设置** ##

设置内容 - text()、html() 以及 val()

>  *  text() - 设置或返回所选元素的文本内容
>  *  html() - 设置或返回所选元素的内容（包括 HTML 标记）
>  *  val() - 设置或返回表单字段的值

$("#btn1").click(function () { 
           alert("text "+$("#it").val());//text获取标签中的内容
        });
    
        $("#btn2").click(function () { 
            alert("text："+$("#aid").attr("href"));//text获取标签中的内容
        });

## **三、jQuery添加内容** ##

添加内容的方法有：

>  *  append() - 在被选元素的结尾插入内容
>  *  prepend() - 在被选元素的开头插入内容
>  *  after() - 在被选元素之后插入内容
>  *  before() - 在被选元素之前插入内容

addContent.html

<p id="p1">hello</p>
    <p id="p2">hello</p>
    <button id="btn1">按钮01</button>
    <button id="btn2">按钮02</button>
    <button onclick="appendText()">按钮03</button>

addContent.js

/*append * prepend * before * after * */
    
    $(document).ready(function () { 
       $("#btn1").click(function () { 
      // $("#p1").append("插入内容");
           $("#p1").prepend("插入内容,");
       }) ;
    
       //添加内容
       $("#btn2").click(function () { 
    // $("#p2").before("在前面插入，会换行");
            $("#p2").after("在后面插入，会换行");
       });
    });
    
    //添加元素
    function appendText() { 
        /* * html、jQuery、DOM*/
        var text1 = "<p>1</p>";
        var text2 = $("<p></p>").text("2");
        var text3 = document.createElement("p");
        text3.innerHTML="3";
        $("body").append(text1,text2,text3);
    }

## **四、jQuery删除元素** ##

删除元素的方法有：

>  *  remove() - 删除被选元素（及其子元素）
>  *  empty() - 从被选元素中删除子元素

delete.html

<div id="div" style="height: 200px;width: 200px;border:1px solid black;background-color: aqua">
        hi
        <p>delete</p>
        <p>123</p>
    </div>
    <button id="btn">删除</button>

delete.js

/* * remove * empty * */
    $(document).ready(function () { 
       $("#btn").click(function () { 
        // $("#div").remove();//全部删除
          $("#div").empty();//删除子元素
       }) ;
    });