jQuery编程模仿

近来因为公司不断拖欠工资的关系,停顿了一段学习的时间。看书也有些凌乱,现将目前接触到的querySelectorAll方法作为框架基础的小类库贴出,由于此方法只在最新浏览器中被使用。在开发中仍以jQuery选择器为主,此文只供私下学习。


(function(w){
if(!String.trim || typeof String.trim !== ‘function‘) {
String.trim = function(str){
switch(typeof str) {
case ‘number‘ : return ‘‘ + str;
case ‘string‘ : return str.replace(/^\s+|\s+$/g, ‘‘);
default : return Object.prototype.toString.call(str); // 返回最原始的toString
}
};
}
var Garbin = function(obj) {
this.data = obj;
};
var garbin = function(query){
if(!String.trim(query) || typeof query !== ‘string‘) return null;
var obj = w.document.querySelectorAll(query);
return new Garbin(obj);
};
garbin.extend = function(a, b) {
if(!a) return null;
if(!b) return a;
for(var k in b) a[k] = b[k];
return a;
};
garbin.extend(garbin, {
merge : function(a, b) {
for(var k in b) if(!a.hasOwnProperty(k)) a[k] = b[k];
return a;
}
});
garbin.fn = Garbin.prototype;
garbin.extend(Garbin.prototype, {
get : function(idx) {
if(!idx || isNaN(idx)) throw new TypeError(‘Param is not a Number type.‘);
if(!this.data) throw new Error(‘point-null Error.‘);
return this.data.item(idx);
},
val : function(val) {
var data = this.data;
if(val) {
for (var i = 0; i < data.length; i++) {
data[i].setAttribute(‘value‘, val);
}
return this;
} else if(data){
if(this.data.length === 1) return data[0].getAttribute(‘value‘);
else {
var result = [];
for (var i = 0; i < data.length; i++) { result.push(data[i].getAttribute(‘value‘)); }
return result;
}
}
},
attr : function(keyOrData, value) {
var data = this.data;
if(!keyOrData) return this;
if(!value) {
if(typeof keyOrData === ‘string‘) {
if(!data) return null;
if(data.length === 1) return data[0].getAttribute(keyOrData);
var result = [];
for (var i = 0; i < data.length; i++) {
result.push(data[i].getAttribute(keyOrData));
}
return result;
} else {
for(var k in keyOrData) {
var v = keyOrData[k];
for (var i = 0; i < data.length; i++) {
data[i].setAttribute(k, v);
}
}
return this;
}
}
data[0].setAttribute(keyOrData, value);
return this;
},
text : function(txt) {
var data = this.data;
if(!data) return this;
var parseHTML = function(html) {
if(!html) return null;
return html.replace(/<.*>/, ‘‘);
};
if(!txt) {
if(data.length === 1) return parseHTML(data[0].innerHTML);
var result = [];
for (var i = 0; i < data.length; i++) {
result.push(parseHTML(data[i].innerHTML));
}
return result;
} else {
var html = ‘<‘ + data[0].innerHTML.replace(/^[^<]*<|>[^>]*$/g, ‘‘);
if(data.length === 1) data[0].innerHTML = txt + html;
else {
for (var i = 0; i < data.length; i++) {
data[i].innerHTML = txt + html;
}
}
return this;
}
},
html : function(html) {
var data = this.data;
if(!data || data.length < 1) return null;
if(!html) {
if(data.length === 1) return data[0].innerHTML;
var result = [];
for (var i = 0; i < data.length; i++) {
result.push(data[i].innerHTML);
}
return result;
} else {
if(data.length === 1) data[0].innerHTML = html;
else {
for (var i = 0; i < data.length; i++) {
data[i].innerHTML = html;
}
}
return this;
}
},
css : function(keyOrData, value) {
var data = this.data;
if(!keyOrData) return this;
if(!value) {
if(typeof keyOrData === ‘string‘) {
if(!data) return null;
if(data.length === 1) return data[0].style[keyOrData];
var result = [];
for (var i = 0; i < data.length; i++) {
result.push(data[i].style[keyOrData]);
}
return result;
} else {
for(var k in keyOrData) {
var v = keyOrData[k];
for (var i = 0; i < data.length; i++) {
data[i].style[k] = v;
}
}
return this;
}
}
data[0].style[keyOrData] = value;
return this;
},
show : function() {
return this.css(‘visibility‘, ‘visible‘);
},
hide : function() {
return this.css(‘visibility‘, ‘hidden‘);
},
find : function(query) {
if(!String.trim(query) || typeof query !== ‘string‘) return null;
var data = this.data;
if(!data) return;
if(data.length === 1) {
return new Garbin(data[0].querySelectorAll(query));
} else {
var result = [];
for (var i = 0; i < data.length; i++) {
var tmpArr = data[i].querySelectorAll(query);
for (var j = 0; j < tmpArr.length; j++) {
result.push(tmpArr.item(j));
}
}
return new Garbin(result);
}
}
});
garbin.extend(w, { garbin : garbin });
}(window));

时间: 2024-12-05 09:12:24

jQuery编程模仿的相关文章

Jquery编程基础

1.Jquery (1).Jquery是一个兼容多浏览器的js库,其核心理念:将js和DOM编程封装起来了,使得开发更加的便捷: (2).jquery的中文文档:http://www.php100.com/manual/jquery 其内容大致如下: (3).去Jquery官网下载一个jquery文件,的引入到你所编程的目录下面. <script src = "js/jquery.js"></script> 此时就可以用Jquery提供的各种函数了: (4).引

jQuery编程技巧

1.将会重用的元素缓存 //bad var h = $('#hello').height(): $('#hello').css('height',h-20): //good var $hello = $('#hello'), h = $hello.height(): $hello.css('height',h-20): 2.尽量少设置全局变量,尽量在函数作用域内设置变量 3.在jQuery对象前加$前缀,便于识别 //bad var hello = $('#hello'), value = he

jQuery编程中的一些核心方法简介

调用 jQuery 对象的方法很简单: $('h1').remove(); 大多数 jQuery 方法都是像上面这样被调用的,这些方法都位于 $.fn 命名空间内,这些方法称为 jQuery 对象方法. 但是也有一些方法不需要依赖于选择器的结果集,这些方法位于 jQuery 命名空间内,这些方法称为 jQuery 核心方法.如果觉得不好理解,记住下面两条即可: 所有 jQuery 选择器的方法都位于 $.fn 命名空间内. $ 内的方法一般都是一些实用的功能性方法,这些方法不依赖选择器,这些方法

jquery 编程的最佳实践

Loading jQuery Always try to use a CDN to include jQuery on your page. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    <script>window.jQuery || document.wri

jQuery编程的最佳实践

好像是feedly订阅里看到的文章,读完后觉得非常不错,译之备用,多看受益. 加载jQuery 1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢.点击查看使用CDN的好处,点此查看一些主流的jQuery CDN地址. XHTML 1 2 3 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js&qu

[jQuery编程挑战]001:实现页面元素加速动画效果

要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>实现页面元素加速动画效果</title> <styl

【FIR.im赞助】jQuery编程挑战#012:生成菜单添加和删除动画效果

申请达人,去除赞助商链接 定义如下HTML代码: <!-- HTML代码片段中请勿添加<body>标签 //--> <ul id="container"> <li>Java<i class="fa fa-times pull-right"></i></li> <li>Javascript<i class="fa fa-times pull-right&qu

jQuery编程小结

加载jQuery 1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢.点击查看使用CDN的好处,点此查看一些主流的jQuery CDN地址. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery

(4)JQuery编程基础

jQuery.实例大全 中文文档:http://www.php100.com/manual/jquery/ 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产生的对象时jQuery独有的,只能自己调用 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并不是强制要求. 二.寻