模拟jQuery的一些功能
//getStyle
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
//getByClass
function getByClass(oParent,sClass){
var arr = [];
var aEle = oParent.getElementsByTagName("*");
for(var i = 0;i < aEle.length;i ++){
if(aEle[i].className == sClass){
arr.push(aEle[i])
}
}
return arr;
}
//myAddEvent
function myAddEvent(obj,sEv,fn){
//改造后return false 能同时具有阻止冒泡和默认事件的作用
if(obj.attachEvent){
obj.attachEvent("on"+sEv,function(){
if(false == fn.call(obj)){
event.cancelBubble = true;
return false;
}
});
}
else{
obj.addEventListener(sEv,function(ev){
if(false == fn.call(obj)){
ev.cancelBubble = true;
ev.preventDefault();
}
},false);
}
}
//元素获取
function jQuery(vArg){
this.elements = [];
switch(typeof vArg){//typeof
case "function":
myAddEvent(window,"load",vArg);
break;
case "string":
switch(vArg.charAt(0)){
case "#":
var obj = document.getElementById(vArg.substring(1));
this.elements.push(obj);
break;
case ".":
this.elements = getByClass(document,vArg.substring(1));
break;
default:
this.elements = document.getElementsByTagName(vArg);
}
break;
case "object":
this.elements.push(vArg);
}
}
//$拥有jQuery功能
function $(vArg){
return new jQuery(vArg);
}
//click()
jQuery.prototype.click = function(fn){
for(var i = 0;i < this.elements.length;i ++){
myAddEvent(this.elements[i],'click',fn);
}
return this;//支持链式操作
};
//css()
jQuery.prototype.css = function(attr,value){
if(arguments.length == 2){
for(var i = 0;i < this.elements.length;i ++){
this.elements[i].style[attr] = value;
}
}
else{
if(typeof attr == "string"){//typeof
return getStyle(this.elements[0],attr);//获取时不能链式操作,因为到这里就返回了。带单位
}
else{
for(var i = 0;i < this.elements.length;i ++){
var k = "";
for(k in attr){
this.elements[i].style[k] = attr[k];
}
}
}
}
return this;
};
//toggle() >> 0>fn1; 1>fn2; 2>fn3
jQuery.prototype.toggle = function(){
var _arguments = arguments;
for(var i = 0;i < this.elements.length;i ++){
addToggle(this.elements[i]);
}
function addToggle(obj){
var count = 0;
myAddEvent(obj,"click",function(){
_arguments[count++ % _arguments.length].call(obj);
});
}
return this;
};
//attr()
jQuery.prototype.attr = function(name,value){
if(arguments.length == 2){
for(var i = 0;i < this.elements.length;i ++){
this.elements[i][name] = value;
}
}
else{
return this.elements[0][name];
}
return this;
};
//eq()
jQuery.prototype.eq = function(num){
return $(this.elements[num]);//普通的dom对象变成jQuery对象。单一dom对象的处理方式
};
//find()
jQuery.prototype.find = function(str){
var aResult = [];
for(var i = 0;i < this.elements.length;i ++){
switch(str.charAt(0)){
case ".":
var aEle = getByClass(this.elements[i],str.substring(1));
aResult = aResult.concat(aEle);
default:
var aEle = this.elements[i].getElementsByTagName(str);
appendArr(aResult,aEle);
}
}
var newJquery = $();
newJquery.elements = aResult;//数组dom对象的处理方式
return newJquery;
}; function appendArr(arr1,arr2){
for(var i = 0;i < arr2.length;i ++){
arr1.push(arr2[i]);
}
}
//index()
jQuery.prototype.index = function(){
return getIndex(this.elements[0]);
};
//getIndex()
function getIndex(obj){
var aBrother = obj.parentNode.children;
for(var i = 0;i < aBrother.length;i ++){
if(aBrother[i] == obj){
return i;
}
}
}
//bind()
jQuery.prototype.bind = function(sEv,fn){
for(var i = 0;i < this.elements.length; i++){
myAddEvent(this.elements[i],sEv,fn);
}
};
//extend()
jQuery.prototype.extend = function(name,fn){
jQuery.prototype[name] = fn;
};
//size()
$().extend("size",function(){
return this.elements.length;
});
//animate()插件
$().extend("animate",function(json){
for(var i = 0;i < this.elements.length;i ++){
startMove(this.elements[i],json);
}
function startMove(obj,json,fnEnd){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var oStop = true;
for( var attr in json){
var cur = 0;
if(attr == "opacity"){
cur = Math.round( parseFloat( getStyle(obj,attr) ) * 100 );
}
else{
cur = parseInt( getStyle(obj,attr) );
} var speed = (json[attr] - cur) / 7;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(cur != json[attr]){
oStop = false;
}
if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
obj.style.opacity = (cur + speed) / 100;
}
else{
obj.style[attr] = cur + speed + "px";
}
}
if(oStop){
clearInterval(obj.timer);
fnEnd&&fnEnd();
}
},30);
}
});
//drag()插件
$().extend('drag',function(){
for(var i = 0;i < this.elements.length;i++){
drag(this.elements[i]);
}
function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
//这里位置的计算一定是mousedown的时候
var oEvent = ev || event;
disX = oEvent.clientX - parseInt( getStyle(obj,"left") );
disY = oEvent.clientY - parseInt( getStyle(obj,"top") ); if(obj.setCapture){
obj.onmousemove = mouseMove;
obj.onmouseup = mouseUp;
obj.setCapture();
}
else{
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
}
function mouseMove(ev){
var oEvent = ev || event; obj.style.top = oEvent.clientY - disY + "px";
obj.style.left = oEvent.clientX - disX + "px";
}
function mouseUp(){
this.onmousemove = this.onmouseup = null;
if(obj.releaseCapture){
obj.releaseCapture();
}
}
return false;
};
}
});
模拟jQuery的一些功能的更多相关文章
- angularJs中怎么模拟jQuery中的this?
最近自己正在学习angularJs,在学到ng-click时,由于想获取当前点击元素的自身,开始想到了用$index来获取当前元素的索引同样能实现我想要的效果,但是在有些特殊的情况下,使用$index ...
- 模拟select控件功能
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 在ASP.NET Core使用Middleware模拟Custom Error Page功能
一.使用场景 在传统的ASP.NET MVC中,我们可以使用HandleErrorAttribute特性来具体指定如何处理Action抛出的异常.只要某个Action设置了HandleErrorAtt ...
- 模拟jQuery简单封装ajax
/*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...
- 模拟jQuery库
用js模拟jQuery方法,体会封装思想 <!DOCTYPE html><html><head><meta charset="UTF-8" ...
- ajx技术解析以及模拟jQuery封装
1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- 基于jQuery带备忘录功能的日期选择器
今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...
- Java基础知识强化之IO流笔记53:IO流练习之 自定义类模拟BufferedReader的readLine()功能案例
1. 用Reader模拟BufferedReader的readLine()功能: readLine():一次读取一行,根据换行符判断是否结束,只返回内容,不返回换行符 2. 代码实现和思路分析: ...
- 自己使用Jquery封装各种功能分享
自己使用Jquery封装各种功能分享: 左右滚动图片 瀑布流 流动显示列表 广告切换 头像切换And广告切换 获取搜索引擎的来源关键字 上面列表中展示的功能都是使用jquery进行封装实现的,希望大家 ...
随机推荐
- LinkedList 基本示例及源码解析
目录 一.JavaDoc 简介 二.LinkedList 继承接口和实现类介绍 三.LinkedList 基本方法介绍 四.LinkedList 基本方法使用 五.LinkedList 内部结构以及基 ...
- Linux NAT网络连接权威指南
[1]准备工作,写在前面 1.1)检查服务(cmd>>services.msc,我用的是VM) 1.2)确保Vmnet8 连接处于启动状态 + 获取ipv4(ipv6)地址 (在网络连接不 ...
- VC++ 非托管代码 & 托管代码
#pragma managed #pragma unmanaged 看了好多好多非托管代码和托管代码之间相互调用,感觉都没有说在重点上,到底怎么用才是关键,理论的东西我们到微软官网上就可以找到,毕竟这 ...
- Unix环境高级编程——守护进程记录总结(从基础到实现)
一.概念及其特征 守护进程是系统中生存期较长的一种进程,常常在系统引导装入时启动,在系统关闭时终止,没有控制终端,在后台运行.守护进程脱离于终端是为了避免进程在执行过程中的信息在任何终端上显示并且进程 ...
- Runnable 和 Callable的区别
Runnable 与 Callable的区别: (1)Callable规定的方法是call(),Runnable规定的方法是run(). (2)Callable的任务执行后可返回值,而Runnable ...
- 九度OJ 1150:Counterfeit Dollar(假美元) (分析、检验)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:485 解决:215 题目描述: Sally Jones has a dozen Voyageur silver dollars. Howev ...
- 我的Android进阶之旅------>使用ThumbnailUtils类获取视频的缩略图
今天看了一段代码,是关于获取视频的缩略图的,让我认识了一个ThumbnailUtils类,代码如下. Bitmap bitmap = ThumbnailUtils.createVideoThumbna ...
- 腾讯云上运行java程序过程
1: 购买服务器(腾讯云,阿里云等) 2:安装centos操作系统: 3:安装jdkhttp://www.cnblogs.com/Amos-Turing/p/7403696.html 4:安装数据库( ...
- [IR课程笔记]Query Refinement and Relevance Feedback
相关反馈的两种类型: “真实”的相关反馈: 1. 系统返回结果 2. 用户提供一些反馈 3. 系统根据这些反馈,返回一些不同的,更好的结果 “假定”的相关反馈 1. 系统得到结果但是并不返回结果 2. ...
- Java for LeetCode 100 Same Tree
Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...