`
Action-人生
  • 浏览: 98588 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery获取文本节点之 text()/val()/html() 方法区别

阅读更多
http://www.jb51.net/article/26431.htm
在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?
在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明:
首先,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
例子:
html页面代码 :
复制代码 代码如下:

<p></p><br/>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>

jquery代码:$("p").append( "<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", "));
结果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
2.有参val(val):设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象
html页面代码:
<input type="text"/>
jquery代码:$("input").val("hello world!");
结果:hello world!
分享到:
评论

相关推荐

    jquery 截取长文本和css

    &lt;TITLE&gt;JQUERY 文本截取方法&lt;/TITLE&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt; &lt;script type="text/javascript" src="jquery-1.3.2.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt;...

    JQuery给元素添加/删除节点比如select

    //获取Select选择的Text var checkValue=jQuery(“#select_id”).val(); //获取Select选择的option Value var checkIndex=jQuery(“#select_id “).get(0).selectedIndex; //获取Select选择的索引值 var maxIndex=...

    jQuery操作Select选择的Text和Value(获取/设置/添加/删除)

    jQuery获取Select选择的Text和Value: 选择一项试试看 语法解释: 代码如下: . $(“#select_id”).change(function(){//code…}); //为Select添加事件,当选择其中一项时触发 . var checkText=$(“#select_id”)....

    jQuery DOM 1.pptx

    JavaScript+jQuery 网页特效设计...jQuery text() 方法和html()方法 &lt;/script&gt; $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){

    jQuery详细教程

    jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() ...

    jquery.zclip.js复制到剪贴板

    &lt;script type="text/javascript"&gt; $(function(){ $("#copy").zclip({ path: "${basePath}/js/bbs/invite/ZeroClipboard.swf",/* flash所在项目地址 */ copy: function(){ return $("#copyUrl").val(); }, ...

    jQuery获取Select标签的手册

    jQuery获取Select标签的手册 单选组radio: $("input[type=radio][checked]").val(); 下拉框select的value值: $('select').val(); 下拉框select选中的text 值:$("select").find("option:selected").text();

    jQuery操作attr、prop、val()/text()/html()、class属性

    主要介绍了jQuery操作attr、prop、val()/text()/html()、class属性 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    jQuery核心语法

    注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的...

    jquery获取input表单值的代码

    jquery取radio单选按钮的值$(“input[name=’items’]:checked”).... 获取select被选中项的文本 var item = $(“select[name=items] option[selected]”).text(); select下拉框的第二个元素为当前选中值 $(‘#select_

    jQuery中text() val()和html()的区别实例详解

    主要介绍了jQuery中text() val()和html()的区别实例详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

    JQuery中对Select的option项的添加、删除、取值

    jQuery获取Select选择的Text和Value: 代码如下: $(“#select_id”).change(function(){//code…}); //为Select添加事件,当选择其中一项时触发 var checkText=$(“#select_id”).find(“option:selected”).text(); ...

    JQuery综合练习2.docx

    1、jQuery 对象可以进行隐式迭代: 为选取的所有的 p 节点都添加了 onclick 响应函数。jQuery 对象本身就是一个 DOM 对象的数组。...加参数为属性节点添加文本值(文本节点),和 text() 类似的方法: attr()、val()

    jQuery操作select下拉框的text值和value值的方法

    1、jquery获取当前选中select的text值 var checkText=$(“#slc1”).find(“option:selected”).text(); 2、jquery获取当前选中select的value值 var checkValue=$(“#slc1”).val(); 3、jquery获取当前选中select的...

    详解jQuery获取特殊属性的值以及设置内容

    jQuery特殊属性方法 val方法 val方法适用于设置和获取表单元素的值,例如input、textarea的值 //获取name的值 $("#name").val(""); //设置name的值 $("#name").val("张三"); html方法 html方法相当于innerHTML,会...

    jquery 学习之二 属性 文本与值(text,val)

    jquery 学习之二 属性 文本与值(text,val),学习jquery的朋友可以参考下。

    jquery中html、val与text三者属性取值的联系与区别介绍

    本文为大家详细介绍下jquery中,html、val与text三者属性取值的联系与区别,下面有个不错的示例,感兴趣的朋友不要错过

    jquery获取select选中值的方法分析

    本文实例讲述了jquery获取select选中值的方法。分享给大家供大家参考,具体如下: 误区: 以前一直以为jquery获取select中option被选中的文本值,是这样写的: 复制代码 代码如下:$(“#s”).text(); //获取所有...

Global site tag (gtag.js) - Google Analytics