jquery中html()方法的使用

简介: jquery中html()方法的使用

样式操作

在jQuery中,提供了html()和text()方法用于操作页面元素的内容,val()方法用于操作表单元素的值。以上方法的使用方式基本相同,当方法没有提供参数时,表示获取匹配元素的内容或值;当方法携带参数时,表示对匹配元素的内容或值进行修改。

1. html()方法:

html()方法用于获取第一个匹配元素的HTML,内容或修改匹配元素的HTML内容,方方法仅对XHTML文档有效,不能用于XML文档。html()方法的语法格式如下:

html()
html(htmlCode)
html(function(index, oldHtmlCode))

无参方法用于返回第1个匹配元素的HTML内容

有参方法用于设定匹配元素的文本内容

htmlCode:表示将所匹配元素的HTML内容设定为htmlCode

function(index, oldHTmlCode):表示将函数的返回值作为当前元素的HTML内容,index表示当前元素在集合中的索引位置,oldHtmlCode表示当前在修改之前的HTML内容

示例:

//返回#mainCotentDiv标签的HTML内容
$("#mainContentDiv".html());
//设置#mainContentDiv标签的HTML内容为红色标题格式的“标题”
$("#mainContentDiv").html("<h1><font color='red'>标题</font><h1/>");
//根据元素在集合中的不同位置,设定不同的HTML内容
$("p").html(function(index, htmlCode){
    switch(index){
        case 0:
            return "<h1> + htmlCode + "<h1/>";
        case 1:
            return "<h2> + htmlCode + "<h2/>";
    }
});


2. text()方法:

text()方法用于读取或设置匹配元素的文本内容。与html()方法区别在于,text()方法返回纯文本内容,适用于XHTML和XML文档。text()方法的语法格式如下:

text()
text(textContent)
text(function(index, oldTextContent))

无参方法用于返回第1个匹配元素的文本内容

有参方法用于设定匹配元素的文本内容

textContent:表示将所匹配元素的文本内容内容设定为textContent

function(index, oldTextContent):表示将函数的返回值作为当前元素的HTML内容,index表示当前元素在集合中的索引位置,oldTextContent表示当前在修改之前的文本内容

示例:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery基本操作-内容操作</title>
        <script type="text/javascript" src="js/jquery-1.x.js">
        </script>
    </head>
    <body>
        <div id="newsContent">
            <p>中国的商业正处于一场正在进行时态的变革。</p>
            <p>MALL新闻频道拥有中国购物,城市综合体,商业街区最全的商业信息。</p>
        </div>
        <div id="newsDiscuss"></div>
        <hr/>
        <input type="button" value="获得HTML内容" onClick="getHTMLContent()" />
        <input type="button" value="获得Text内容" onClick="getTextcontent()" />
        <input type="button" value="改变正文内容" onClick="changeContent()" />
        <input type="button" value="显示HTML内容" onClick="setHTMLContent()" />
        <input type="button" value="显示Text内容" onClick="setTextContent()" />
        <script type="text/javascript">
            //获取元素的HTML内容
            function getHTMLContent() {
                console.log("<div>中的HTML内容如下:" + $("#newsContent").html());
            }
            //获取元素的文本内容
            function getTextcontent() {
                console.log("<div>中的text内容如下:" + $("#newsContent").text());
            }
            //根据元素在集合中的位置不同,所赋的值也不同
            function changeContent() {
                $("p").html(function(index, htmlCode) {
                    switch(index) {
                        case 0:
                            return "<h1>" + htmlCode + "<h1/>";
                        case 1:
                            return "<h2>" + htmlCode + "<h2/>";
                    }
                });
            }
            //设置元素的HTML内容
            function setHTMLContent() {
                $("#newsDiscuss").html("<hr/>补充如下:Mall全称Shopping Mall(大型购物中心),属于一种新型的复合型商业。");
            }
            //设置元素的文本内容
            function setTextContent() {
                $("#newsDiscuss").text("<hr/>补充如下:Mall全称Shopping Mall(大型购物中心),属于一种新型的复合型商业。");
            }
        </script>
    </body>
</html>
目录
相关文章
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
49 1
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
2月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
30 5
|
1月前
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
42 6
|
2月前
|
JavaScript 前端开发
jQuery 杂项方法
jQuery 杂项方法
29 2
|
2月前
|
JavaScript
jQuery 效果 方法
jQuery 效果 方法
15 3
|
2月前
|
JavaScript 前端开发
jQuery - noConflict() 方法
jQuery - noConflict() 方法
20 5
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
30 1
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
13 2
|
2月前
|
JavaScript 前端开发
jQuery - AJAX load() 方法
jQuery - AJAX load() 方法
20 2
|
17天前
|
存储 JSON JavaScript
jQuery 方法大全
jQuery 方法大全
8 0