剛開始時(shí)，經(jīng)常會(huì)混淆html(),text()和val().后來基本能搞清楚，html()和text()的區(qū)別主要在于是否包含標(biāo)簽。而val()針對(duì)的是表單元素。
但是有時(shí)還是不是那么太清晰。
html(),val(),text()都分為有參和無參。
舉例說明它們的不同之處：
html()在沒有參數(shù)的情況下，取得第一個(gè)匹配元素的內(nèi)容。必須要注意的是，即使匹配多個(gè)，也只能取得匹配的第一個(gè)元素。
如：
<body> <p>你選中這段文字后，看看它們的文本顏色和背景色，就能明白::selection的作用。</p> <h3>選中下面的文字，看看它的顏色</h3> <h3>選中下面的文字，看看它的顏色</h3> <h3>選中下面的文字，看看它的顏色</h3> <input type="text" value="aaa"></body></html><script src="../js/jquery-1.11.2.min.js"></script><script> var con = $("p").nextAll("h3"); console.log(con.html());</script>此處的con匹配的3個(gè)h3元素，但是只會(huì)打印出第一個(gè)h3的內(nèi)容。
如果我們此處換成text();那么會(huì)打印出三個(gè)h3的內(nèi)容。
如果帶參數(shù)的話，con.html(“aaa”);和con.text(“aaa”);效果一樣，都能改變3個(gè)h3的內(nèi)容。
不過如果con.html("<span>'aaa'</span>")和con.text("<span>'aaa'</span>");使用html會(huì)將span解析為標(biāo)簽，而text,則會(huì)將作為字符串插入。
<body> <p>你選中這段文字后，看看它們的文本顏色和背景色，就能明白::selection的作用。</p> <h3><span>選中下面的文字，看看它的顏色</span></h3> <h3><span>選中下面的文字，看看它的顏色</span></h3> <input type="text" value="aaa"></body></html><script src="../js/jquery-1.11.2.min.js"></script><script> var con = $("p").nextAll("h3"); console.log(con.html()); console.log(con.text());</script>
再看val();
<body> <input type="text" value="aaa"/> <input type="button" value="按鈕"/> 選擇性別：<input type="radio" name="sex" checked value="男"><label>男</label> <input type="radio" name="sex" value="女"><label>女</label> <br><br> 選擇地區(qū)： <select style="width: 150px"> <option value="1">上海</option> <option value="2">杭州</option> <option value="3">南京</option> <option value="4">麗江</option> </select></body></html><script src="../js/jquery-1.11.2.min.js"></script><script> $(function () { console.log($("input:text").val()); console.log($("input:button").val()); console.log($("input[name='sex']:checked").val()); console.log($("select option:selected").text()); });</script>
此處，可以關(guān)注下如何獲取單選按鈕的值，如何獲取選中的select的值。
需要注意的是，option的value并不是顯示在頁面上的內(nèi)容，因?yàn)樵O(shè)置或者是獲取option的頁面內(nèi)容，需要使用text(),當(dāng)然使用html()亦可。
聯(lián)系客服
