jQuery 處理網(wǎng)頁內(nèi)容的實(shí)現(xiàn)代碼

更新時(shí)間：2010年02月15日 14:55:53 作者：

改變頁面內(nèi)容應(yīng)該算是Javascript最常用的功能，這包括更改已經(jīng)存在的頁面元素或者添加新的HTML元素。

jQuery提供兩種實(shí)現(xiàn)這種功能的方法 – text()和html()。text()是對純文本的處理；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í)我們要讀取頁面的內(nèi)容，這也可以用text()和html()來實(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）。如果我們要對返回值進(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> 
//通過下面的jQuery代碼，可以對上述列表求和 
$("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)對textarea控制最大長度了。
2011-09-09
jQuery使用JSONP實(shí)現(xiàn)跨域獲取數(shù)據(jù)的三種方法詳解
這篇文章主要介紹了jQuery使用JSONP實(shí)現(xiàn)跨域獲取數(shù)據(jù)的三種方法,結(jié)合實(shí)例形式對比分析了jsonp跨域獲取數(shù)據(jù)的3種常用操作技巧,需要的朋友可以參考下
2017-05-05
JQuery的ajax基礎(chǔ)上的超強(qiáng)GridView展示
前面有個(gè)例子是使用jQuery的datatable插件來實(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à)值。下面跟著小編一起來看下吧
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ī)硪黄猨Query設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
jQuery動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法
動(dòng)態(tài)顯示和隱藏datagrid中的某一列的方法有很多，在接下來的文章中為大家介紹下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í)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10
jQuery+slidereveal實(shí)現(xiàn)的面板滑動(dòng)側(cè)邊展出效果
WEB開發(fā)中有時(shí)需要在頁面上設(shè)置一個(gè)控制面板，默認(rèn)是不顯示的，當(dāng)用戶有需要時(shí)可以通過按鈕觸發(fā)調(diào)用面板展示。常見的有頁面?zhèn)冗吇雒姘逍Ч１疚膶⑹褂胘Query插件并結(jié)合實(shí)例給大家介紹一下面板滑動(dòng)展示效果。
2015-03-03