jQuery（二）

最新推荐文章于 2021-06-04 22:12:35 发布

原创最新推荐文章于 2021-06-04 22:12:35 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文深入讲解了jQuery如何操作HTML元素，包括获取和设置文本、HTML内容及表单字段的值，以及添加和删除元素的方法。重点介绍了text()、html()、val()、append()、prepend()、after()、before()、remove()和empty()等关键函数。

jQuery操作html

jQuery 拥有可操作 HTML 元素和属性的强大方法。
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法

    text() ----------设置或返回所选元素的文本内容
    html() ----------设置或返回所选元素的内容（包括 HTML 标记）
    val() -----------设置或返回表单字段的值
    
        $("#btn1").click(function(){
          alert("值为: " + $("#test").val());
        });
        $("#btn1").click(function(){
          alert("Text: " + $("#test").text());
        });
        $("#btn2").click(function(){
          alert("HTML: " + $("#test").html());
        });

设置内容同样也是用这三个方法

    text() ------ 设置或返回所选元素的文本内容
    html() ------ 设置或返回所选元素的内容（包括 HTML 标记）
    val() ------- 设置或返回表单字段的值
    
    $("#btn1").click(function(){
        $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
        $("#test3").val("RUNOOB");
    });

jQuery添加和删除元素

添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：

    append() ------- 在被选元素的结尾插入内容
    prepend() ------ 在被选元素的开头插入内容
    after() -------- 在被选元素之后插入内容
    before() ------- 在被选元素之前插入内容
    
    $("p").append("追加文本");
    $("p").prepend("在开头追加文本");
    $("img").after("在后面添加文本");
    $("img").before("在前面添加文本");

删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：

    remove() ------ 删除被选元素（及其子元素）
    empty() ------- 从被选元素中删除子元素
    $("#div1").remove();
    $("#div1").empty();