jQuery 處理網(wǎng)頁(yè)內(nèi)容的實(shí)現(xiàn)代碼
更新時(shí)間：2010年02月15日 14:55:53 作者：
改變頁(yè)面內(nèi)容應(yīng)該算是Javascript最常用的功能，這包括更改已經(jīng)存在的頁(yè)面元素或者添加新的HTML元素。
jQuery提供兩種實(shí)現(xiàn)這種功能的方法 – text()和html()。text()是對(duì)純文本的處理；html()和text()相似，不同的是它還支持HTML代碼。
//設(shè)置ID為"b5_a"段落的內(nèi)容為"這是新加入的文本信息";
$('#b5_a").text("這是新加入的文本信息");
//在ID為"b5_b"的div里加入一段html代碼；
$("#b5_b").html("<p>新加入一個(gè)html段落</p>");
有時(shí)我們要讀取頁(yè)面的內(nèi)容，這也可以用text()和html()來(lái)實(shí)現(xiàn)。同樣，使用text()得到的是純文本；使用html()得到的是html代碼。
//點(diǎn)擊第二個(gè)按鈕查看相關(guān)元素的文本內(nèi)容
$("button:eq(1)").click(function(){
alert($('#b5_a').text());
});
//點(diǎn)擊第四個(gè)按鈕查看相關(guān)元素的HTML內(nèi)容
$("button:eq(3)").click(function(){
alert($('#b5_a').html());
});
注意：text()和html()返回值得類型都是字符串型（string）。如果我們要對(duì)返回值進(jìn)行算術(shù)運(yùn)算，我們可以使用原始的JavaScript 函數(shù)：parseInt 或者 parseFloat 先把字符串轉(zhuǎn)換成整形或者浮點(diǎn)型。
<ul id="u2">
<li>12.3</li>
<li>1.5</li>
</ul>
//通過(guò)下面的jQuery代碼，可以對(duì)上述列表求和
$("button:eq(4)").click(function(){
var sum = 0;
$('li').each(function(index){
sum += parseFloat($(this).text());
});
alert(sum);
});
復(fù)制代碼 代碼如下:
//設(shè)置ID為"b5_a"段落的內(nèi)容為"這是新加入的文本信息";
$('#b5_a").text("這是新加入的文本信息");
//在ID為"b5_b"的div里加入一段html代碼；
$("#b5_b").html("<p>新加入一個(gè)html段落</p>");
有時(shí)我們要讀取頁(yè)面的內(nèi)容，這也可以用text()和html()來(lái)實(shí)現(xiàn)。同樣，使用text()得到的是純文本；使用html()得到的是html代碼。
復(fù)制代碼 代碼如下:
//點(diǎn)擊第二個(gè)按鈕查看相關(guān)元素的文本內(nèi)容
$("button:eq(1)").click(function(){
alert($('#b5_a').text());
});
//點(diǎn)擊第四個(gè)按鈕查看相關(guān)元素的HTML內(nèi)容
$("button:eq(3)").click(function(){
alert($('#b5_a').html());
});
注意：text()和html()返回值得類型都是字符串型（string）。如果我們要對(duì)返回值進(jìn)行算術(shù)運(yùn)算，我們可以使用原始的JavaScript 函數(shù)：parseInt 或者 parseFloat 先把字符串轉(zhuǎn)換成整形或者浮點(diǎn)型。
復(fù)制代碼 代碼如下:
<ul id="u2">
<li>12.3</li>
<li>1.5</li>
</ul>
//通過(guò)下面的jQuery代碼，可以對(duì)上述列表求和
$("button:eq(4)").click(function(){
var sum = 0;
$('li').each(function(index){
sum += parseFloat($(this).text());
});
alert(sum);
});
相關(guān)文章
TextArea不支持maxlength的解決辦法(jquery)
自己寫了一個(gè)jquery的擴(kuò)展，這樣就可以很容易實(shí)現(xiàn)對(duì)textarea控制最大長(zhǎng)度了。2011-09-09
jQuery使用JSONP實(shí)現(xiàn)跨域獲取數(shù)據(jù)的三種方法詳解
這篇文章主要介紹了jQuery使用JSONP實(shí)現(xiàn)跨域獲取數(shù)據(jù)的三種方法,結(jié)合實(shí)例形式對(duì)比分析了jsonp跨域獲取數(shù)據(jù)的3種常用操作技巧,需要的朋友可以參考下2017-05-05
JQuery的ajax基礎(chǔ)上的超強(qiáng)GridView展示
前面有個(gè)例子是使用jQuery的datatable插件來(lái)實(shí)現(xiàn)的能夠展開個(gè)詳細(xì)信息表的樣子。事實(shí)上.net的數(shù)據(jù)展示模式很好,如果配上jQuery的那些效果和AJAX功能是相當(dāng)?shù)貌诲e(cuò)。2009-09-09
jQuery實(shí)現(xiàn)選項(xiàng)卡功能（兩種方法）
本文主要介紹了jQuery兩種方法寫選項(xiàng)卡的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法,涉及jQuery結(jié)合HTML5實(shí)現(xiàn)瀑布流效果的動(dòng)態(tài)加載功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jQuery設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
jQuery動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法
動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法有很多，在接下來(lái)的文章中為大家介紹下jQuery是如何實(shí)現(xiàn)的2013-12-12
jquery.tagsinput.js實(shí)現(xiàn)記錄checkbox勾選的順序
這篇文章主要為大家詳細(xì)介紹了jquery.tagsinput.js實(shí)現(xiàn)記錄checkbox勾選的順序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
element form 校驗(yàn)數(shù)組每一項(xiàng)實(shí)例代碼
這篇文章主要介紹了element form 校驗(yàn)數(shù)組每一項(xiàng)的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
jQuery+slidereveal實(shí)現(xiàn)的面板滑動(dòng)側(cè)邊展出效果
WEB開發(fā)中有時(shí)需要在頁(yè)面上設(shè)置一個(gè)控制面板，默認(rèn)是不顯示的，當(dāng)用戶有需要時(shí)可以通過(guò)按鈕觸發(fā)調(diào)用面板展示。常見的有頁(yè)面?zhèn)冗吇雒姘逍Ч?。本文將使用jQuery插件并結(jié)合實(shí)例給大家介紹一下面板滑動(dòng)展示效果。2015-03-03