HQuery中html结构及文本的修改

原创 2016年05月31日 07:25:13

读取、修改元素的html结构或者元素的文本内容是常见的DOM操作,jQuery针对这样的处理提供了2个便捷的方法.html()与.text()
我们一起来看看。

.html()方法

获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容,具体有3种用法:
1..html() 不传入值,就是获取集合中第一个匹配元素的HTML内容
2..html( htmlString ) 设置每一个匹配元素的html内容
3..html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

注意
.htm()方法内部使用的是DOM的innerHTML属性来处理的,所以在设置与获取上需要注意的一个最重要的问题,这个操作是针对整个HTML内容(不仅仅只是文本内容)

.text()方法

得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。,具体有3种用法:
1..text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代
2..text( textString ) 用于设置匹配元素内容的文本
3..text( function(index, text) ) 用来返回设置文本内容的一个函数

注意
.text()结果返回一个字符串,包含所有匹配元素的合并文本

.html与.text的异同:

1..html与.text的方法操作是一样,只是在具体针对处理对象不同
2..html处理的是元素内容,.text处理的是文本内容。
3..html只能使用在HTML文档中,.text 在XML 和 HTML 文档中都能使用。
4.如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的。
5.火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了2个属性的支持,所以可以兼容所有浏览器。

具体实例:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h3>.html()与.text()</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>  
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <h4>显示通过html方法获取到的内容</h4>
    <p></p>

    <h4>显示通过text方法获取到的内容</h4>
    <p></p>


    <script type="text/javascript">
        //显示出html方法获取到的内容
        //.html()是整个html文档结构
        $('p:first').text( $(".first-div").html() ) 
    </script>


    <script type="text/javascript">
        //显示出text方法获取到的内容
        //.text()是文本内容的合集
        $('p:last').text( $(".first-div").text() ) 
    </script>


    <script type="text/javascript">
        //通过.text()方法替换文本内容
        $(".left a:first").text('替换第一个a元素的内容')
    </script>


    <script type="text/javascript">
        //通过.html()方法替换html结构
        $(".left div:first").html('整个div的子节点都被替换了')
    </script>


    <script type="text/javascript">
        //通过.text()的回调,获取原本的内容,修改,在重新赋值
        $(".left a:first").text(function(idnex,text){
            return '增加新的文本内容' + text
        })
    </script>



</body>

</html>

好好感悟!

版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery修改a标签的href链接和文字

以下修改a标签的href链接和修改文字的代码: 原链接: 柯乐义 修改a标签的href链接: $('#home_keleyi_com').attr('href','http://keleyi....
  • bfboys
  • bfboys
  • 2016年10月13日 21:02
  • 9092

jQuery修改标签的text显示内容或value值

修改常见标签元素:超链接标签、标签、标签以及form表单常用input标签内容。 jquery 测试 jquery修改a标签的href链接和文字,先点击下面链接然后点击"改变"按...
  • a491857321
  • a491857321
  • 2016年06月29日 09:51
  • 12272

AJAX入门 之 使用 AJAX 修改页面文本内容(四)

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome...
  • u013630349
  • u013630349
  • 2016年07月07日 11:21
  • 1804

关于用php进行修改html的格式

首先看一下引入的信息---data.php header("Content-type:text/html;charset=utf-8"); $hotSaleContent1 =...
  • qq_28292937
  • qq_28292937
  • 2016年07月15日 10:56
  • 1335

jQuery修改标签的内容或值

我一直知道要修改标签的内容和值有三种方式,但是最近遇到一项目却让我在改变表单元素的值上浪费了很多时间,其实我大概都知道他们的区别在哪里,只是有的shih...
  • licanty
  • licanty
  • 2017年05月11日 14:26
  • 2249

IOS UIWebView截获html并修改便签内容,宽度自适应

需求:混合应用UIWebView打开html后,UIWebView有左右滚动条,要去掉左右滚动效果;  方法:通过js截获UIWebView中的html,然后修改html标签内容;  实例代码: ...
  • mad2man
  • mad2man
  • 2014年05月21日 14:29
  • 4974

HTML基础 body标签text属性将普通文本颜色改为白色,实现有趣的密文效果

慈心积善融学习,技术愿为有情学。善心速造多好事,前人栽树后乘凉。我今于此写经验,愿见文者得启发。 1、代码                            ...
  • yushaopu
  • yushaopu
  • 2016年09月29日 07:56
  • 649

C#提取HTML代码中的文字

C#提取HTML代码中的文字   C#提取HTML代码中的文字   ///    /// 去除HTML标记   ///    /// 包括HTML的源码    /// 已经去除...
  • ncqqbesny
  • ncqqbesny
  • 2013年12月17日 11:03
  • 1746

[IOS]修改HTML显示内容和显示字体

[IOS]修改HTML显示内容和显示字体 DEMO地址:http://download.csdn.net/detail/u012881779/8915483 对于内文页往往会有一些奇葩需求...
  • u012881779
  • u012881779
  • 2015年07月20日 11:49
  • 2572

文本html替换加颜色

记录分享下给固定文本加颜色的代码改进过程。 1、MVC中直接根据状态显示不同的html 2、状态太多时写起来很累,改用js方法 //初始化文字颜色 function initStatus...
  • xxmeng2012
  • xxmeng2012
  • 2016年12月08日 10:39
  • 585
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HQuery中html结构及文本的修改
举报原因:
原因补充:

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