一个简单的迷你jQuery实现
//仅提供与学习使用
(function () {
var _$ = window.$;
var _jQuery = window.jQuery;
//暴露外部使用的一个接口
var jQuery = window.jQuery = window.$ = function(selector){
return new jQuery.fn.init(selector);
};
//处理原型对象
jQuery.fn = jQuery.prototype = {
init:function(selector){
var elements = document.querySelectorAll(selector);//document.querySelectorAll()//是用来循环遍历的
//querySelectorAll是一个很强大的选择器,它返回的不是一个数组,而是一个NodeList。
Array.prototype.push.apply(this,elements);
return this;
},
jQueryVesion:"1.0.0",//版本
length:0,
size:function(){
return this.length;
}
};
jQuery.fn.init.prototype = jQuery.fn;
//实现继承,并且只处理只有一个参数,也就是插件的扩展
jQuery.extend = jQuery.fn.extend = function(){
var o = arguments[0];
for(var p in o){//循环遍历
this[p] = o[p];
}
};
//添加静态方法
jQuery.extend({
trim:function(text){
return (text||"").replace(/^\s+|\s+$/g,"");//正则表达式作用是去掉全部的空格,
},
noConflict:function(){
window.$ = _$;
window.jQuery = _jQuery;
return jQuery;
}
});
//添加实例方法
jQuery.fn.extend({
get:function(num){
return this[num];
},
each:function(fn){
for(var i = 0 ;i< this.length; i++){
fn(i,this[i]);
}
return this;
},
css:function(){
var l = arguments.length;
if(l == 1){
return this[0].style[arguments[0]];
} else {
var name = arguments[0];
var value = arguments[1];
this.each(function(index,ele) {
ele.style[name] = value;
});
}
return this;
}
});
})();
一个简单的迷你jQuery实现的更多相关文章
- 一个简单的消息提示jquery插件
最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...
- 编写一个简单的Jquery插件
1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...
- 一个简单的jQuery插件开发实例
两年前写的一个简单的jQuery插件开发实例,还是可以看看的: <script type="text/javascript" src="jquery-1.7.2.m ...
- layer —— 一个简单的jQuery弹出层插件
layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...
- 一个简单的特效引发的大战之移动开发中我为什么放弃jquery mobile
我本想安静的做一个美男子,可是,老板不涨工资,反而,一月不如一月. 我为什么放弃jquery mobile插件选择自己写特效? 在开发中大家都知道效率很重要,一个好的工具可以在开发中大大提升效率,工作 ...
- 实现一个简单的"jQuery"
本次博客记录一个简单的"jQuey"的实现方式,来加深对jQuery的理解: 代码: <!DOCTYPE html> <html> <head> ...
- 【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件
原文:https://segmentfault.com/a/1190000012344970 插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头 ...
- 利用HTML5与jQuery技术创建一个简单的自动表单完成
来源:GBin1.com 在线演示 在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...
- 用jquery制作一个简单的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- python学习之第三课时--基本数据类型及区别,变量
基本数据类型及区别 1. 数字类型(int) 数字型--变量值直接是数字,没有双引号"" 整数 2. 浮点数(float) 肤浅理解小数点后有有效数字 1.55 0.22 ...
- ADO.NET生成的数据库连接字符串解析
1.概述 当我们使用ADO.NET数据实体模型生成的时候,在项目目下生成一个.edmx文件的同时,还会在app.config里面出现如下一个代码串: <?xml version="1. ...
- Keras学习环境配置-GPU加速版(Ubuntu 16.04 + CUDA8.0 + cuDNN6.0 + Tensorflow)
本文是个人对Keras深度学习框架配置的总结,不周之处请指出,谢谢! 1. 首先,我们需要安装Ubuntu操作系统(Windows下也行),这里使用Ubuntu16.04版本: 2. 安装好Ubunt ...
- typeof、constructor和instance
在JavaScript中,我们经常使用typeof来判断一个变量的类型,使用格式为:typeof(data)或typeof data.typeof返回的数据类型有六种:number.string.bo ...
- Unable to open debugger port (127.0.0.1:51554): java.net.SocketException "socket closed"
刚开始使用IDEA 总是有各种各样奇葩的问题 启动报错: Unable to open debugger port (127.0.0.1:51554): java.net.SocketExceptio ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- sphinx实时索引和高亮显示
sphinx实时索引和高亮显示 时间 2014-06-25 14:50:58 linux技术分享 -欧阳博客 原文 http://www.wantlearn.net/825 主题 Sphinx数据 ...
- Winsock网络编程笔记(3)----基于UDP的server和client
在上一篇随笔中,对Winsock中基于tcp面向连接的Server和Client通信进行了说明,但是,Winsock中,Server和Client间还可以通过无连接通信,也就是采用UDP协议.. 因此 ...
- 分酒问题(DFS解法)
题目大概是这样: 已知有三个容量分别为3千克.5千克和8千克的并且是没有刻度的酒瓶,3千克和5千克的瓶子均装满了酒,而8千克的瓶子为空.现要求仅用这三个酒瓶将这些酒均分为两个4千克并分别装入5千克和8 ...
- Oracle-3 - :超级适合初学者的入门级笔记--用户权限,set运算符,高级子查询
上一篇的内容在这里第二篇内容, 用户权限:创建用户,创建角色,使用grant 和 revoke 语句赋予和回收权限,创建数据库联接 创建用户:create user xxx identified b ...