jquery中html()、text()、val()属性用法区别详解
1.HTML
html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档
html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
2.TEXT
text():取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
text(val):设置所有匹配元素的文本内容
与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).
3.VAL
val():获得第一个匹配元素的当前值。
val(val):设置每一个匹配元素的值。
html()、text()、val()区别
首先,html属性中有两个方法,一个有参,一个无参
1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String
例子:
html页面代码:<div><p>Hello</p></div>
jquery代码:$("div").html();
结果:Hello
2.有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象
html页面代码:<div></div>
jquery代码:$("div").html("<p>Nice to meet you</p>");
结果:[ <div><p> Nice to meet you</p></div> ]
其次,text属性中有两个方法,一个有参,一个无参
1. 无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
例子:
html页面代码:<p><b>Hello</b> fine</p>
<p>Thank you!</p>
jquery代码:$("p").text();
结果:HellofineThankyou!
2.有参text(val):设置所有匹配元素的文本内容, 与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象
html页面代码:<p>Test Paragraph.</p>
jquery代码:$("p").text("<b>Some</b> new text.");
结果:[ <p><b>Some</b> new text.</p> ]
最后,val()属性中也有两个方法,一个有参,一个无参。
1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
返回的是一个String、 array
实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <script src="js/jquery.js" type="text/javascript"></script> <!-- <script src="http://code.jquery.com/jquery-latest.js"></script> --> <title> 获取或设置元素的内容</title> <style type="text/css"> body{font-size:15px;text-align:center} div{border:solid 0px #666;padding:5px;width:220px;margin:5px} </style> <script type="text/javascript"> $(function() { var strHTML = $("#divShow").html();// 获取HTML 内容(包含div下面的两个格式) var strHTML2 = $("#divShow b i").html(); //获取HTML内容 var strHTML3 = $("div").html(); var strText = $("#divShow").text();// 获取文本内容 var strText2 = $("div").text(); $("#divHTML").html(strHTML);// 设置HTML 内容 $("#divHTML2").html(strHTML2); //设置HTML内容 $("#divHTML3").html(strHTML3); //设置HTML内容 $("p").html(strHTML); $("#divText").text(strText);// 设置文本内容 $("#divText2").text(strText2);// 设置文本内容 $("a").text(strText); $("select").change(function() { // 设置列表框change 事件 // 获取列表框所选中的全部选项的值 alert($("select").val()); var strSel = $("select").val().join(","); $("input").val(strSel); // 显示列表框所选中的全部选项的值 }) }) </script> </head> <body> <table border="1" bordercolor="#A9A9A9" cellspacing="0"> <tr><td>******************************</td><td>*******************************************</td></tr> <tr> <td><div id="divShow"><b><i>Write Less Do More</i></b></div></td> <td>这是原内容</td> </tr> <tr> <td><div id="divShow"><b><i>Write XXXX Do XXXX</i></b></div></td> <td>这是原内容</td> </tr> <tr><td>******************************</td><td>*******************************************</td></tr> <tr> <td><div id="divHTML">1</div></td> <td>获取原内容(连带内容的格式)后以html方式输出</td> </tr> <tr> <td><div id="divHTML2">2</div></td> <td>获取原内容(不带内容的格式)后以html方式输出</td> </tr> <tr> <td><div id="divHTML3">3</div></td> <td>获取原内容(获取第一个匹配元素的内容)后以html方式输出</td> </tr> <tr> <td><p></p></td> <td>HTML方式设置段落的文本</td> </tr> <tr> <td><p></p></td> <td>如果这个也有内容了,就是设置每个匹配元素的内容</td> </tr> <tr><td>******************************</td><td>*******************************************</td></tr> <tr> <td><div id="divText">4</div></td> <td>获取原内容后以text方式输出</td> </tr> <tr> <td><div id="divText2"></div></td> <td>获取原内容(获取所有匹配元素的内容)后以text方式输出</td> </tr> <tr> <td><a></a></td> <td>TEXT方式设置段落的文本</td> </tr> <tr> <td><a></a></td> <td>如果这个也有内容了,就是设置每个匹配元素的内容</td> </tr> <tr><td>******************************</td><td>*******************************************</td></tr> <tr> <td> <select multiple="multiple"style="height:96px;width:85px"> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> <option value="5">Item 5</option> <option value="6">Item 6</option> </select> <select> <option value="7">Item 7</option> <option value="8">Item 8</option> <option value="9" selected>Item 9</option> </select> </td> <td> </td> </tr> <tr> <td><input ></input></td> <td><input ></input></td> </tr> </table> </body> </html>
以上就是jquery中html()、text()、val()属性用法区别详解的详细内容,更多请关注其它相关文章!
上一篇: HTML5plus移动应用的开发实例分享
下一篇: CSS3代替JS实现交互的方法
推荐阅读
-
JQuery开发中的html(),text(),val()区别解析
-
vue中{{}},v-text和v-html区别与应用详解
-
jquery text(),val(),html()方法区别总结
-
jquery中html、val与text三者属性取值的联系与区别介绍
-
jquery的text(),html()和val()用法
-
详解Html a标签中href和onclick用法、区别、优先级别
-
Python中几种属性访问的区别与用法详解
-
id、name、class在html和css中的区别用法详解
-
JQuery中的html()、text()、val()区别示例介绍
-
jquery text(),val(),html()方法区别总结_jquery