jQuery 存取元素內容文字的方法

jQuery/jQuery Mobile 技術文件 》

jQuery 提供了text() 方法,它回傳元素的文字節點,例如以下的配置:

<p id="msg">HTML5 從零開始</p>

現在調用 text() 方法即可取得其中的文字「HTML5 從零開始」:

$('#msg').text()

如果將一字串參數傳入,則會取代其中的內容,例如:

$('#msg').text('HTML5從零開始到App作品上架課程')

這一行程式碼會將 p 標籤中原來的字串「HTML5 從零開始」取代成「HTML5從零開始到App作品上架課程」。

調用 text() 方法所取回的是純文字的內容,如果要完整截取包含標籤等非純文字內容,則必須調用 html() 方法,考慮以下的配置:

<p id="msg"><b>HTML5</b></p>

這一行配置以 b 標籤呈現粗體效果,分別調用不同的方法存取其中的文字如下:

$('#msg').text()  //回傳 HTML5
$('#msg').html()  //回傳 <b>HTML5</b>

當你調用 text() 取得其內容文字時,會得到純文字內容HTML5 ,而若是調用 html() 取得的將是包含 b 標籤的完整文字內容 HTML5。而無論傳入 text() 方法的字串參數內容為何,均會以純文字格式輸出,而 html() 則會解譯其中非純文字部份的內容。

$('#msg').text('<b>HTML5</b>')    //輸出 <b>HTML5</b>
$('#msg').html('<b>HTML5</b>')  //輸出粗體 HTML5 文字

第一行調用的 text 將標籤當作一般文字輸出,而第二行則是解譯,因此會得到一個粗體的 HTML5 文字內容。最後,調用 text() 或是 html() 方法時要特別注意,如果存取的標籤元素,其內容包含巢狀結構,則會將其子元素的內容文字一併取出,例如以下的配置:

<p id="msg">HTML5:<span>HTML5+JavaScript+CSS</span></p>

這一行 HTML配置,於 p 標籤中包含了 span ,調用 text() 將其取出如下:

$('#msg').text()   //回傳 HTML5:HTML5+JavaScript+CSS

取出的內容將是包含了 span 標籤內的純文字。如果調用 html() 則會輸出完整的HTML標籤內容。

$('#msg').html()  //回傳 HTML5:<span>HTML5+JavaScript+CSS</span>

text() 與 html() 是最單純的 jQuery 方法,如你所見,透過相關的設定可以輕易完成元素內容文字的存取。

》相關閱讀
======================================================
jQuery/jQuery Mobile 技術文件 》

沒有留言: