jQuery学习之------html()、text()和val()

jQuery学习之------html()、text()和val()

.html(),.text()和.val()的差异总结：  （来源：慕课网）

1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
2. .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
3. .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

例子：

<div class="soulsjie">
    <h1>soulsjie</h1>
    <h3>.html()与.text()</h3>
</div>

<h4>显示通过html方法获取到的内容</h4>
    <p></p>
<h4>显示通过text方法获取到的内容</h4>
    <p></p>

 

<script type="text/javascript">
        //显示出html方法获取到的内容
        //.html()是整个html文档结构
        $('p:first').text( $(".soulsjie").html() )

　　　//显示出text方法获取到的内容
        //.text()是文本内容的合集
        $('p:last').text( $(".soulsjie").text() )
</script>

输出结果：

简单的说使用.html()能够获取到HTML的标签和内容，而使用.text()只能获取到标签的内容

//通过.text()的回调，获取原本的内容，修改，在重新赋值

<script type="text/javascript">
        $(".left a:first").text(function(idnex,text){

　　// index是索引值的意思，索引的就是$('.left a:first')，另一个参数text是$('.left a:first')中已有的文本内容
            return '增加新的文本内容' + text
        })
    </script>

val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。

 

val()无参数，获取匹配的元素集合中第一个元素的当前值

val( value )，设置匹配的元素集合中每个元素的值

val( function ) ，一个用来返回设置值的函数

<select id="soulsjie">
        <option>选项01</option>
        <option selected="selected">选项02</option>
 </select>
<input id="test" type="text" value="click a button" />

<script type="text/javascript">

//通过val获取选择框选定的值
 var aa= $("#soulsjie").val()；

//通过给定的值给文本框内容赋值
$("#test").val('修改文本框的内容') ；

//通过函数的返回值给文本框内容赋值
        $("#test").val(function(){
            return 1+5  
        }) ；
</script>