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中获取和设置内容的三个主要方法:`text()`, `html()`, 和 `val()`。这些方法在网页动态交互和数据处理中扮演着至关重要的角色。 首先,`text()`方法用于获取或设置元素的文本内容。当你想...
另外,jQuery还提供了`.html()`, `.text()`, 和 `.val()` 方法来设置或获取元素的HTML内容、纯文本或表单输入值。这些方法在处理节点内容时非常有用,可以方便地更新页面上的信息。 总之,jQuery的节点插入功能极大...
这里,我们首先创建了一个空数组`valuesChecked`,然后通过`$("input[name='pks']:checked")`选择了所有被选中的具有特定名称的输入元素,并使用`each()`方法遍历它们,将每个元素的值通过`val()`方法获取后添加到...
`find("option:selected")` 用于找到当前被选中的 `<option>` 元素,然后调用 `.text()` 方法获取其文本内容。`.val()` 方法则是用来获取 `<select>` 元素的当前值,即选中项的 `value` 属性。`.get(0)` 将 jQuery ...
jQuery详细教程,讲解很透彻, 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() ...
jQuery 文档操作方法详解 jQuery 文档操作方法是 jQuery 库中的一组强大且实用的函数,用于操作 HTML 和 XML 文档中的元素。这些方法可以帮助开发者快速高效地操作文档结构,提高开发效率和代码质量。本文将对 ...
此外,jQuery还有`text()`和`html()`方法,分别用于获取或设置元素的纯文本内容和HTML内容: ```javascript var textContent = $('p').text(); $('p').text('新的文本内容'); var htmlContent = $('#myDiv').html...
### JQUERY 常用方法大全 #### 一、Attribute(属性操作) 1. **`.addClass()`** - **用途**:为匹配元素添加一个或多个类。 - **示例**: ```javascript $("p").addClass("highlight"); ``` 这将为所有的`...
3. **匹配关键词**:对于每个文本节点,使用JavaScript的`.includes()`方法检查是否包含用户输入的关键词。如果包含,该节点就是我们要找的。 4. **高亮显示**:找到匹配的文本节点后,我们需要将其替换为包含HTML...
// 假设此方法获取子节点数据 // 将children转换为JSON并返回 return new ActionForward("/json", true); } ``` - **节点文本数据处理**:当`optype=gettext`时,根据ID查询节点的文本值并返回。 ```java ...
- 获取文本内容:`$("selector").text()` - 设置文本内容:`$("selector").text("新的文本")` - **.html()**:用于获取或设置HTML内容 - 获取HTML内容:`$("selector").html()` - 设置HTML内容:`$("selector")...
- **text()**:获取或设置匹配元素集合中每个元素的文本内容。 - **val()**:获取或设置表单元素(如input)的值。 - **removeAttr()**:移除元素的一个或多个属性。 - **toggleClass()**:如果存在(不存在)就切换...
4. **jQuery.contents()**: 这个方法返回元素内的所有内容,包括子元素和文本节点。 5. **jQuery.prev()**: 查找当前元素的前一个兄弟元素。 6. **jQuery.prevAll()**: 返回所有在当前元素之前的兄弟元素。 7. **...
获取select下拉框选中的文本使用的是jQuery的.text()方法。类似地,我们可以在选中option元素上调用.text()方法来获取其显示的文本内容。示例中的$("#selectionoption:selected").text()就是选取id为selection的...
- `text()`方法类似,但用于获取或设置纯文本内容,不解析HTML标签。 - `height()`和`width()`用于获取或设置元素的高度和宽度,如`$("#msg").height("300")`设置高度为300像素。 - `val()`方法用于获取或设置...
### jQuery EasyUI Combotree 异步树生成详解 #### 一、概述 在Web开发中,树形结构是常用的数据展示方式之一,特别是在需要层级显示数据时尤为常见。jQuery EasyUI 是一个基于 jQuery 的 UI 插件集合,它简化了...