JQuery 操作HTML CSS（二）

1).text和.html的区别

text只能获取文本内容

html能获取到元素内部的html标签

$(function () {
    alert($("#pid").text());
});
$(function () {
    console.log($("#pid").html());
});
$(function () {
    console.log($("#aid").attr("href"));//取出属性
});

View Code

2)添加删除元素

①添加：

$(function () {
    $("#btn1").on("click", function () {
        $("#pid").append("这是新内容！");//这是在p标签内添加
    });
});

$(function () {
    $("#btn2").on("click", function () {
        $("#pid").before("往前增加新内容");//这是在p标签外添加
    });
});

function addHtmlEle() {
    $("#pid").append("<a href='http://www.baidu.com'>新增链接</a>");
}

View Code

②删除：

remove:全部删除；

empty:删除该元素内的子元素；

$(function () {
    $("#btn1").on("click", function () {
        //$("div").empty();//只移除元素
        $("div").remove();//包括div在内也全部删除
    });
});

View Code

CSS操作：

$(function () {
    $("div").on("click", function () {
        alert($("div").height());
    });
});

View Code

End