《JQuery 能干点啥~》第三讲 html() 与 text()的取值比较

精选转载

pxvp2008 2012-07-12 12:28:39 博主文章分类：Web Development

为了迎合上一贴的尾声~ 今天就开始讲 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() 方法得到的值分别是什么呢

$("#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>