1. 程式人生 > >JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系?jQuery中的text()、html()和val()

JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系?jQuery中的text()、html()和val()

chrom html標簽 sel detail put 替換 not 內容 tail

一、JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系?
jS中設置或者獲取所選內容的值:
①innerHTML :屬性設置或返回該標簽內的HTML。也就是從對象的起始位置到終止位置的全部內容,包括Html標簽。
②outerHTML:屬性設置或返回該標簽及標簽內的HTML。也就是從對象的該標簽起始到終止位置的全部內容,包括Html標簽。
如果要輸出不含HTML標簽的內容,可以使用innerHTML取得包含HTML標簽的內容後,再用正則表達式去除HTML標簽,
③inneText:從起始位置到終止位置的內容,但它去除html標簽。(只能在IE和chrome下使用)
④outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本 <br><br>
⑤value:屬性可設置或返回密碼域的默認值。獲取文本框的值
二、jQuery中的text()、html()和val()
jQuery中設置或者獲取所選內容的值:
①text();設置或者獲取所選元素的文本內容;
②html();設置或者獲取所選元素的內容(包括html標記);
③val();設置或者獲取表單字段的值(前提是表單設置了value屬性);
首先,html屬性中有兩個方法,一個有參,一個無參

  1. 無參html():取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔,返回的是一個String
 例子:
        html頁面代碼:<div><p>Hello</p></div>
       jquery代碼:$("div").html();
      結果:<p>Hello</p>
 2.有參html(val):設置每一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔。返回一個jquery對象
    html頁面代碼:<div></div>
    jquery代碼:$("div").html("<p>Nice to meet you</p>");
    結果:[ <div><p> Nice to meet you</p></div> ]      

其次,text屬性中有兩個方法,一個有參,一個無參

    1. 無參text():取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。返回的是一個String
     例子:
        html頁面代碼:<p><b>Hello</b> fine</p>
                              <p>Thank you!</p>
       jquery代碼:$("p").text();
       結果:HellofineThankyou!
     2.有參text(val):設置所有匹配元素的文本內容,與 html() 類似, 但將編碼 HTML (將 "<" 和 ">" 替換成相應的HTML實體).返回一個jquery對象
       html頁面代碼:<p>Test Paragraph.</p>
      jquery代碼:$("p").text("<b>Some</b> new text.");
      結果:[ <p><b>Some</b> new text.</p> ]

最後,val()屬性中也有兩個方法,一個有參,一個無參。
1.無參val():獲得第一個匹配元素的當前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選,將返回一個數組,其包含所選的值。 返回的是一個String、 array
jquery代碼:$("p").append( "<b>Single:</b> " + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", "));
結果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
2.有參val(val):設置每一個匹配元素的值。在 jQuery 1.2, 這也可以為check,select,radio元件賦值,返回一個jquery對象
html頁面代碼:<input type="text"/>
jquery代碼:$("input").val("hello world!");
結果:hello world!

原文鏈接:http://ife.baidu.com/note/detail/id/635

JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系?jQuery中的text()、html()和val()