Jquery中text、html、val三者的区别

    今天参考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很多东西不知道，希望各位见谅