为了迎合 上一贴的 尾声~ 今天就开始讲 JQ 的html() 和 text()
将之前,先说点 题外话 JQ 的这两个方法,不单单 只有 取值 赋值的功能。他们的参数 除了赋值,还有些其他功能,由于中午时间有限,所以,我决定用一天到两天的时间来讲 这两个方法! 这样大家也好吸收点~!
而且 我还是会 提供 附件 样例希望 大家 不要光看,实时的动动手 不然很难真正学会,和发现问题~
------------------------------------------------------ 开始喽-------------------------------------------------------------
相信大家,在工作学习中,经常 会遇到 会的某些东西的情况~ 就像前几讲 讲的 获得 value值!
除此以外,应该还会有,获得 td 里的值,获得所有td里的值 等等~~~
在 JS 中 有一个 document.getElementBy().innerHTML 方法
我依稀的记得,当时我们老师讲的时候,说 innerHTML 是获得 夹内的东西! 所谓的 "夹内" 也就是 传说中的 标签之间~ 由于时间的久远,我已经记不太清了
今天要讲的 JQ 也提供了 两个 类似的方法,而且,不必说,自然是更好用,不然学他干嘛 = =||||
书归正传~
先说 html();
手册中的 解释是这样的:取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
这里面 第二句话和第三句话 不解释了~ 记住就行了
至于第一句话 中的 第一个匹配元素 这里有个悬念~~
再说 text ();
依然是手册里说: 取得所有匹配元素的内容 。
这个也不用多解释了~~~
这就完事了?
当然没有了, 应该都发现 我标蓝的两个文字了吧~~
其实这就是他两个的主要区别~~~ 一个是 html内容 一个是内容 ;
其中 html内容 指的是 html 对象, 内容 自然就是 内容~~~ 好像有点废话 吼吼~~~
所话说,百闻不如一见嘛~ 现在上个代码 给大家看看,相信 一切就都明白了~
<div id="thisDiv">
<table>
<tr>
<td id="no_ch">第一行,第1列 | </td>
<td>第一行,第2列 | </td>
</tr>
<tr>
<td>第二行,第1列 | </td>
<td>第二行,第2列 | </td>
</tr>
</table>
</div>
一个 div 套一个 table~~ 看不懂得童鞋~~ 呃~~呃~~ 我也没办法了~~
现在开始解释 什么是 html内容 和 内容
用个最土的说法 就是 ,你能看到的这段代码 都是html内容 ;
那有人会问了 ,那什么是内容 呢~~
大家这么想一下~ 这段代码 如果放到 html 或者 jsp 页面中~(假定,你没有写任何 样式),然后 你用 ie打开这个页面 看到的会事什么~
没错,是整整齐齐的 四段文字,好了,这就是 内容 ~
#0 理解了吗? 也就说,在代码 去掉所有标签以后 的文字 就是 内容 ,而包含了标签的就是 html内容 !
这下应该理解了吧!!!! 在不理解,那我就又没办法了~~~
不知道 童鞋们 还记得 我开始的时候 留了一个悬念吗!!
现在 开始将悬念了!!
先 想下 这个问题啊~,
如果 我的选择器 得到了 上面代码中 id="no_ch"的td !那么 这个 对象的 html() 和 text() 方法 得到的值分别是什么呢
双击复制代码
1
|
$( "#no_ch" ).html()<br />$( "#no_ch" ).text()
|
如果 你理解了我上面讲的东西,应该很容易发下,两个的值 是相同的~! 至于 不理解的,就再回头 看看我上面说的 带标签 和不带标签 那段~~ #0
理解了的,咱们继续,再想第二个问题:
如果 我的选择器得到 上面代码中的 id="thisDiv" 的 div ,那么 这两个对象 的 html() 和 text() 方法 得到的值分别是什么呢
要是 还说相同的童鞋 请 转到 #0 再看一次
答案是不同的~
但结果是什么样的呢~~ 想下 什么是 html内容 !在 这个 div中的 html内容 有哪些!
恍然大悟没,对! 就是那个table的代码
<table>
<tr>
<td id="no_ch">第一行,第1列 | </td>
<td>第一行,第2列 | </td>
</tr>
<tr>
<td>第二行,第1列 | </td>
<td>第二行,第2列 | </td>
</tr>
</table>
那 内容 呢,自然是去掉所有标签后 剩下的 td 里的 值了
也就是第一行,第1列 | 第一行,第2列 | 第二行,第1列 | 第二行,第2列 |
偶了~~ 今天的东西讲完了,没理解的童鞋 请跳转到 #0 或者 直接看看样例代码吧~~
分享到:
相关推荐
NULL 博文链接:https://mmmzzc.iteye.com/blog/1579590
NULL 博文链接:https://mmmzzc.iteye.com/blog/1579593
jquery取值的问题j
jquery 实现的滑动轴取值,很好,很实用
jqueryAPI文档1.1~3
jQuery区间滑动拖动取值代码.zip
Jquery焦点图代码 从datatable中取值 可以从数据库中获取值
主要介绍了jQuery对html元素取值与赋值的方法,有需要的朋友可以参考一下
Sublime Text3集合,包括了多种常用插件jquery、css和js(包括AngularJS)、html5、Bootstrap 3,jsFormat等增强插件,已加入汉化包,加了很多配色方案,青菜萝卜各有喜爱,各自选择吧。 安装方法: 1.sublime text3...
jquery表单元素取值 很实用 强大
jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值 jquery动态复选框取值
jQuery第三章代码 例3-1.html
jquery moblie 复选框取值 获取ID的值
通过八大商业案例,以HTML5搭建结构、CSS3设置样式、jQuery实现动态应用这三者相结合的实际应用方式,详细讲解它们的新技术点,以及流行应用热点的设计思路与制作方法。技术核心穿插在实际操作中阐述,更便于读者在...
jQuery获取Select选择的Text和_Value
本文为大家详细介绍下jquery中,html、val与text三者属性取值的联系与区别,下面有个不错的示例,感兴趣的朋友不要错过
jquery旋转按钮,利用js对按钮进行取值与设值操作
jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text
jquery text slider(文字向上 文字向下 滚动)