jQuery中的html,val,text区别

  在项目开发中,写jQuery代码有时候会搞混淆一下东西,现在写一下demo来列出jQuery的.html(),.text(),.val()的区别。

  1. html()取得第一个匹配元素的内容,简单来说就是所取得的标签所包含的所有东西。

      假如括号中有带val的话,最简单的理解就是将上一步取得的内容全部替换成括号中val,下面看demo

1     <div id="divTest" value=‘2‘>
2         这是div的内容!
3         <label id="lblText">
4             这是label的内容!
5         </label>
6         <div id="divTest2">
7             第二个div内容!
8         </div>
9     </div>

    这是html文档结构,现在我们执行下面js代码看看所取得的是什么的东西

1  $("#divTest").html()  //所取得内容:这是div的内容!<label id="lblText">这是label的内容!</label> <div id="divTest2">第二个div内容!</div>
1  $("#divTest").html("我要修改了!")  //执行修改

    上面修改之后,我们接着获取一下

1 $("#divTest").html() //所取得内容:我要修改了!

  注:html()方法可以用于XHTML文档,但不能用于XML文档!

  2.text():取得所有匹配元素的内容,结果是由所有匹配元素包含的文本内容组合起来的文本,同理,text(val)是设置所有匹配元素的文本内容

  

1 $("#divTest").text() //所取得内容:这是div的内容!这是label的内容!第二个div内容!
2                             //可见所取得是标签内的东西,但不会取标签

  注:这个方法对HTML和XML文档都有效

  3.val()常用来操作标准的表单组件对象,如button,text,hidden

  例如添加了一个select元素以及一个hidden的元素

1     <select id="selectVal">
2         <option value="1" selected="selected">1</option>
3         <option value="2" >2</option>
4     </select>
5     <input type="hidden" id="hidVal" value="1"/>

  现在我们来取一下他们的值

1 $("#selectVal").val()  //取得值为:1  同理这个也是 $("#hidVal").val()

  

  有时候开发的时候会在一个div内设置一个value的属性,那么我们在取值的时候可以用这样

  

1 $("#divTest").attr(‘value‘)

  如有不妥,还请斧正!

时间: 2024-10-17 03:14:57

jQuery中的html,val,text区别的相关文章

jquery中的 .html(),.val().text()

.html(),.text(),.val(),.html()用为读取和修改元素的HTML标签,包括标签内的内容.text()用来读取或修改元素的纯文本内容,去除 html 标签.val()用来读取或修改表单元素的value值as:<div id="demo"><p>hi</p></div><input type="text" name="txt" id="txt" valu

jQuery中this与$(this)的区别

jQuery中this与$(this)的区别 起初以为this和$(this)就是一模子刻出来.但是我在阅读时,和coding时发现,总不是一回事,这里就谈谈this与$(this)的区别. AD: jQuery中this与$(this)的区别 $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 这里的this其实是一个

jquery中this与$this的区别

来源:http://www.jb51.net/article/19738.htm jQuery中this与$(this)的区别 $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的.但是如果将this换成

jQuery中first-child与first选择器区别

1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>jQuery中first-child与first选择器区别</title> </head> <body> <

jquery中prop和attr的区别

jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误. jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误 **参数** name String V1.6 属性名称 properties Map V1.6 作为属性的"名/值对"对象 key,v

jQuery中this与$(this)的区别总结

这里就谈谈this与$(this)的区别. 1.jQuery中this与$(this)的区别 $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK"; } ); 这里的this其实是一个html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的. 但是如果将this换成(this)就不是那回

jquery中attr和prop的区别分析

这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. 复制代码代

基于jquery中children()与find()的区别介绍

本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元素集合中每个元素的后代.参数是必选的,可以为选择器.jquery对象可元素来对元素进行筛选. .find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级.这里的

JQuery中after() append() appendTo()的区别

首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").after("<a>aa</a>") 结果是<span></span><a>aa</a> 不是 <span><a>aa</a></span> 而如果用 append() $(&q

Jquery学习笔记(6)--jquery中attr和prop的区别【精辟】

jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. <a href="http://www.baidu.com&quo