這篇文章將為大家詳細(xì)講解有關(guān)jquery中text()、val()和html()有哪些區(qū)別，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、平輿網(wǎng)站維護(hù)、網(wǎng)站推廣。

jquery中text()、val()和html()的區(qū)別：text()用于html元素文本內(nèi)容的存??；html()不但可以用于html元素文本內(nèi)容的存取，還可以用于html內(nèi)容的存??；val()僅用于input元素內(nèi)容的存取。

共同點(diǎn)：text()，html() ，val()三個(gè)方法用于html元素的存值和取值。

區(qū)別：

• text()用于html元素文本內(nèi)容的存取

• html()不但可以用于html元素文本內(nèi)容的存取，還可以用于html內(nèi)容的存取

• val()用于input元素內(nèi)容的存取

text()定義和用法

text()方法方法設(shè)置或返回被選元素的文本內(nèi)容，如果有子標(biāo)簽，則把子標(biāo)簽內(nèi)的文本一起返回，相當(dāng)于js的innerText

代碼如下

    
    
    
    
    


    p有文本內(nèi)容

    
        p2內(nèi)的文本
        span內(nèi)有文本內(nèi)容
    

    
    
    
   
 

console打印的結(jié)果

可以看出text()只輸出標(biāo)簽內(nèi)的文本內(nèi)容，和js的innerText方法一樣

html()定義和用法

html() 方法返回或設(shè)置被選元素的內(nèi)容 (inner HTML)，包括標(biāo)簽。如果有子標(biāo)簽，則把子標(biāo)簽本身和子標(biāo)簽內(nèi)的文本一起返回

相當(dāng)于js的innerHTML

如果該方法未設(shè)置參數(shù)，則返回被選元素的當(dāng)前內(nèi)容。

    p有文本內(nèi)容

    
        p2內(nèi)的文本
        span內(nèi)有文本內(nèi)容
    

    
    
    
    

通過console的打印的結(jié)果

打印當(dāng)前標(biāo)簽內(nèi)的文本內(nèi)容，如果有子標(biāo)簽，則把子標(biāo)簽本身和子標(biāo)簽內(nèi)的文本一起打印

這個(gè)和js的innerHTML差不多

text()和html()使用注意事項(xiàng)：

通過上述兩個(gè)實(shí)例，我們知道文檔對象（dom）中存在的元素，如p，通過text()和html()都可以獲取他的文本值，那么如果文檔對象（dom）中不存在這個(gè)元素，而我們卻通過text()和html()獲取他的文本值，那又會怎么樣呢？

dom中不存在h2元素，我們加入以下代碼：

console.log($('h2')) 
console.log($('h2').text()) //空字符串
console.log($('h2').html()) //undefined

以下是打印結(jié)果：$('h2').text() 打印空字符串,$('h2'),html() 打印undefined

val() 定義和用法

val() 方法返回或設(shè)置被選元素的值。

元素的值是通過 value 屬性設(shè)置的。該方法大多用于 input 元素。

方法主要用于獲取表單元素的值

如果該方法未設(shè)置參數(shù)，則返回被選元素的當(dāng)前值。

    p有文本內(nèi)容

    
        p2內(nèi)的文本
        span內(nèi)有文本內(nèi)容
    

    
    
    
    

通過控制臺打印結(jié)果

val()是用來輸出表單內(nèi)的數(shù)據(jù)，可以看出p和span標(biāo)簽內(nèi)的文本并沒有被輸出，我還測試了H5新標(biāo)簽placeholder

同樣也沒有被輸出，所以這個(gè)val應(yīng)該是只針對標(biāo)簽的value屬性的

那么val()設(shè)置值呢

我們在script標(biāo)簽內(nèi)再加上三行代碼，設(shè)置兩個(gè)input框和一個(gè)botton的值

	$('#input1').val('123');
	$('#input2').val('123');
	$('#button1').val('123');

來看看瀏覽器呈現(xiàn)出的效果和HTML結(jié)構(gòu)：

對于input框，通過val()設(shè)置的值顯示在文本框內(nèi)，自己本身的value并沒有被改變；對于button，通過val()設(shè)置值其實(shí)就是在給value屬性賦值

關(guān)于“jquery中text()、val()和html()有哪些區(qū)別”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。