jquery element content

1. Dom元素提供innserHTML来设定元素的内部的html内容。这可以直接把string的HTML变成Dom元素，同时也可以把Dom元素变成html标签的string.有的时间我们只需要其text内容，不要标签。这个时候可以采用regexp把标签给过滤了，就是text的内容。   
2. 第三种的内容是直接显示出来的Dom元素。一个元素的这种内容就是所有子元素。第四种内容指是的元素的value值，特别是Input类型的元素。因为对于Input类型来讲，value就是其元素内部的content。   
3. Jquery也分别就这四种形式提供了实现。   
4. 5.4.1 html   
5. Html是取内部的html，包含标签，如<div><b>xx</b></div>,html返回就是<b>xx</b>。Html简单，取值就直接innerHTML,设值就直接插入value。   
6. // 设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。   
7. // 取得第一个匹配的元素的html内容   
8.     html : function(value) {   
9.         return value == undefined ? (this[0] ? this[0].innerHTML : null) : this.empty().append(value);// 去掉所有子节点，在内部加上value(字符或dom)   
10.     },   
11. 在这里还是觉得直接采用innerHTML,它的速度会更快。只要加上一个判断，如果value是string的话，就直接采用innerHTML。不需要采用append转来转去。   
12. 5.4.2 text   
13. Jquery的text可以把document.createTextNode(text)的节点加到已经除去所有子元素的当前元素的内部。觉得对于IE，采用insertAdjacentText速度会更快。取值话，text会把当前元素的所有文本节点都连串成字符串。   
14. // text()   
15.     // 取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。   
16. // 对HTML和XML文档都有效。   
17.     // text(val)   
18.     // 设置所有匹配元素的文本内容.与 html() 类似, 但将编码 HTML   
19. //  "<" 和 ">" 替换成相应的HTML实体).   
20.     text : function(text) {   
21.         if (typeof text != "object" && text != null)//设值   
22.             return this.empty()// 除去元素中所有的子元素，加上创建的文本节点   
23.                     .append((this[0] && this[0].ownerDocument || document)   
24.                  createTextNode(text));   
25.         //取值,这里可以看text可以是对象，如是对象，   
26. //对所有属性对应的元素（一定要是dom元素(节点））进行取值。   
27.         var ret = "";   
28.         jQuery.each(text || this, function() {   
29. // 所有匹配元素包含的文本内容组合起来   
30.                 jQuery.each(this.childNodes, function() {   
31.                     if (this.nodeType != 8)// 8：注释   
32.                             ret += (this.nodeType != 1// 元素的话，递归子元素   
33.                                 ? this.nodeValue: jQuery.fn.text([this]));   
34.                         });   
35.                 });   
36.         return ret;   
37.     },   
38.   
39. 5.4.3 value   
40. // 获得第一个匹配元素的当前值。   
41. // 在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。   
42. // 设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为select元件赋值   
43. val : function(value) {   
44.     if (value == undefined) {//取值   
45.         if (this.length) {//如果当前jquery对象不是空集合   
46.             var elem = this[0];   
47.            //对select中option，我们会采用<option>xx</option>   
48. //<option value=xx/>的形式   
49.             if (jQuery.nodeName(elem, 'option')) //value属性是否选中   
50.                 return (elem.attributes.value || {}).specified                          ? elem.value: elem.text;   
51.             //处理select的value   
52.             if (jQuery.nodeName(elem, "select")) {   
53.                 var index = elem.selectedIndex, values = [],    
54. options = elem.options, one = elem.type == "select-one";   
55.                 if (index < 0)  return null;//没有选中选择项   
56.                 // 不管是单选还是多选，找到所有的选中的选项   
57.                 //对于单选而言，这样的判断实现减少for的次数，提高效率   
58.                 //一般的实现都是直接采用for循环，可见jquery代码之优化   
59.                 for (var i = one ? index : 0, max = one   
60.                             ? index + 1 : options.length;i < max; i++) {   
61.                     var option = options[i];   
62.                     if (option.selected) {   
63.                       // 嵌套调用本函数，调用其option的部分进行处理，   
64. //找到option的指定的值   
65.                         value = jQuery(option).val();                      
66.                             if (one) return value;  //单选直接返回值      
67.                             values.push(value);//多选返回数组   
68.                         }   
69.                     }   
70.                     return values;                     
71.                 } else//不要进行特殊的处理，但要去回车符   
72.                 return (this[0].value || "").replace(/\r/g, "");   
73.             }   
74.             //空集合时返回   
75.             return undefined;   
76.         }   
77. if (value.constructor == Number)value += '';//转换成字符的形式   
78.   
79. return this.each(function() {   
80.         if (this.nodeType != 1) return;//不是元素不处理。   
81.         //如果元素是radio|checkbox，设定的值为Array的形式   
82.         //那么本元素的value值或name值在数组中，就设定为选中。   
83.         if (value.constructor == Array   
84.                 && /radio|checkbox/.test(this.type))   
85.         this.checked = (jQuery.inArray(this.value, value) >= 0 || jQuery   
86.                             .inArray(this.name, value) >= 0);   
87.                       
88.         //如果元素是select，先把value转换成数组   
89.         //再判断其options的value在这个数组中不，在的话，就设定为选中。   
90.         else if (jQuery.nodeName(this, "select")) {   
91.             var values = jQuery.makeArray(value);   
92.             jQuery("option", this).each(function() {//给option设值   
93.             this.selected = (jQuery.inArray(this.value,   
94.                 values) >= 0 || jQuery.inArray(  this.text, values) >= 0);   
95.             });   
96.              if (!values.length) this.selectedIndex = -1;//如果空值         } else  //其他的不要特殊处理，直接设值。   
97.             this.value = value;   
98.         });   
99. },   
100. 5.4.4 content   
101. Jquery的Content其实就是元素的所有的子元素的集合。   
102. jQuery.each( {   
103.         contents : function(elem) {// iframe?就是文档，或者所有子节点   
104.             return jQuery.nodeName(elem, "iframe") ? elem.contentDocument   
105.                     || elem.contentWindow.document : jQuery   
106.                     .makeArray(elem.childNodes);   
107.         }   
108.     }, function(name, fn) {// 注册到jQuery对象中去，可以调用同名方法   
109.             jQuery.fn[name] = function(selector) {   
110.                 var ret = jQuery.map(this, fn);// 每个元素都执行同名方法   
111.                 if (selector && typeof selector == "string")   
112.                     ret = jQuery.multiFilter(selector, ret);// 过滤元素集   
113.             return this.pushStack(jQuery.unique(ret));// 构建jQuery对象   
114.             };   
115.         });