【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
2024-08-31 09:25:27
// 属性框架
(function (xframe) {
// 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
xframe.extend({
/**
* 获取/设置某一个元素的属性信息
* @return {*}
*/
attr: function () {
// 获取属性信息：两种格式，1. 取值模式 2.设置模式
var args = arguments;
if (args.length === 0) {
// 没有参数的话，就直接返回本身
return this;
} else if (args.length === 1) {
// 一个参数的话需要进行判断
if (typeof args[0] === 'string') {
// 取值模式
return this[0].getAttribute(args[0]);
} else if (typeof args[0] === 'object') {
// json对象的话也算是一个设置模式
for (var item in args[0]) {
Array.prototype.slice.call(this).each(function () {
this.setAttribute(item, args[0][item]);
});
}
}
} else if (args.length === 2) {
Array.prototype.slice.call(this).each(function () {
this.setAttribute(args[0], args[1]);
});
}
// 注意这里的this实际上返回的是一个xframe实例对象，但是xframe.eatend(xframe, {})这里的this实际上是一个xframe(selector, context)函数， 还没有实例化呢
return this;
},
/**
* 判断DOM元素节点是不是拥有某一个属性
* @param val
* @return {boolean}
*/
hasClass: function (val) {
if (!this[0]) {
return false;
}
// 默认只会获取第一个元素的相关信息
return this[0].className === val.trim() ? true : false;
},
/**
* 添加一个class class='xiugang 18 nan'
* @param val
*/
addClass: function (val) {
// 处理传进来的字符串两边的空格
val = val.trim();
[].slice.call(this).each(function () {
// 只要原来的DOM节点上面没有这个属性的话，就直接添加上去
if (val !== this.className) {
this.className += ' ' + val;
}
})
return this;
},
/**
* 注意熟练掌握replace（）函数的使用
* @param val
*/
removeClass: function (val) {
val = val.trim();
[].slice.call(this).each(function () {
if (val === this.className) {
// 使用后面替换前面的
this.className = this.className.replace(val, '');
}
})
return this;
},
/**
* 如果有的话就直接删除，没有的话就添加一个
* @param val
* @return {toggleClass}
*/
toggleClass: function (val) {
val = val.trim();
[].slice.call(this).each(function () {
if (val === this.className) {
// 如果有的话就直接删除
this.className.replace(val, '');
} else {
// 没有的话就添加一个
this.className += ' ' + val;
}
});
return this;
}
});
// 不需要参与链式访问的
xframe.extend(xframe, {});
})(xframe);最新文章
- Math.abs()方法 取绝对值
- java-并发-保护代码块
- C#知识点总结系列：4、C#中Monitor和Lock以及区别
- 二叉树-二叉查找树-AVL树-遍历
- jQuery的XX如何实现？——4.类型检查
- JavaScript Source Map 详解
- Learning LexRank——Graph-based Centrality as Salience in Text Summarization（一）
- 初学Android开发怎么开始？
- 技巧集：nginx作代理时，查看请求被转发到哪台服务器
- AJAX 控件集之TextBoxWatermark(水印文本框)控件
- 【c#】RabbitMQ学习文档（七）C# API
- c语言之字符串和格式化输入输出
- docker+gitlab的安装和迁移
- AutoCAD 凸度（bulge）的概念及使用WPF函数画图
- bus总线
- 复习总结《一》MFC消息映射
- Python:slice与indices
- base64编码以及url safe base64是怎么工作的?
- 【前端】javaScript 常用技巧总结
- 005PHP基础知识——数据类型（二）