jquery的html()与text()与val()方法

一、html()

用为读取和修改元素的HTML标签对应js中的innerHTML

html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素

<p>
    <strong>Hi!</strong>
</p>

---------------------

$('p').html();//返回p元素的全部内容，包括内容里的标签，返回:<strong>Hi!</strong>

---------------------

$('td[aria="View_CHECK_NAME"]').each(function(){
	if($(this).html()=="yes"){
		$(this).attr("style","color:red; text-align:center;cursor:pointer");
	}
})

二、text()

用来读取或修改元素的纯文本内容对应js中的innerText

text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上

<p>
    <strong>Hi!</strong>
</p>

---------------------
$('p').text();/*返回p元素的文本内容，不包括内容里的标签，只返回:Hi! */

---------------------

text()和html()的区别 :

(1)text()只能返回文本内容，而html()可以返回元素的全部内容 (2)text(str)设置元素内容时，只有文本内容有效，其余内容无效；而html(str)设置元素内容时，所有内容有效(包括标签） (3)text()返回所有匹配元素的内容，叠加；而html()只返回第一个匹配元素的内容

<p>Hi!</p><p>Hello!</p>

---------------------

$('p').text();//返回内容为所有p元素的内容叠加:Hi!Hello!

---------------------

$('p').html();//返回内容为第一个p元素的内容:Hi!

---------------------

三、val();

用来读取或修改表单元素的value值，如button,text,hidden

val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上

val是属性，只有有该属性的对象才能调用

<input type='text' value='xxx'/> 这个就需要用 val()。

关于三者的区别

1. .val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

$('p').html();    　　　　　　　　　　 //返回p元素的html内容
$("p").html("Hello <b>nick</b>!");  //设置p元素的html内容
$('p').text();    　　　　　　　　　　 //返回p元素的文本内容
$("p").text("nick");    　　　　　　　//设置p元素的文本内容
$("input").val();    　　　　　　　　 //获取文本框中的值
$("input").val("nick");     　　　　 //设置文本框中的内容

2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。


   <script type="text/javascript">
       $(document).ready(function(){
           $("#btn1").click(function(){
              $(".aa").text(function(i,oriText){
              	alert("原文本："+oriText+"新文本：hello world! index("+i+")");
              });
           });
       });
 
 
   </script>
  </head>
  <body>
     <button id="btn1">测试下标</button>
     <div>
        <p class="aa">aa1</p>
        <p class="aa">aa2</p>
        <p class="aa">aa3</p>
        <p class="aa">aa4</p>
        <p class="aa">aa5</p>
     </div

这样每次的index依次为0,1,2,3,4;

jquery的html()与text()与val()方法

猜你喜欢