当前位置:首页 > 技术文章 > 正文内容

jQuery HTML代码/文本

arlanguage1周前 (04-27)技术文章4

html([val|fn]) 返回值:String

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。

如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。


function(index, html) Function

此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。

返回p元素的内容。

jQuery 代码:

$('p').html();

设置所有 p 元素的内容

jQuery 代码:

$("p").html("Hello <b>world</b>!");

使用函数来设置所有匹配元素的内容。

jQuery 代码:

$("p").html(function(index,n){
    return "这个 p 元素的 index 是:" + n;
});


text([val|fn]) 返回值:String

val String 用于设定HTML内容的值

function(index, html) Function 此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。

返回p元素的文本内容。

jQuery 代码:

$('p').text();

设置所有 p 元素的文本内容

jQuery 代码:

$("p").text("Hello world!");

使用函数来设置所有匹配元素的文本内容。

jQuery 代码:

$("p").text(function(index,n){
    return "这个 p 元素的 index 是:" + n;
});
$("#test").html();  

意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码:

document.getElementById("test").innerHTML;


直接获取、编辑内容

在jQuery中,主要是通过html()和text()两种方法来获取和编辑页面内容的。其中html()相当于获取节点的innerHTML属性,

添加参数html(text)时,则为设置innerHTML;而text()则用来获取元素的纯文本,text(content)为设置纯文本。

实例1:

jQuery代码:

$(function(){
    var sString = $("p:first").text(); //获取纯文本
    $("p:last").html(sString);
});

HTML代码:

<p><b>文本</b>段 落<em>示</em>例</p>
<p></p>

实例2:

jQuery代码:

$(function(){
    $("p").click(function(){
        var sHtmlStr = $(this).html(); //获取innerHTML
        $(this).text(sHtmlStr); //将代码做为纯文本传入
    });
});

HTML代码:

<p><b>文本</b>段 落<em>示</em>例</p>

实例3:获取选择框的文本

$("#id").find("option:selected").text(); //获取Select选择的text文本
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$function(){
    $('#OK').bind('click', function () {
    alert($("#id").find("option:selected").text());
    });
}
</script>
</head>
<body>
<select id="select">
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
</select>
<button id="OK">
获取为本</button>
</body>
</html>

$().html(); //获得节点包含的信息

$().html(信息); //设置节点包含的内容

$().text(); //获得节点包含的"文本字符串信息"内容

$().text(信息); //设置节点包含的内容(有html标签就把"><"符号变为符号实体)

注意: DOM操作必须保住DOM节点必须存在, 当然也包括使用css样式display:none隐藏的DOM节点, 否则会导致js语法错误;

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/4168.html

分享给朋友:

“jQuery HTML代码/文本” 的相关文章

无预算申请免费泛域名SSL证书

今天给大家带来一个福利免费泛域名(通配符)证书,泛域名SSL证书可以直接配置在主域名后,子域名也可以全部自动实现https访问。目前免费SSL证书申请渠道一般都集中在免费单域名证书上,免费通配符证书还是比较难申请到的,相对来说泛域名SSL证书是最方便的证书类型。申请免费泛域名SSL证书教程:PC端点...

如何在 CentOS 8 上安装 Nginx centos8.0安装教程

如何在 CentOS 8 上安装 NginxNginx发音为“ engine x”,是一种开源的高性能HTTP和反向代理服务器,负责处理Internet上一些最大站点的负载。它可用作HTTP和非HTTP服务器的独立Web服务器,负载平衡器,内容缓存和反向代理。与Apache[1]相比,Nginx可以...

了解PHP-FPM

在服务器上,当我们查看php进程时,全都是php-fpm进程,大家都知道这个就是php的运行环境,那么,它到底是个什么东西呢?PHP-FPM简介PHP-FPM,就是PHP的FastCGI管理器,用于替换PHP FastCGI的大部分附加功能,在PHP5.3.3后已经成为了PHP的标配。有小伙伴要问了...

「每天一道面试题」Nginx 502错误原因和解决方法

Nginx 502错误原因和解决方法不管你是做运维还是做开发,哪怕你是游客,时不时会遇到 502 Bad Gateway 或 504 Gateway Time-out。出现这页面,把服务重启下,再实在不行重启下服务器,问题就解决了,特殊情况请继续阅读。状态码解释502 Bad Gateway:作为网...

php培训都学什么?有哪些课程?

PHP入门虽然比较容易简单,但是对于零基础学员来讲,想要学到精髓,并不是一件容易的事情,越到后面学起来越累,因此,最快最便捷的方法就是参加培训,不仅可以快速掌握入门,还能够学到精髓之处,那么PHP培训都有哪些课程?下面我们以六星教育的php培训课程为例来为大家讲解:第一阶段:动态网站开发的三个方面1...

Nginx缓存设置教程

这篇文章主要介绍了Nginx缓存设置案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下在开发调试web的时候,经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼,提供下apache不缓存配置和nginx不缓存配置的设置。在...