5.4dom元素的内容
prk/彭仁夔 08-08-24
Dom元素提供innserHTML来设定元素的内部的html内容。这可以直接把string的HTML变成Dom元素,同时也可以把Dom元素变成html标签的string.有的时间我们只需要其text内容,不要标签。这个时候可以采用regexp把标签给过滤了,就是text的内容。
第三种的内容是直接显示出来的Dom元素。一个元素的这种内容就是所有子元素。第四种内容指是的元素的value值,特别是Input类型的元素。因为对于Input类型来讲,value就是其元素内部的content。
Jquery也分别就这四种形式提供了实现。
5.4.1 html
Html是取内部的html,包含标签,如<div><b>xx</b></div>,html返回就是<b>xx</b>。Html简单,取值就直接innerHTML,设值就直接插入value。
// 设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
// 取得第一个匹配的元素的html内容
html : function(value) {
return value == undefined ? (this[0] ? this[0].innerHTML : null) : this.empty().append(value);// 去掉所有子节点,在内部加上value(字符或dom)
},
在这里还是觉得直接采用innerHTML,它的速度会更快。只要加上一个判断,如果value是string的话,就直接采用innerHTML。不需要采用append转来转去。
5.4.2 text
Jquery的text可以把document.createTextNode(text)的节点加到已经除去所有子元素的当前元素的内部。觉得对于IE,采用insertAdjacentText速度会更快。取值话,text会把当前元素的所有文本节点都连串成字符串。
// text()
// 取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。
// 对HTML和XML文档都有效。
// text(val)
// 设置所有匹配元素的文本内容.与 html() 类似, 但将编码 HTML
// "<" 和 ">" 替换成相应的HTML实体).
text : function(text) {
if (typeof text != "object" && text != null)//设值
return this.empty()// 除去元素中所有的子元素,加上创建的文本节点
.append((this[0] && this[0].ownerDocument || document)
createTextNode(text));
//取值,这里可以看text可以是对象,如是对象,
//对所有属性对应的元素(一定要是dom元素(节点))进行取值。
var ret = "";
jQuery.each(text || this, function() {
// 所有匹配元素包含的文本内容组合起来
jQuery.each(this.childNodes, function() {
if (this.nodeType != 8)// 8:注释
ret += (this.nodeType != 1// 元素的话,递归子元素
? this.nodeValue: jQuery.fn.text([this]));
});
});
return ret;
},
5.4.3 value
// 获得第一个匹配元素的当前值。
// 在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
// 设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为select元件赋值
val : function(value) {
if (value == undefined) {//取值
if (this.length) {//如果当前jquery对象不是空集合
var elem = this[0];
//对select中option,我们会采用<option>xx</option>
//<option value=xx/>的形式
if (jQuery.nodeName(elem, 'option')) //value属性是否选中
return (elem.attributes.value || {}).specified ? elem.value: elem.text;
//处理select的value
if (jQuery.nodeName(elem, "select")) {
var index = elem.selectedIndex, values = [],
options = elem.options, one = elem.type == "select-one";
if (index < 0) return null;//没有选中选择项
// 不管是单选还是多选,找到所有的选中的选项
//对于单选而言,这样的判断实现减少for的次数,提高效率
//一般的实现都是直接采用for循环,可见jquery代码之优化
for (var i = one ? index : 0, max = one
? index + 1 : options.length;i < max; i++) {
var option = options[i];
if (option.selected) {
// 嵌套调用本函数,调用其option的部分进行处理,
//找到option的指定的值
value = jQuery(option).val();
if (one) return value; //单选直接返回值
values.push(value);//多选返回数组
}
}
return values;
} else//不要进行特殊的处理,但要去回车符
return (this[0].value || "").replace(/\r/g, "");
}
//空集合时返回
return undefined;
}
if (value.constructor == Number)value += '';//转换成字符的形式
return this.each(function() {
if (this.nodeType != 1) return;//不是元素不处理。
//如果元素是radio|checkbox,设定的值为Array的形式
//那么本元素的value值或name值在数组中,就设定为选中。
if (value.constructor == Array
&& /radio|checkbox/.test(this.type))
this.checked = (jQuery.inArray(this.value, value) >= 0 || jQuery
.inArray(this.name, value) >= 0);
//如果元素是select,先把value转换成数组
//再判断其options的value在这个数组中不,在的话,就设定为选中。
else if (jQuery.nodeName(this, "select")) {
var values = jQuery.makeArray(value);
jQuery("option", this).each(function() {//给option设值
this.selected = (jQuery.inArray(this.value,
values) >= 0 || jQuery.inArray( this.text, values) >= 0);
});
if (!values.length) this.selectedIndex = -1;//如果空值 } else //其他的不要特殊处理,直接设值。
this.value = value;
});
},
5.4.4 content
Jquery的Content其实就是元素的所有的子元素的集合。
jQuery.each( {
contents : function(elem) {// iframe?就是文档,或者所有子节点
return jQuery.nodeName(elem, "iframe") ? elem.contentDocument
|| elem.contentWindow.document : jQuery
.makeArray(elem.childNodes);
}
}, function(name, fn) {// 注册到jQuery对象中去,可以调用同名方法
jQuery.fn[name] = function(selector) {
var ret = jQuery.map(this, fn);// 每个元素都执行同名方法
if (selector && typeof selector == "string")
ret = jQuery.multiFilter(selector, ret);// 过滤元素集
return this.pushStack(jQuery.unique(ret));// 构建jQuery对象
};
});