`
Action-人生
  • 浏览: 105807 次
  • 性别: 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!
分享到:
评论

相关推荐

    JQ 获取和设置内容 text() html() val()

    本篇文章将详细讲解jQuery中获取和设置内容的三个主要方法:`text()`, `html()`, 和 `val()`。这些方法在网页动态交互和数据处理中扮演着至关重要的角色。 首先,`text()`方法用于获取或设置元素的文本内容。当你想...

    jquery插入节点.

    另外,jQuery还提供了`.html()`, `.text()`, 和 `.val()` 方法来设置或获取元素的HTML内容、纯文本或表单输入值。这些方法在处理节点内容时非常有用,可以方便地更新页面上的信息。 总之,jQuery的节点插入功能极大...

    js与jQuery的常用总结

    这里,我们首先创建了一个空数组`valuesChecked`,然后通过`$("input[name='pks']:checked")`选择了所有被选中的具有特定名称的输入元素,并使用`each()`方法遍历它们,将每个元素的值通过`val()`方法获取后添加到...

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

    `find("option:selected")` 用于找到当前被选中的 `&lt;option&gt;` 元素,然后调用 `.text()` 方法获取其文本内容。`.val()` 方法则是用来获取 `&lt;select&gt;` 元素的当前值,即选中项的 `value` 属性。`.get(0)` 将 jQuery ...

    jQuery详细教程

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

    jQuery 文档操作方法

    jQuery 文档操作方法详解 jQuery 文档操作方法是 jQuery 库中的一组强大且实用的函数,用于操作 HTML 和 XML 文档中的元素。这些方法可以帮助开发者快速高效地操作文档结构,提高开发效率和代码质量。本文将对 ...

    jquery取值的问题

    此外,jQuery还有`text()`和`html()`方法,分别用于获取或设置元素的纯文本内容和HTML内容: ```javascript var textContent = $('p').text(); $('p').text('新的文本内容'); var htmlContent = $('#myDiv').html...

    JQUERY 常用方法大全

    ### JQUERY 常用方法大全 #### 一、Attribute(属性操作) 1. **`.addClass()`** - **用途**:为匹配元素添加一个或多个类。 - **示例**: ```javascript $("p").addClass("highlight"); ``` 这将为所有的`...

    JQuery学习笔记(日常积累)

    - `text()`方法类似,但用于获取或设置纯文本内容,不解析HTML标签。 - `height()`和`width()`用于获取或设置元素的高度和宽度,如`$("#msg").height("300")`设置高度为300像素。 - `val()`方法用于获取或设置...

    jQuery页内查找关键词

    3. **匹配关键词**:对于每个文本节点,使用JavaScript的`.includes()`方法检查是否包含用户输入的关键词。如果包含,该节点就是我们要找的。 4. **高亮显示**:找到匹配的文本节点后,我们需要将其替换为包含HTML...

    Java>jquery-easyui_combotree异步树的生成代码示例(NEW)

    // 假设此方法获取子节点数据 // 将children转换为JSON并返回 return new ActionForward("/json", true); } ``` - **节点文本数据处理**:当`optype=gettext`时,根据ID查询节点的文本值并返回。 ```java ...

    快速学习JQuery

    - 获取文本内容:`$("selector").text()` - 设置文本内容:`$("selector").text("新的文本")` - **.html()**:用于获取或设置HTML内容 - 获取HTML内容:`$("selector").html()` - 设置HTML内容:`$("selector")...

    jquery方法大全

    - **text()**:获取或设置匹配元素集合中每个元素的文本内容。 - **val()**:获取或设置表单元素(如input)的值。 - **removeAttr()**:移除元素的一个或多个属性。 - **toggleClass()**:如果存在(不存在)就切换...

    jquery的父、子、兄弟节点查找,节点的子节点循环方法

    4. **jQuery.contents()**: 这个方法返回元素内的所有内容,包括子元素和文本节点。 5. **jQuery.prev()**: 查找当前元素的前一个兄弟元素。 6. **jQuery.prevAll()**: 返回所有在当前元素之前的兄弟元素。 7. **...

    jquery获取选中的文本和值的方法

    获取select下拉框选中的文本使用的是jQuery的.text()方法。类似地,我们可以在选中option元素上调用.text()方法来获取其显示的文本内容。示例中的$("#selectionoption:selected").text()就是选取id为selection的...

    jquery-easyui_combotree异步树的生成代码示例(NEW)

    ### jQuery EasyUI Combotree 异步树生成详解 #### 一、概述 在Web开发中,树形结构是常用的数据展示方式之一,特别是在需要层级显示数据时尤为常见。jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合,它简化了...

Global site tag (gtag.js) - Google Analytics