当前位置:编程学习 > JAVA >>

jquery中text val html的差别

今天参考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对象其实是一个数组。

<div id=”div1”><div id=”div2”>Find Me</div></div>

jquery代码 $(“#div1”).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却是只取包裹的元素,像上面的那个例子就会返回<div di=”div2

“>Find ME</div> ,其实我还试过取得select的html,如你所愿确实是很多option,但值得注意的是并不是所有的html标签都可以包裹元素,比如像input就不可以。

 

总体上我就理解这么多,初学jquery很多东西不知道,希望各位见谅

补充:软件开发 , Java ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,