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

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

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

     <div id="divTest" value='2'>
这是div的内容!
<label id="lblText">
这是label的内容!
</label>
<div id="divTest2">
第二个div内容!
</div>
</div>

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

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

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

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

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

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

  

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

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

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

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

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

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

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

  

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

  

 $("#divTest").attr('value')

  如有不妥,还请斧正!

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

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

    .html(),.text(),.val(),.html()用为读取和修改元素的HTML标签,包括标签内的内容.text()用来读取或修改元素的纯文本内容,去除 html 标签.val()用来读取或修 ...

  2. [转]jQuery中attr() 和 val() 的区别

    [转](http://www.codeproject.com/Tips/780652/Difference-between-attr-and-val-in-jQuery)

  3. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  4. jquery中this与$this的区别

    来源:http://www.jb51.net/article/19738.htm jQuery中this与$(this)的区别 $("#textbox").hover( funct ...

  5. Jquery中.attr()和.data()的区别

    $.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别. 一个简单的例子 <!DOCTYPE html> <html> <head> & ...

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

    1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang=" ...

  7. jquery中prop和attr的区别

    jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...

  8. jQuery中this与$(this)的区别

    起初以为this和$(this)就是一模子刻出来.但是我在阅读时,和coding时发现,总不是一回事,这里就谈谈this与$(this)的区别. jQuery中this与$(this)的区别 $(&q ...

  9. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

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

    这里就谈谈this与$(this)的区别. 1.jQuery中this与$(this)的区别 $("#textbox").hover( function() { this.titl ...

随机推荐

  1. Journal.Today 1.0.0

    我喜欢把一天的日记都放在一个文件中,而不是每次都新建一个文件.   写了一个脚本,检测当天是否已经新建日记,已经新建则打开,未新建则新建并打开.   其中我不太喜欢Wiz日记本来的标题命名方式,所以都 ...

  2. MsoShapeType /InlineShape枚举

    指定形状的类型或形状范围. 名称 值 说明 msoAutoShape 1 自选图形. msoCallout 2 标注. msoCanvas 20 画布. msoChart 3 图. msoCommen ...

  3. json-lib反序列化时(JSONObject.toBean),时间类型为空的处理

    需求: 在我们的项目里希望JsonString传入日期类型值为空时,JSONObject.toBean时可以将Java对象的该日期属性设为null. 解决过程: json-lib反序列化Json字符串 ...

  4. SQL Server查询性能优化——覆盖索引(一)

    覆盖索引又可以称为索引覆盖. 解释一: 就是select的数据列只用从索引中就能够取得,不必从数据表中读取,换句话说查询列要被所使用的索引覆盖. 解释二: 索引是高效找到行的一个方法,当能通过检索索引 ...

  5. 应用程序连接oracle rac

    10g rac vip漂移的目的不是让client不加改变的连接过来而是让client尽快收到一个连接终止的包,然后由client去连接tnsnames中配置的下一个地址.和没有vip相比, 使用vi ...

  6. Linux内核系列之Block块层(一)

    .Block块层入口函数为 genhd_device_init(),先对该函数开始分析: 函数实现源码: static int __init genhd_device_init(void) {     ...

  7. HDOJ-ACM1023(JAVA)

    题意:输入栈的大小,输出可能的出栈顺序的个数. 这道题,如果做了1022,那就只要在上面改改就行了, 第一想法是加上全排列-----结果是正确的,但是绝对会超时 验证性的实现了:(Time Limit ...

  8. Linux文件误删除恢复操作

    作为一个多用户.多任务的操作系统,Linux下的文件一旦被删除,是难以恢复的.尽管删除命令只是在文件节点中作删除标记,并不真正清除文件内容,但是 其他用户和一些有写盘动作的进程会很快覆盖这些数据.不过 ...

  9. SPOJ4206Fast Maximum Matching(hopcroft-karp)

    题目请戳这里 题目大意:裸的二分匹配. 题目分析:数据比较强,用来测模版的.这题用hungry跑着会比较吃力,所以用hopcroft-karp算法.这个算法较hungry高效是因为每次bfs找到一个增 ...

  10. openssl pem转cer

    openssl x509 -in cert/2120.pem -outform der -out cert/ios20170109.cer