jQuery中的val、text和html方法

1. .val()方法
（1）.val()
不带参数
return：string/number/array
获取所有匹配元素中的第一个元素的值，主要获取表单中input、select和textarea标签的值。
如果是<select multiple="multiple">，该方法返回的是包括所有选中项值的数组，若无选中项则返回null；
如果是select标签selected项，checkbox标签/radio标签的checked项，则
$('select.foo option:selected').val();
$('input:checkbox:checked').val();
$('input:radio[name=bar]:checked').val();

（2）.val( value )
value：string/array
return：jQuery
设置所有匹配元素的值。如果该元素有selected/checked属性，value=选项值的项变成selected/checked。

（3）.val( function(index, value) )

2. .html()方法
（1）.html()
不带参数
return：string
获取所有匹配元素中的第一个元素的html值，不适用于xml。该方法使用了浏览器的innerHTML属性，故存在浏览器的兼容性问题。

（2）.html( htmlString )
htmlString：html string
return：jQuery
设置所有匹配元素的值，该值是html代码。

（3）.html( function(index, oldhtml) )

3. .text()方法
（1）.text()
不带参数
return：string
获取所有匹配元素中的值。该方法不能用于表单中的标签或页面中的脚本/代码。

（2）.text( textString )
textString：string
return：string
设置所有匹配元素中的值。该方法不能用于表单中的标签，页面中的脚本/代码或xml。

（3）.text( function(index, text) )

4. 实例

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
    <ul>
        <li>list item 1</li>
        <li>list <strong>item</strong> 2</li>
    </ul>
</div>

$('div.demo-container').text() 返回 Demonstration Box list item 1 list item 2

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
</div>

$('div.demo-container').html();返回 <div class="demo-box">Demonstration Box</div>
$('div.demo-container').text();返回 Demonstration Box

转载于:https://my.oschina.net/wzwitblog/blog/128413