关于js封装框架类库之属性操作
2024-03-22 16:25:38
在对DOM对象操作时，往往都要涉及到其属性的操作，为了提高开发效率，同时兼顾浏览器的性能，在这简单的封装了几个常见的属性。因为是模块化，在这只是引入了部分代码，其他代码在前几篇模块封装中有写。如有不足，万望提出，谢谢！
1、判断是否有属性，以及设置属性的操作
YY.fn.extend({
attr: function (attName,attValue){
//判断传入参数是否有属性值，没有直接返回属性名
if(arguments.length == 1){
return this[0].attName;
}else{
// 如果传入有属性值，给属性添加属性值
return this.each(function(){
this.attName = attValue;
});
}}
})
2、预先设定值val方法
YY.fn.extend({
val: function (value){
//判断value是否有值，没有则返回，有值则设置值
if(value === undefined){
return this[0].value;
}else{
return this[0].each(function(){
this.value = value;
})
}
}
});
3、返回或设置被选元素的内容html方法
YY.fn.extend({
html: function ( html ) {
if ( html === undefined ) {
// 返回 0 元素的 innerHTML
return this[ 0 ].innerHTML;
} else {
// 设置所有的 innerHTML
return this.each(function () {
this.innerHTML = html;
});
}
}
});
4、设置或返回被选元素的文本内容text方法
YY.fn.extend({
text: function (text){
if(text === undefined){
return this[0].innerText;
}else{
return this.each(function(){
this.innerText = text;//早期的火狐浏览器不支持innerText
})
}
}
})
兼容低版本火狐浏览器的写法
YY.extend({
//获取innerHTML值
getInnerText: function ( dom ) {
var list = [];
if ( dom.innerText !== undefined ) {
return dom.innerText;
} else {
getTextNode( dom, list );
//将数组换化为字符串
return list.join( '' );
}
function getTextNode ( dom, arr ) {
// 将 dom 里面的所有的文本节点放到 arr 中
var i, l = dom.childNodes.length,
node;
for ( i = 0; i < l; i++ ) {
node = dom.childNodes[ i ];
if ( node.nodeType === 3 ) {
//node.nodeValue节点的文本值
arr.push( node.nodeValue );
} else {
getTextNode( node, arr );//递归处理方式
}
}
}
},
//设置innerHTML值
setInnerText: function (dom,str){
//判断浏览器是否支持innerText
if('innerText' in dom){
dom.innerText = str;
}else{
dom.innerHTML = '';
//不支持在内部直接创建一个文本节点
dom.appendChild(document.createTextNode(str));
}
}
});
那么对应的test方法应改为
YY.fn.extend({
text: function ( text ) {
if ( text === undefined ) {
// 返回 0 元素的 innerHTML
return YY.getInnerText( this[ 0 ] );
} else {
// 设置所有的 innerHTML
return this.each(function () {
YY.setInnerText( this, text );
});
}
}
});
最新文章
- 学习了quartz.net2.0的心得
- Fiddler-1 安装
- xtrabackup_binlog_pos_innodb 和 xtrabackup_binlog_info
- Android SQLite数据库使用
- lastPathComponent的功能
- linux下修改ip地址，默认网关以及DNS
- unix您不能使用crontab设置运营计划
- seaJS 模块加载过程分析
- Express 配置 https / 443 安全链接
- Java建造者模式
- C# - Visual Studio简明操作
- 关于截取URL地址参数的方法
- XAMPP启动Apache时发生ERROR
- 【POJ3666】Making the Grade 离散化+DP
- BZOJ1067 [SCOI2007]降雨量 线段树
- 使用自定义的Adapter来设置ListView的内容
- java TreeNode接口
- CentOS7安装redis5.0
- 安装指定版本的docker
- C# 读写XML文件示例