2022-03-27_DOM操作

1.获取、设置内容和属性text()、html() 、 val()、attr()

1.1 获取内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值
如：
alert($("#btn1").attr("id"));

1.2 设置内容

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});

1.3回调函数

• 其中i为序号，origText为原始参数

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});

1.4attr()范例

$("#runoob").attr("href","http://www.runoob.com/jquery");

//多参数
$("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
});

2.append(),prepend() ,after() 和 before()

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

• append和prepend是在该元素的子元素开头和结尾添加元素。
• after和before是在该元素平级的签名和后面添加元素
• 举例如下：

var txt1="<p>文本-1。</p>";
var txt2=$("<p></p>").text("文本-2。");
var txt3=document.createElement("p");
txt3.innerHTML="文本-3。"; 
$("body").append(txt1,txt2,txt3);

3.删除元素

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

• 可以带参数，表示条件过滤
• 举例如下：

$("p").remove(".italic"); //删除class为italic的p元素
$("#div1").empty();
$("#div1").remove();

4.引用

1.jquery教程