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