今天參考jquery的文檔發現三個相似的函數 text val html ,於是網上Google瞭一下,這是個問題,沒有很好的解答,於是下午無聊,開始研究
text()
jquery的具體的函數功能就不介紹瞭,其實text是調用jquery中getText(),而getText是一個從DOM數組中取得text value的工具函數(記得是Dom數組),具體實現就是遍歷Dom數組的每一個Dom元素,然後判斷他的節點類型(if ( elem.nodeType === 3 || elem.nodeType === 4 ))這句代碼的意思就是判斷此節點是否是文本節點或者是CDATA,若是的話就直接去elem的nodevalue。若不是則判斷節點是不是註釋節點如不是,則遞歸遍歷此節點的子節點(getText( elem.childNodes ))。如此遍歷最後得到text value。
有上面分析可得到jquery對象的text就是取此節點的nodevalue或是此節點的子節點的nodevalue。所以即使嵌套的再深,也會取得文本節點的值。
註意:通過選擇器返回的jquery對象其實是一個數組。
<p id=”p1”><p id=”p2”>Find Me</p></p>
jquery代碼 $(“#p1”).text() 返回Find Me
val()
val()的具體實現是根據jquery對象包裝的Dom元素的value屬性來的。並不是所有的Dom都有value屬性,詳細的各Dom元素具有的屬性
DOm中有value屬性的是Button ImageButton(設置或返回在按鈕上顯示的文本) CheckBox(設置或返回 checkbox 的 value 屬性的值) File(返回由用戶輸入設置的文本後,FileUpload 對象的文件名。) Hidden(設置或返回隱藏域的 value 屬性的值。),Password ,Radio , Reset (設置或返回按鈕上顯示的文本),Submit Text Option textarea
註意select雖然沒有value屬性,但是val在取得元素的value屬性之前還有一個判斷,子啊valhooks中也好像隻針對瞭select和option
hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];
if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
return ret;
其實本人對其中的代碼就不是很清楚瞭(有興趣自己研究啊)。但他保證瞭select正確取得val();
而其他jquery對象取得Val,好像隻是一個“”;
html
不用我說你也已經猜到,這個方法調用的是哪個Dom屬性,bingo!就是innerhtnl,其實本人對innerhtml不是很熟
看起來跟text很像啊,其實不然,前面我們說過,text其實取得一致都是text節點的值,而innerhtml卻是隻取包裹的元素,像上面的那個例子就會返回<p di=”p2
“>Find ME</p> ,其實我還試過取得select的html,如你所願確實是很多option,但值得註意的是並不是所有的html標簽都可以包裹元素,比如像input就不可以。
總體上我就理解這麼多,初學jquery很多東西不知道,希望各位見諒