`
mmmzzc
  • 浏览: 111663 次
  • 性别: Icon_minigender_1
  • 来自: 黑龙江
社区版块
存档分类
最新评论

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

 
阅读更多

为了迎合 上一贴的 尾声~ 今天就开始讲 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    或者 直接看看样例代码吧~~

 

 

 

分享到:
评论

相关推荐

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

    本讲我们将深入探讨jQuery中的两个核心方法——`html()`和`text()`,它们都用于设置或获取HTML元素的内部内容,但各自有着独特的特性和用途。通过对比和实例分析,我们将更清楚地理解它们之间的差异。 `html()`方法...

    《JQuery 能干点啥~》第6讲 CSS 选择器

    在本讲《JQuery 能干点啥~》的第六讲中,主要聚焦于CSS选择器的使用,这是jQuery库中的重要部分,用于精准定位和操作网页中的HTML元素。CSS选择器是CSS语言的核心,它们使得开发者能够有效地选取文档中的特定元素...

    jquery取值的问题

    关于"jQuery取值的问题",这个标题暗示我们可能会遇到在使用jQuery获取HTML元素值时的一些常见挑战。让我们深入探讨一下jQuery如何帮助开发者轻松地获取和设置表单元素、DOM节点以及其他类型的数据值。 首先,...

    jquery 滑动取值

    在"jquery 滑动取值"这个主题中,我们主要讨论的是如何利用jQuery实现一种用户界面元素——滑动条(slider),以便用户通过拖动滑块来选取或输入数值。这种功能在很多场合都很常见,如设置音量、调节亮度或者选择...

    jQuery区间滑动拖动取值代码.zip

    "jQuery区间滑动拖动取值代码"是一个基于jQuery实现的交互功能,允许用户通过滑动来选取一个范围内的值,常见于设置音量、亮度、时间选择器等场景。下面我们将深入探讨这个功能实现的关键知识点。 首先,我们要理解...

    jqueryAPI文档1.1~3

    jqueryAPI文档1.1~3

    jQuery对html元素取值与赋值的方法

    本文将详细讲解jQuery如何对HTML元素进行取值与赋值,特别关注文本框(TEXTBOX)、标签(LABLE)、单选按钮(Radio)、复选框(Checkbox)以及下拉列表(Select)。 1. **文本框(TEXTBOX)** - 取值:使用`.val()...

    JQuery实战第二讲可以编辑的表格

    在本节"JQuery实战第二讲可以编辑的表格"中,我们将深入探讨如何利用jQuery库创建交互式的、可编辑的表格。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互,使网页开发变得更加...

    jQuery获取Select选择的Text和_Value

    jQuery 获取和设置 Select 选择的 Text 和 Value jQuery 获取 Select 选择的 Text 和 Value 是一种常见的操作,例如在表单提交前获取用户选择的选项,或者在页面加载时根据服务器端的数据设置选择的选项。本文将...

    Sublime Text3集合 汉化 jquery、css和js(包括AngularJS)、html5、Bootstrap 3

    Sublime Text3集合,包括了多种常用插件jquery、css和js(包括AngularJS)、html5、Bootstrap 3,jsFormat等增强插件,已加入汉化包,加了很多配色方案,青菜萝卜各有喜爱,各自选择吧。 安装方法: 1.sublime text3...

    jquery中html、val与text三者属性取值的联系与区别介绍

    以上就是对jquery中html、val与text属性取值的联系与区别的详细介绍。通过具体的示例和应用场景,我们能够更加清晰地理解这三者各自的作用,并在实际开发中正确使用它们来获取或设置相应的DOM元素内容。

    jquery第三方API

    **jQuery第三方API详解** jQuery,一个轻量级、高性能的JavaScript库,因其简洁的语法和丰富的功能,成为了前端开发人员的首选工具。它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务,而jQuery的第三...

    jquery text slider(文字滚动)

    **jQuery Text Slider(文字滚动)** 在网页设计中,jQuery Text Slider是一种常见的动态效果,用于展示文本信息,尤其是在有限的空间内展示大量文字时。这种效果可以让文字以向上或向下的方式滚动,增加视觉吸引力...

    jquery表单元素取值

    ### jQuery表单元素取值详解 #### 一、引言 在Web开发中,表单是用户与网站交互的重要组成部分。jQuery作为一种流行的JavaScript库,极大地简化了JavaScript编程,特别是DOM操作方面,使得开发者能够轻松地处理HTML...

    jQuery价格区间滑动取值代码.zip

    【jQuery价格区间滑动取值代码】是一款基于JavaScript库jQuery实现的交互式功能,主要用于电商网站或其他需要用户选择价格范围的场景。这个功能允许用户通过拖动滑块来选取一个价格范围,为用户提供直观且友好的操作...

    jQuery表格预览设置单元格选中取值代码.zip

    本主题聚焦于"jQuery表格预览设置单元格选中取值代码",这涉及到如何利用jQuery来实现对表格(Table)中的单元格(Cell)进行操作,包括选中和获取其值,以及可能的预览功能。这里我们将深入探讨相关的jQuery技术和...

    jquery取值.pdf

    在jQuery中,取值和赋值是基本的操作,以下将详细解释如何使用jQuery进行这些操作。 首先,获取和设置文本框(TEXTAREA)的值: ```javascript // 获取值 var textval = $("#text_id").attr("value"); // 或者 var ...

    jQuery第三章代码

    jQuery第三章代码 例3-1.html

    jquery取值.docx

    在给定的文件内容中,我们看到了一些关键的 jQuery 操作和概念,下面将详细解释这些知识点。 1. **取值操作**: - `$("#text_id").val();` 用于获取文本框的值。`val()` 方法用于获取或设置表单元素的值,如输入框...

Global site tag (gtag.js) - Google Analytics