jQuery HTML

2 jQueryHTML讲解：
引入：
jQueryDom操作。

讲解内容：

1. 获取/修改节点

jQuery 中非常重要的部分，就是操作 DOM 的能力。
常见的获取/修改节点的方法如下

代码展示：

$(function () {
    $("#btn1").click(function () {
        console.log($("#formlabel").text());
    })
    $("#btn2").click(function () {
        console.log($("#formlabel").html());
    })
    $("#btn3").click(function () {
        console.log($("#formlabel").text('<span>hello,Javascript!</span>'));
    })
    $("#btn4").click(function () {
        console.log($("#formlabel").html('<span style="color:red">hello,Javascript!</span>'));
    })
    $("#btn5").click(function () {
        console.log($(":input[name=username]").val());
    })
    $("#btn6").click(function () {
        console.log($(":input[name=username]").val('king'));
    })
})

执行效果：

2.attr与prop
jQuery中，attr()与prop()都可以用来修改节点的属性，但是具体使用细节上还是有区别的。
attr()与prop()区别见下表

代码展示：

$(function(){
    $("#btn1").click(function(){
        $("#url").text('京东网');
        $("#url").attr("href","https://www.jd.com");
    })
    $("#btn2").click(function(){
        $("#url").text('京东网');
        $("#url").prop("href","https://www.jd.com");
    })
    $("#btn3").click(function(){
        $("#url").attr("action","剁手节快乐！");
        alert($("#url").attr('action'));
    })
    $("#btn4").click(function(){
        $("#url").prop("href","剁手节快乐！");
        alert($("#url").attr('action'));
    })
    $("#btn5").click(function(){
        alert($("#rememberme").attr('checked'));
    })
    $("#btn6").click(function(){
        alert($("#rememberme").prop('checked'));
    })

})

执行效果：

3.添加/删除节点
通过 jQuery，可以很容易地添加(删除)元素/内容。常用方法如下：

代码展示：

function deleteItem(obj){
    console.log('deleting...');
    $(obj).parent().parent().remove();
}
$(function(){
    $("#add").click(function(){
        let id = $("#itemid").val();
        let name = $("#itemname").val();
        let price = $("#price").val();
        let number = $("#number").val();
        let html = "<tr><td>"+id+"</td><td>"+name+"</td><td>"+price+"</td><td>"+number+"</td><td><input type='button' value='删除' onclick='deleteItem(this)'></td></tr>";
        $("#cartlist").append(html)
    })

    $("#clear").click(function(){
        $("#cartlist").empty();
        let html = "<tr>\n" +
            "                <th>编号</th>\n" +
            "                <th>名称</th>\n" +
            "                <th>单价</th>\n" +
            "                <th>数量</th>\n" +
            "                <th>操作</th>\n" +
            "            </tr>"

        $("#cartlist").append(html);
    })
})

运行效果：

本章总结：
学完本章内容应熟练掌握以下内容：
html常用函数：

text()/html()/val()/attr()/prop()。

学员问题
问题：说说text()/html()/val()的区别?
答案：text()获得是纯文本，html()获得是html,val()获得是表单元素的值(只能用在表单元素上)。
问题：说说prop()与attr()的区别?
答案：