jQuery 作为一款优秀的JavaScript框架，使用 JQuery能够让你写出更加简洁易懂的代码，提高开发效率。
但是，在真正的开发过程中 我们需要考虑是否真正的需要使用一个 80+kb(压缩版 30+kb) 的代码库来作为自己的项目依赖。或者你正在开发自己的前端框架，那就更需要注意这一点了，
或许你只是需要使用几行实用的代码来方便和简化自己的书写。如此，我们何不使用简单的封装将我们仅仅需要的工具代码进行包装，或者干脆就是用原生的JavaScript，毕竟随着 ES6,ES7 的出现，JavaScript提供了更多的语法糖。新增了更多实用的方法。
Fly JQuery 使用javascript 生产单个的工具方法，需要使用时只需要简单拼装即可上手应用，每个工具方法后有详细的 JavaScript 实现。
使用方法 (使用方法基本和JQuery类似，可以进行连缀操作)
-
将 $$ 和 Base 方法复制到自己的项目中
这两个方法是实现 fly jquery 的基础 -
根据需要将其余的原型方法复制到自己的项目中
(例如: addClass 方法) -
使用
$$('CssSelector')创建一个对象, 然后像使用 jquery一样使用这个工具吧!( 例如: $$('#idName').addClass('flyJquery') )
小技巧: ( 使用
command + f 或者 ctrl + f本网页右上角 搜索 addClass, id 等任何关键字，)
aa.png
base
- 使用
$$('CssSelector')创建一个对象，支持传递基本的 css选择器构造对象， - 返回一个包含 Element List 的对象Base ( 下文一律使用 this 代替 )
- 可进行连缀操作
// 构造了 $$ 函数 用于初始化 fly jquery 对象
// Base 用于实现 fly jquery 的基本功能
var $$ = function (ele) {
return new Base(ele);
}
function Base(ele) {
//创建一个数组，来保存获取的节点和节点数组
this.elements = [];
if (typeof(ele) == 'string') {
if (/^#/.test(ele)) {
this.elements.push(document.querySelector(ele));
} else if (/^\./.test(ele) || /^\w/.test(ele)) {
var domList = document.querySelectorAll(ele);
for (var domIndex = 0; domIndex < domList.length; domIndex ++) {
this.elements.push(domList[domIndex]);
}
}
} else if (typeof ele === 'object' && ele instanceof Element && ele.nodeType === 1) {
// 判断元素 一定为 DOM 对象
this.elements.push(ele);
}
}
addClass(className)
Base.prototype.addClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (this.elements[i].classList)
this.elements[i].classList.add(className);
else
this.elements[i].className += ' ' + className;
}
return this;
}
-
addClass(class)
返回一个包含有该元素的对象（可进行进一步连缀操作） -
使用案例
$$('#selector').addClass('flyJquery'); // (div#selector.flyJquery) 返回 Base object
javascript 实现
if (el.classList)
el.classList.add(className);
else
el.className += ' ' + className;
removeClass(className)
Base.prototype.removeClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (this.elements[i].classList)
this.elements[i].classList.remove(className);
else
this.elements[i].className = this.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
return this;
}
-
removeClass(class)
删除选择器中的相应的 class, 返回对象 -
使用案例
$$('#selector').removeClass(className);
javascript 实现
if (el.classList)
el.classList.remove(className);
else
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
hasClass( className )
Base.prototype.hasClass = function (className) {
if (this.elements[0].classList)
return this.elements[0].classList.contains(className);
else
return new RegExp('(^| )' + className + '( |$)', 'gi').test(this.elements[0].className);
}
-
hasClass(class)
选择器匹配多于一个的元素，那么只会判断第一个选择器是否存在这个class
返回 boolean 值，不可进行连缀操作
-
使用案例
$$('#selector').hasClass(className) // true / false
javascript 实现
if (el.classList)
el.classList.contains(className);
else
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
attr( name | Object(key,value) | key, value )
Base.prototype.attr = function () {
if (arguments.length == 1 && typeof arguments[0] == 'string') { // 返回字符串
return this.elements[0].getAttribute(arguments[0]);
}
if (arguments.length == 1 && typeof arguments == 'object') { // 返回 一个对象
this.elements.forEach(function (item) {
for (var obj in this[0]) {
item.setAttribute(obj, this[0][obj]);
}
}, arguments);
}
if (arguments.length == 2) { // 返回 一个对象
this.elements.forEach(function(item) {
item.setAttribute(this[0], this[1]);
}, arguments);
}
return this;
}
- attr( name | Object(key,value) | key, value )
| 属性 | 解释 | 返回值 |
|---|---|---|
| name | attr(name) 属性名称 | 返回字符串 |
| Object(key,value) | attr( {'name': 'flyJquery', 'placeholder': 'descript'} ) 名/值对 对象 | 返回设置属性后的对象 |
| key, value | attr('name', 'flyJquery') 两个参数 | 返回设置属性后的对象 |
- 说明:
选择器匹配 多于一个 的元素时
使用attr( attrName )只能获取第一个 属性的名称
使用attr( Object(key,value) | key, value) )可以 ** 设置多个元素** 的 属性
JavaScript 实现
el.getAttribute(attrName); // 获取
el.setAttribute(attrName, attrValue); // 设置
css( cssName | Object(key,value) | key, value )
Base.prototype.css = function () {
if (arguments.length == 1 && typeof arguments[0] == 'string') {
return this.elements[0].getComputedStyle[arguments[0]]; // 返回一个只读属性的字符串
}
if (arguments.length == 1 && typeof arguments[0] == 'object') {
this.elements.forEach(function(item) {
for(var obj in this[0]) {
item.style[obj] = this[0][obj];
}
}, arguments);
}
if (arguments.length == 2) {
this.elements.forEach(function(item) {
item.style[this[0]] = this[1];
}, arguments);
}
}
- css( cssName | Object(key,value) | key, value )
| 属性 | 解释 | 返回值 |
|---|---|---|
| cssName | css(cssName) 属性名称 | 返回字符串 |
| Object(key,value) | css( {'color': 'red', 'width': '20px'} ) 名/值对 对象 | 返回设置属性后的对象 |
| key, value | css('color', 'red') 两个参数 | 返回设置属性后的对象 |
-
说明:
选择器匹配 多于一个 的元素时
使用css( cssName )只能获取第一个 属性的名称
使用css( Object(key,value) | key, value) )可以 ** 设置多个元素** 的 属性 -
拓展
获取属性 getComputedStyle
只读属性 返回字符(获取元素最终显示的样式,包括本身，外链，以及 父级 + 组级 没有被覆盖的属性)，
设置属性 style.xxx，可读可写，能屈能伸只能获取元素style 属性中的样式
** javascript 实现**
getComputedStyle(el)[cssName]; // 获取样式属性
el.style.color = 'red' // 设置样式属性
html( [htmlContent] )
Base.prototype.html = function () {
if (arguments.length == 0) {
return this.elements[0].innerHTML;
}
else {
this.elements.forEach(function(item) {
item.innerHTML = this[0];
}, arguments);
}
return this;
}
- html( [htmlContent] )
| 属性 | 解释 | 返回值 |
|---|---|---|
| html() | 获取一个元素的 html 内容 | 返回字符串 |
| html(htmlContent) | 设置选择器中元素的内容 | 返回设置html后的对象 |
- 说明：
选择器匹配 多于一个 的元素时
使用html( )只能获取第一个元素 的html内容
使用html(htmlContent)可以 设置多个元素 的 html 内容
javascript 实现
el.innerHTML // 获取
el.innerHTML = 'htmlContent'; // 设置
text( [textContent] )
Base.prototype.text = function () {
if (arguments.length == 0) {
return this.elements[0].textContent;
}
else {
this.elements.forEach(function(item) {
item.textContent = this[0];
}, arguments);
}
return this;
}
- text( [textContent] )
| 属性 | 解释 | 返回值 |
|---|---|---|
| text() | 获取一个元素的 text 内容 | 返回字符串 |
| text(textContent) | 设置选择器中元素的内容 | 返回设置text后的对象 |
- 说明：
选择器匹配 多于一个 的元素时
使用text( )只能获取第一个元素 的text内容
使用text(textlContent)可以 设置多个元素 的 text 内容
...... 持续更新中......
网友评论