jQuery基础教程之DOM操作-HTML&文本&值的操作

转载 2012年03月31日 15:35:08

今天主要讲解jquery中的三个方法的使用,他们分别是html()、text()、val()。
这三个jquery方法的使用方式一样都有三种,下面请看用法和DEMO。

  • html()
    这个方法根据传入的参数的不同,结果也有很大的区别,具体使用方法有如下三种:

    1. .html()
      不带参数的用法:取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
      注意了,是取得匹配元素中的第一个元素的html内容。

      jquery html()函数在线测试
    2. .html(htmlString)
      设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
      注意了:这个用法和前面一个用法刚好相反,一个是取得第一个的html内容,一个是设置每一个元素的html内容
      htmlString这个参数用于设定HTML内容的值。

      jquery html(htmlString)函数在线测试
    3. .html(function(index, oldhtml))
      注意,这种用法是从1.4版本才开始加入的。
      这种使用方法是将function(index,oldhtml)这个方法返回的值作为HTML内容,为每个匹配的元素设定HTML内容。
      其中index参数是当前元素在元素组中的索引,oldhtml是当前元素的之前的HTML内容。这两个参数都是可选的。

      jquery html(function(index, oldhtml))函数在线测试
  • text()
    这个方法根据传入的参数的不同,结果也有很大的区别,具体使用方法有如下三种:

    1. .text()
      不带参数的用法:取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。匹配元素中的html标签都将被去除,只取其中的纯文本内容
      这个方法和html()方法就不一样了。html()是返回第一个匹配元素的html内容。
      来看下面的例子:
      HTML代码:

      1 <div class="demo">
      2 <div>jquery</div>
      3 <ul>
      4 <li>Li item 1</li>
      5 <li>Li <strong>item</strong> 2</li>
      6 </ul>
      7 </div>

      jquery代码:

      1 $(".demo").text();
      2                 

      上面的jquery代码返回的会是这样的:jquery Li item 1 Li item 2

      jquery text()函数在线测试
    2. .text(textString)
      这个方法设置所有匹配元素的文本内容(和.html(textString)不同的是,这个方法可以用于XML和XHTML)
      注意了:这个用法会将textString参数中的一些HTML标记进行转换(如:”<"会变成"<",">“会变成”>”)

      jquery text(textString)函数在线测试
    3. .text(function(index, oldText))
      注意,这种用法是从1.4版本才开始加入的。
      这种使用方法是将function(index,oldText)这个方法返回的值作为纯文本内容,为每个匹配的元素设定纯文本内容。
      其中index参数是当前元素在元素组中的索引,oldText是当前元素的之前的纯文本内容。这两个参数都是可选的。

      jquery text(function(index, oldText))函数在线测试
  • val()
    这个方法根据传入的参数的不同,结果也有很大的区别,具体使用方法有如下三种:

    1. .val()
      不带参数的用法:主要是用来取得第一个匹配元素的值。
      如何是<select multiple=”multiple”>元素,取得的将是被选中的元素的值的数组。

      jquery val()函数在线测试
    2. .val(value)
      设置每一个匹配元素的值。

      jquery val(value)函数在线测试
    3. .val(function(index, value))
      注意,这种用法是从1.4版本才开始加入的。
      这种使用方法是将function(index,oldValue)这个方法返回的值作为值,为每个匹配的元素设定值。
      其中index参数是当前元素在元素组中的索引,oldvalue是当前元素的之前的值。这两个参数都是可选的。

      jquery val(function(index, value))函数在线测试

jQuery基础教程之DOM操作-遍历节点-find()方法

.find(selector) 此方法用于在匹配元素的后代元素中按照选择器表达式进行筛选。 记住:使用此方法必须得传入选择器表达式参数,不然是获取不到任何元素的,也就失去了使用此方法的意义了。 ...
  • wql19881207
  • wql19881207
  • 2012年04月01日 15:41
  • 2576

学习笔记:《jQuery基础教程》第四版第五章课后练习——操作DOM

修改添加back top链接的代码,以便这些链接只从第四段后面才开始出现。 在单击back to top链接时,为每个链接后面添加一个新段落,其中包含You were here字样。确保链接仍然有效。...
  • la413972057
  • la413972057
  • 2015年11月26日 20:16
  • 1178

【JavaScript】使用jQuery操作DOM

本章需要掌握的技能目标 1、使用jQuery操作css样式。 2、使用jQuery操作文本与属性值内容 3、使用jQuery操作DOM节点 4、使用jQuery遍历DOM节点 5、使用jQuery操作...
  • mjianglei
  • mjianglei
  • 2016年11月26日 22:43
  • 846

jQuery中的DOM操作整理

1.创建元素节点例如,创建两个元素节点,并加入到中 首先创建元素节点var $li_1=$(""); var $li_2=$(""); 然后蒋新创建的节点插入文档中$("ul").append($...
  • wangyun_www
  • wangyun_www
  • 2016年08月18日 10:48
  • 2802

jQuery中DOM操作方法 之 html,text,val

jQuery内核 DOM操作方法 之 html,text,val 回顾下几组DOM插入有关的方法 innerHTML 设置或获取位于对象起始和结束标签内的 HTML  outerHT...
  • whereismatrix
  • whereismatrix
  • 2015年05月08日 15:40
  • 2322

jQuery中的DOM和CSS操作

jQuery中的DOM和CSS操作DOM ,它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。在JavaScript 中,DOM 不但内容庞大繁杂,而且开发的过程中需要考虑更多的...
  • depers15
  • depers15
  • 2016年07月14日 19:41
  • 485

js与jQuery的DOM操作比较(一)

js与jQuery的DOM操作比较(一) 最近才开始学jQuery,它的代码简单,操作起来方便,jQuery库的功能特别强大。jQuery作为一种JavaScript库,继承并优化了JavaScri...
  • h_cjj
  • h_cjj
  • 2016年04月16日 15:56
  • 873

jQuery的DOM操作之添加元素和删除元素

添加元素: .append()——在目标元素之后添加元素; .prepend()——在目标元素之前添加元素; .after()——在目标元素之后换行添加元素; .before()——在目标元素...
  • bboyjoe
  • bboyjoe
  • 2015年08月10日 16:27
  • 2489

JQuery的DOM操作+事例

1.DOM节点的创建通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个...
  • u012396955
  • u012396955
  • 2017年02月23日 20:18
  • 461

《jQuery基础教程》-- 操作DOM

1.操作属性 之前的css方法还有addClass、removeClass、toggleClass都是对DOM元素进行style属性的操作。而对于其他属性则可以使用attr和removeAttr来实...
  • robert8803
  • robert8803
  • 2013年01月08日 11:48
  • 1419
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery基础教程之DOM操作-HTML&文本&值的操作
举报原因:
原因补充:

(最多只允许输入30个字)