jQuery中的html,val,text区别
在项目开发中,写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区别的更多相关文章
- jquery中的 .html(),.val().text()
.html(),.text(),.val(),.html()用为读取和修改元素的HTML标签,包括标签内的内容.text()用来读取或修改元素的纯文本内容,去除 html 标签.val()用来读取或修 ...
- [转]jQuery中attr() 和 val() 的区别
[转](http://www.codeproject.com/Tips/780652/Difference-between-attr-and-val-in-jQuery)
- 【jQuery】【转】jQuery中的trigger和triggerHandler区别
trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...
- jquery中this与$this的区别
来源:http://www.jb51.net/article/19738.htm jQuery中this与$(this)的区别 $("#textbox").hover( funct ...
- Jquery中.attr()和.data()的区别
$.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别. 一个简单的例子 <!DOCTYPE html> <html> <head> & ...
- jQuery中first-child与first选择器区别
1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang=" ...
- jquery中prop和attr的区别
jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...
- jQuery中this与$(this)的区别
起初以为this和$(this)就是一模子刻出来.但是我在阅读时,和coding时发现,总不是一回事,这里就谈谈this与$(this)的区别. jQuery中this与$(this)的区别 $(&q ...
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
- jQuery中this与$(this)的区别总结
这里就谈谈this与$(this)的区别. 1.jQuery中this与$(this)的区别 $("#textbox").hover( function() { this.titl ...
随机推荐
- Deep Learning Overview
[Ref: http://en.wikipedia.org/wiki/Deep_learning] Definition: a branch of machine learning based on ...
- linux tar 解压命令总结
把常用的tar解压命令总结下,当作备忘: tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其 ...
- HDU5649 DZY Loves Sorting 线段树
题意:BC 76 div1 1004 有中文题面 然后奉上官方题解: 这是一道良心的基础数据结构题. 我们二分a[k]的值,假设当前是mid,然后把大于mid的数字标为1,不大于mid的数字标为0.然 ...
- eclipse简单注释规范
设置注释模板的入口: Window->Preference->Java->Code Style->Code Template Types/*** @ClassName: ${t ...
- Centos 6.5升级安装Git
安装需求 # yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel# yum install gcc pe ...
- vijosP1447 开关灯泡
vijosP1447 开关灯泡 链接:https://vijos.org/p/1447 [思路] 数学+高精度. 分析题目:题中有言,i时刻将其所有倍数的灯熄灭,由此得知一个数有多少个倍数就会被操作多 ...
- Tsinsen A1516. fx 数位dp
题目: http://www.tsinsen.com/A1516 A1516. fx 时间限制:2.0s 内存限制:256.0MB 总提交次数:164 AC次数:72 平均分:51. ...
- android智能家居在线语音控制
对于android 智能家居项目,如果能实现语音控制,无疑会丰富项目功能,改善用户体验,android语音识别的方法有三种:一是使用intent调用语音识别程序,二 是应用程序自己调用语音识别库,三是 ...
- Stack Overflow 上人气最旺的 10 个 Java 问题
1. 为什么两个(1927年)时间相减得到一个奇怪的结果? (3623个赞) 如果执行下面的程序,程序解析两个间隔1秒的日期字符串并比较: public static void main(String ...
- Spring源码入门——DefaultBeanNameGenerator解析
我们知道在spring中每个bean都要有一个id或者name标示每个唯一的bean,在xml中定义一个bean可以指定其id和name值,但那些没有指定的,或者注解的spring的beanname怎 ...