<div>
        <div id="htmlId1">
            htmlId1
        </div>
        <div id="htmlId2">
        </div>
        <div id="htmlId3">
        </div>
        <div id="htmlId4">
        </div>
 
 
        <input id="input1" value="input1">
        </input>
        <input id="input2">
        </input>
        <input id="input3">
        </input>
        <input id="input4">
        </input>
 
        <p>
            p1
        </p>
        <p>
            p2
        </p>
        <p>
            p3
        </p>
 
    </div>

 console.log("1:" + $('#htmlId1').html())//成功取值
    console.log("2:" + $('#htmlId1').val())//無法取值
    console.log("3:" + $('#htmlId1').text())//成功取值
    $('#htmlId2').html('htmlId2')//成功賦值
    $('#htmlId3').val('htmlId3')//無法賦值
    $('#htmlId4').text('htmlId4')//成功賦值
    //div元素使用html或text取值賦值均可，使用val無法取值和賦值
    
    console.log("4:" + $('#input1').html())//無法取值
    console.log("5:" + $('#input1').val())//成功取值
    console.log("6:" + $('#input1').text())//無法取值
    $('#input2').html('input2')//無法賦值
    $('#input3').val('input3')//成功賦值
    $('#input4').text('input4')//無法賦值
    //input元素使用val取值賦值均可，無法使用html或text取值賦值
    
    console.log("7:" + $('p').html())//返回第一個p
    console.log("8:" + $('p').val())//返回空
    console.log("9:" + $('p').text())//返回如下：
    //p1
    //p2
    //p3
    //p元素，html返回第一個p的值，val返回空，text返回所有p元素的值
 
    // $('p').html('p4')//三個p均賦值為p4
    // $('p').val('p4')//三個p均沒有賦值為p4
    // $('p').text('p4')//三個p均賦值為p4
    //p元素，html和text均把所有的p賦值，val無法給p賦值
 



.html()用為讀取和修改元素的HTML標籤 對應js中的innerHTML

.html()是用來讀取元素的HTML內容（包括其Html標籤）,.html()方法使用在多個元素上時，只讀取第一個元素


.text()用來讀取或修改元素的純文字內容 對應js中的innerText

text()用來讀取元素的純文字內容，包括其後代元素;.text()方法不能使用在表單元素上


.val()用來讀取或修改表單元素的value值

.val()是用來讀取表單元素的"value"值,.val()只能使用在表單元素上

關於三者的區別

1. .val()方法和.html()相同，如果其應用在多個元素上時，只能讀取第一個表單元素的"value"值，但是.text()和他們不一樣，如果.text()應用在多個元素上時，將會讀取所有選中元素的文字內容。
 

2 .html(),.text(),.val()都可以使用回撥函式的返回值來動態的改變多個元素的內容。