轻量级的jquery
话不多说,直接上源代码
一、tool.js
封装一些共用方法,以及相关的浏览器兼容细节,供Base.js调用
//浏览器检测,一旦加载即执行
(function() {
window.sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[]:
(s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[] :
(s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[] :
(s = ua.match(/opera\/.*version\/([\d.]+)/)) ? sys.opera = s[] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[] : ;
];
})();
//取代window.onLoad的页面初始化加载函数
function addDomLoaded(fn) {
var timer;
var isReady = false;
function doReady() {
if (timer) {
clearInterval(timer);
}
//isReady限制该方法仅执行一次
if (isReady) return;
isReady = true;
fn();
}
if (document.addEventListener) { //如果支持W3C,包括IE9+,chrome等
addEvent(document, 'DOMContentLoaded', function() {
fn();
removeEvent(document, 'DOMContentLoaded', arguments.callee);
});
} ) || (sys.firefox && sys.firefox < ) || (sys.webkit && sys.webkit < )) {
//下面两种方法都可以,不过这些低版本的浏览器市面上基本没有了,所以基本用不到
/*timer = setInterval(function () {
if (/loaded|complete/.test(document.readyState)) { //loaded是部分加载,有可能只是DOM加载完毕,complete是完全加载,类似于onload
doReady();
}
}, 1);*/
timer = setInterval(function() {
if (document && document.getElementById && document.getElementsByTagName && document.body) {
doReady();
}
}, );
} ) {
//对于ie来说,检测readyState的方法,在页面具有iframe的时候失效,通过检测元素的scroll事件来实现
timer = setInterval(function() {
try {
document.documentElement.doScroll('left');
doReady();
} catch (e) {};
}, );
}
}
function hasClass(elem, className) {
return (new RegExp('(\\s+|^)' + className + '(\\s+|$)')).test(elem.className);
}
//获取元素的样式,可以是内联样式,也可以是写在外部样式表中的样式
function getStyle(elem, attr) {
if (typeof window.getComputedStyle != 'undefined') { //W3C
return window.getComputedStyle(elem, null) [attr];
} else if (typeof elem.currentStyle != 'undefined') { //IE
return elem.currentStyle[attr];
}
}
//跨浏览器添加link规则
function insertRule(sheet, selectorText, cssText, position) {
if (typeof sheet.insertRule != 'undefined') { //W3C
sheet.insertRule(selectorText + '{' + cssText + '}', position);
} else if (typeof sheet.addRule != 'undefined') { //IE
sheet.addRule(selectorText, cssText, position);
}
}
//跨浏览器移除link规则
function deleteRule(sheet, index) {
if (typeof sheet.deleteRule != 'undefined') { //W3C
sheet.deleteRule(index);
} else if (typeof sheet.removeRule != 'undefined') { //IE
sheet.removeRule(index);
}
}
//跨浏览器获取浏览器视图的宽度和高度
function getViewSize() {
var clientWidth = window.innerWidth;
var clientHeight = window.innerHeight;
if (typeof clientWidth != 'number') {
if (document.compatMode == 'CSS1Compat') {
clientWidth = document.documentElement.clientWidth;
clientHeight = document.documentElement.clientHeight;
} else { //IE6混杂模式下
clientWidth = document.body.clientWidth;
clientHeight = document.body.clientHeight;
}
}
return {
width: clientWidth,
height: clientHeight
}
}
//跨浏览器事件绑定,原事件绑定程序
//DOM0级事件绑定(onclick等),事件处理程序是在元素作用域,this引用的是当前元素;只能绑定一个处理函数
//DOM2级addEventListener(),元素作用域,可绑定多个,顺序执行
//DOM2级IE attacheEvent(),全局window作用域,其中的event也属于window的属性,可绑定多个,逆序执行(貌似这个函数有内存泄漏的问题?)
//综上,跨浏览器事件绑定程序,需要解决的问题包括
//1,支持同一元素的同一事件可以绑定多个处理函数
//2,如果同一元素的同一事件多次注册同一个处理函数,则仅生效一次
//3,函数体内的this指定的是当前正在处理事件的节点
//4,监听函数的执行顺序应当是按照注册绑定的顺序执行
//5,在函数体内,不在使用event=event||window.event,来标准化event对象
function addEvent(elem, type, listener) {
//type = type.replace(/^on/i, '').toLowerCase();
//将处理函数的作用域限制在元素内部,并将event对象传递过去
if (elem.addEventListener) {
elem.addEventListener(type, listener, false);
} else {
//为了避开attachEvent的内存泄漏问题,采用传统的事件绑定
if (!elem.events) {
//创建事件类型的哈希表
elem.events = {};
}
if (!elem.events[type]) {
elem.events[type] = [];
}
//判断同一个函数的事件是否已经被注册
if (!addEvent.contain(listener, elem.events[type])) {
elem.events[type].push(listener);
}
//真实绑定
elem['on' + type] = addEvent.exec;
}
}
//判断事件处理函数是否已经被注册
addEvent.contain = function(listener, listenerArr) {
for (var i in listenerArr) {
if (listenerArr[i] == listener) {
return true;
}
}
return false;
};
//IE下最终绑定的事件处理函数
addEvent.exec = function(event) {
//这里的this就是绑定事件的elem了
var e = event || addEvent.fixEvent(window.event);
var fns = this.events[e.type];
; i < fns.length; i++) {
fns[i].call(this, e);
}
};
addEvent.fixEvent = function(event) {
event.target = event.srcElement;
event.preventDefault = addEvent.fixEvent.preventDefault;
event.stopPropagation = addEvent.fixEvent.stopPropagation;
return event;
};
addEvent.fixEvent.preventDefault = function() {
this.returnValue = false;
};
addEvent.fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
//跨浏览器删除事件
function removeEvent(elem, type, listener) {
if (elem.removeEventListener) {
elem.removeEventListener(type, listener, false);
} else {
var fns = elem.events[type];
; i < fns.length; i++) {
if (fns[i] == listener) {
fns.splice(i, );
}
}
}
}
//获得元素在页面上的水平偏移量
function getElementLeft(elem) {
var pNode = elem.offsetParent;
var left = elem.offsetLeft;
while (pNode) {
left += pNode.offsetLeft;
pNode = pNode.offsetParent;
}
return left;
}
//获得元素在页面上的竖直偏移量
function getElementTop(elem) {
var pNode = elem.offsetParent;
var top = elem.offsetTop;
while (pNode) {
top += pNode.offsetTop;
pNode = pNode.offsetParent;
}
return top;
}
function getScroll(){
return{
top:document.documentElement.scrollTop||document.body.scrollTop,
left:document.documentElement.scrollLeft||document.body.scrollLeft
}
}
//去除字符串开始和结束的空格
function trim(str) {
str = str.replace(/(^\s*)|(\s*$)/g, '');
return str;
}
//和dom查找相关
var query = function(selectorText, pNode) {
var regExps = {
id: /^#([\w_\-]+)/,
className: /^\.([\w_\-]+)/,
tag: /^\w+$/,
attribute: /(\w+)?\[([^=\]]+)(?:=(["'])?([^\]"']+)\3?)?\]/
};
var queryActions = {
id: function(id, pNode) {
var result = [];
result.push(document.getElementById(id));
return result;
},
tag: function(tag, pNode) {
var curPNode = null;
var result = [];
if (pNode != undefined) {
curPNode = pNode;
} else {
curPNode = document;
}
return curPNode.getElementsByTagName(tag);
},
className: function(className, parentNode) {
var pNode = null;
if (parentNode != undefined) {
pNode = parentNode;
} else {
pNode = document;
}
var result = [];
var elems = pNode.getElementsByTagName('*');
; i < elems.length; i++) {
if (hasClass(elems[i], className)) {
result.push(elems[i]);
}
}
return result;
},
attribute: function(tag, key, value, pNode) {
var curPNode = null;
if (pNode) {
curPNode = pNode;
} else {
curPNode = document;
}
var elems = curPNode.getElementsByTagName(tag || '*');
var result = [];
; i >= ; i--) {
var curElem = elems[i];
if (curElem.getAttribute(key)) {
if (!value) {
result.push(curElem);
} else {
if (curElem.getAttribute(key).toLowerCase() === value.toLowerCase()) {
result.push(curElem);
}
}
}
}
return result;
}
};
var fnName, regResult;
var params = [];
if (regResult = selectorText.match(regExps['id'])) {
fnName = 'id';
]);
}
if (regResult = selectorText.match(regExps['tag'])) {
fnName = 'tag',
]);
}
if (regResult = selectorText.match(regExps['className'])) {
fnName = 'className',
]);
}
if (regResult = selectorText.match(regExps['attribute'])) {
fnName = 'attribute',
], regResult[], regResult[]);
}
if (pNode) {
params.push(pNode);
}
var elemResult = queryActions[fnName].apply(null, params);
return elemResult;
};
tool.js
二、Base.js 调用tool.js,效果类似于一个轻量级的jquery
//前台调用
function $(args) {
return new Base(args);
}
function Base(args) {
this.elements = [];
if (typeof args === 'string') {
//说明是css选择符
args = trim(args);
var selectors = [];
) {
selectors = args.split(/\s+/);
} else {
//说明选择符不具有层次关系,为了方便处理,依旧将其转换为数组
selectors.push(args);
}
var pNodes = [];
var childNodes = [];
; i < selectors.length; i++) {
var curSelector = selectors[i];
) {
pNodes.push(document);
}
childNodes = [];
; j < pNodes.length; j++) {
var temps = query(curSelector, pNodes[j]);
; k < temps.length; k++) {
childNodes.push(temps[k]);
}
}
pNodes = childNodes;
}
this.elements = childNodes;
} else if (typeof args === 'object') {
//说明传入的是dom对象,或者this
if (args != undefined) {
] = args;
}
} else if (typeof args === 'function') {
this.ready(args);
}
}
//页面加载函数,类似于jquery的$(document).ready
Base.prototype.ready = function(fn) {
addDomLoaded(fn);
};
//获取某一个节点,返回的是DOM节点对象
Base.prototype.getElem = function(num) {
return this.elements[num];
};
//返回符合条件的首个DOM节点对象
Base.prototype.first = function() {
];
};
//返回符合条件的最后一个DOM节点对象
Base.prototype.last = function() {
];
};
//返回当前节点的上一个同级节点,返回的是Base对象
Base.prototype.next = function() {
; i < this.elements.length; i++) {
this.elements[i] = this.elements[i].nextSibling;
if (this.elements[i] == null) {
throw new Error('找不到下一个同级节点!');
}
) {
this.next();
}
}
return this;
};
Base.prototype.prev = function() {
; i < this.elements.length; i++) {
this.elements[i] = this.elements[i].previousSibling;
if (this.elements[i] == null) {
throw new Error('找不到上一个同级节点!');
}
) {
this.prev();
}
}
return this;
};
//获取某一个节点,返回的是Base对象
Base.prototype.eq = function(num) {
var element = this.elements[num];
this.elements = [];
] = element;
return this;
};
Base.prototype.css = function(attr, value) {
, len = this.elements.length; i < len; i++) {
) {
return getStyle(this.elements[i], attr);
}
this.elements[i].style[attr] = value;
}
return this;
};
//获取长度
Base.prototype.len = function() {
return this.elements.length;
};
Base.prototype.addClass = function(className) {
, len = this.elements.length; i < len; i++) {
if (!hasClass(this.elements[i], className)) {
this.elements[i].className += ' ' + className;
}
}
return this;
};
Base.prototype.removeClass = function(className) {
, len = this.elements.length; i < len; i++) {
if (hasClass(this.elements[i], className)) {
this.elements[i].className = this.elements[i].className.replace(new RegExp('(\\s+|^)' + className + '(\\s+|$)'), ' ');
}
}
return this;
};
//获取或者设置innerHTML
//潜在问题,如果是赋值的话,所有都赋值,如果是取值的话,貌似只是返回首个值
Base.prototype.html = function(htmlText) {
, len = this.elements.length; i < len; i++) {
) {
return this.elements[i].innerHTML;
} else {
this.elements[i].innerHTML = htmlText;
}
}
return this;
};
//添加link或者style的css规则,不常用
Base.prototype.addRule = function(num, selectorText, cssText, position) {
var sheet = document.styleSheets[num];
insertRule(sheet, selectorText, cssText, position);
return this;
};
//删除link或者style的css规则,不常用
Base.prototype.removeRule = function(num, index) {
var sheet = document.styleSheets[num];
deleteRule(sheet, index);
return this;
};
//设置元素显示
Base.prototype.show = function() {
; i >= ; i--) {
this.elements[i].style.display = 'block';
};
return this;
};
//设置元素隐藏
Base.prototype.hide = function() {
; i >= ; i--) {
this.elements[i].style.display = 'none';
};
return this;
};
//检查元素是否处于隐藏状态
Base.prototype.isVisible = function() {
var flag=true;
; i >= ; i--) {
var curElem=this.elements[i];
if(curElem.style.display=='none'||curElem.style.visibility=='hidden'){
flag=false;
}
};
return flag;
};
//设置已知宽度和高度的物体,在整个视图窗口居中
//前提:当前元素position:absolute,父元素是body对象
Base.prototype.screenCenter = function(width, height) {
var viewSize = getViewSize();
var left, top;
, len = this.elements.length; i < len; i++) {
var curElem = this.elements[i];
) {
left = (viewSize.width - width) / ;
top = (viewSize.height - height) / ;
} else {
//没有传入元素的宽和高,就自己获取
left = (viewSize.width - curElem.offsetWidth) / ;
top = (viewSize.height - curElem.offsetHeight) / ;
}
this.elements[i].style.top = top + 'px';
this.elements[i].style.left = left + 'px';
};
return this;
};
//浏览器大小调整事件,可以用任意$()对象调用
Base.prototype.resize = function(fn) {
addEvent(window, 'resize', fn);
//window.onresize = fn;
return this;
};
//设置hover事件
Base.prototype.hover = function(over, out) {
, len = this.elements.length; i < len; i++) {
//this.elements[i].onmouseover = over;
addEvent(this.elements[i], 'mouseover', over);
//this.elements[i].onmouseout = out;
addEvent(this.elements[i], 'mouseout', out);
};
return this;
};
//toggle:点击切换方法,可以传递多个函数作为参数,执行完一轮则从头开始执行
Base.prototype.toggle = function() {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
var args = arguments;
//最终方法,这样的话每一个元素都具有单独的一个count计数器,并且不会产生诸如curElem.count这样的属性污染
(function(curElem, args) {
;
addEvent(curElem, 'click', function() {
args[count++ % args.length].call(this);
});
})(curElem, args);
//方法二:可以解决方法一的问题,但是依旧不行,因为如果选择器选择的是多个元素的话,公用一个count对象,可能会出现问题
// addEvent(curElem, 'click', function() {
// //注意,在函数内定义函数,这是一个闭包
// //闭包可以访问外部函数的变量,但是保存的永远是外部函数变量的最后取值
// //因此这里count的取值才能始终累加
// //不是增添多次click事件,并且每次click事件的执行函数事实上都不相同
// args[count++ % args.length].call(this);
// });
//方法一:这种方式是不行的,执行的永远是第一个函数
//addEvent(curElem,'click',args[count++%args.length]);
}
return this;
};
function tog(curElem, args) {
;
addEvent(curElem, 'click', function() {
args[count++ % args.length].call(this);
});
}
//添加点击事件
Base.prototype.click = function(fn) {
; i < this.elements.length; i++) {
addEvent(this.elements[i], 'click', fn);
}
return this;
};
//插件入口
Base.prototype.extend = function(name, fn) {
Base.prototype[name] = fn;
};
Base.prototype.find = function(selector) {
var pNodes = this.elements;
this.elements = [];
; i < pNodes.length; i++) {
var tmps = query(selector, pNodes[i]);
; j < tmps.length; j++) {
this.elements.push(tmps[j]);
}
}
return this;
};
//调用方法$().animate(styles,speed,callback,easing);
//styles:必选,如{width:100px}目前支持,top,left,width,height,opacity
//speed 可选,默认动画的速度,每多长时间执行一次,默认为30ms
//step 每一次动画执行步长,默认为10像素
//callback:动画执行之后的回调
//easing:动画速度的缓动函数,默认匀速
Base.prototype.animate = function(styles, callback, speed, step, easing) {
function setValue(curElem, attr, nowValue) {
curElem.style[attr] = (attr == ) : nowValue + 'px');
if (attr == 'opacity') {
curElem.style.filter = 'opacity(alpha=' + nowValue + ')';
}
document.getElementById('content').innerHTML += attr + ':' + getStyle(curElem, attr) + '</br>';
}
var finalValue, startValue, nowValue;
;
;
; i < this.elements.length; i++) {
var curElem = this.elements[i];
if (curElem.timer) {
clearInterval(curElem.timer);
}
var temp = [];
for (var attr in styles) {
//每一组都有startValue,finalValue
startValue = (attr == : parseInt(getStyle(curElem, attr)));
finalValue = (attr == : parseInt(styles[attr]));
step = (startValue < finalValue ? step : -step);
temp.push([attr, startValue, step, finalValue]);
//将各项值都复原,第二次动画的时候貌似不能复原了。。。
setValue(curElem, attr, startValue);
}
curElem.timer = setInterval(function() {
var flag = true; //判断是否所有的动画都已经结束,除了初始化的这次,如果为true,代表所有动画都结束
; i < temp.length; i++) {
attr = temp[i][];
nowValue = temp[i][];
step = temp[i][];
finalValue = temp[i][];
&& finalValue <= nowValue + step) || (step < && finalValue >= nowValue + step)) {
//应当所有的动画都执行完毕,才能清除掉计时器
// clearInterval(curElem.timer);
nowValue = finalValue;
setValue(curElem, attr, finalValue);
} else {
nowValue += step;
setValue(curElem, attr, nowValue);
}
temp[i][] = nowValue;
if (nowValue != finalValue) {
flag = false;
}
};
if (flag) {
clearInterval(curElem.timer);
if (callback) {
callback.call(curElem);
}
}
}, speed);
};
return this;
};
Base.prototype.fadeIn = function() {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
$(curElem).animate({
});
};
return this;
};
Base.prototype.fadeOut = function() {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
$(curElem).animate({
});
};
return this;
};
Base.prototype.slideUp = function() {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
if (getStyle(curElem, 'display') != 'none') {
var startHeight = getStyle(curElem, 'height');
$(curElem).animate({
}, function() {
$(this).hide().css('height', startHeight);
//console.log(getStyle(this,'height'));
});
}
};
return this;
};
Base.prototype.slideDown = function() {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
//console.log(getStyle(curElem,'display'));
if (getStyle(curElem, 'display') == 'none') {
var startHeight = getStyle(curElem, 'height');
$(curElem).css('height', '0px').show().animate({
'height': startHeight
});
}
};
return this;
};
//设置绑定事件方法
Base.prototype.bind = function(type, fn) {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
addEvent(curElem, type, fn);
};
return this;
};
//设置focus事件
Base.prototype.focus = function(fn) {
this.bind('focus', fn);
};
//设置blur事件
Base.prototype.blur = function(fn) {
this.bind('blur', fn);
};
//获得或者设置表单元素的value
Base.prototype.val = function(curValue) {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
if (curValue) {
curElem.value = curValue;
} else {
return curElem.value;
}
}
return this;
};
Base.prototype.attr = function(attr, value) {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
if (value == undefined) {
return curElem.getAttribute(attr);
} else {
curElem.setAttribute(attr, value);
}
}
return this;
};
//在之前插入元素
Base.prototype.insertBefore = function(elem) {
, len = this.elements.length; i < len; i++) {
var curElem = this.elements[i];
var pNode = elem.parentNode;
pNode.insertBefore(curElem, elem);
}
return this;
};
Base.prototype.insertAfter = function(elem) {
, len = this.elements.length; i < len; i++) {
var curElem = this.elements[i];
var pNode = elem.parentNode;
if (pNode.lastChild === elem) {
pNode.appendChild(curElem);
} else {
pNode.insertBefore(curElem, elem.nextSibling);
}
}
return this;
};
//获取元素的高度
Base.prototype.top = function() {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
return getElementTop(curElem);
};
};
Base.prototype.left = function() {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
return getElementLeft(curElem);
};
};
Base.prototype.width = function() {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
return curElem.offsetWidth;
};
};
Base.prototype.height = function() {
; i < this.elements.length; i++) {
var curElem = this.elements[i];
return curElem.offsetHeight;
};
};
base.js
三、Base_drag.js基于Base.js的拖拽插件
//将拖拽封装为库
$().extend('drag', function() {
var tags=arguments;
for (var i = 0; i < this.elements.length; i++) {
var curElem = this.elements[i];
addEvent(curElem, 'mousedown', function(e) {
var diffX = e.clientX - getElementLeft(this);
var diffY = e.clientY - getElementTop(this);
var that = this;
//限定只有点击部分区域才可以拖动
var flag = false;
for (var j = 0; j < tags.length; j++) {
if (e.target.tagName.toLowerCase() == tags[j].toLowerCase()) {
flag = true;
break;
}
}
function move(e) {
var left = e.clientX - diffX;
var top = e.clientY - diffY;
//如果超出了当前视图边缘则禁止脱宅
if (left < 0) {
left = 0;
}
if (top < 0) {
top = 0;
}
var viewSize = getViewSize();
if (left > viewSize.width - that.offsetWidth) {
left = viewSize.width - that.offsetWidth;
}
if (top > viewSize.height - that.offsetHeight) {
top = viewSize.height - that.offsetHeight;
}
that.style.left = left + 'px';
that.style.top = top + 'px';
}
function up(e) {
removeEvent(document, 'mousemove', move);
removeEvent(document, 'mouseup', up);
}
if (flag) {
addEvent(document, 'mousemove', move);
addEvent(document, 'mouseup', up);
}
});
}
});
Base_drag.js
四、Base_screenlock.js 基于Base.js的锁屏插件
//javascript锁屏插件
$().extend('lock', function() {
var viewSize = getViewSize();
for (var i = this.elements.length - 1; i >= 0; i--) {
var curElem = this.elements[i];
curElem.style.width = viewSize.width + 'px';
curElem.style.height = viewSize.height + 'px';
curElem.style.display = 'block';
};
document.documentElement.style.overflow = 'hidden';
return this;
});
$().extend('unlock', function() {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style.display = 'none';
};
document.documentElement.style.overflow = 'auto';
return this;
});
Base_screenlock.js
轻量级的jquery的更多相关文章
- sDashboard:简单的,轻量级的 jQuery 仪表板插件
sDashboard 是一个轻量的仪表板 jQuery 插件,转换一个对象数组到仪表板.数组中的每个对象将被呈现为一个仪表板组件,可以通过左右拖 动重新排列. sDashboards 内置渲染 Da ...
- 轻量级实用JQuery表单验证插件:validateForm5
表单验证是Web项目一个必不可少的环节,而且是一项重复的劳动,于是小菜封装了一款简单的表单验证插件,名字叫:validateForm5. validateForm5插件基于Jquery,并向HTML5 ...
- webui-popover 一个轻量级的jquery弹出层插件
该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css js 文件 <link rel="s ...
- jQuery国际化插件 jQuery.i18n.properties 【轻量级】
jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第 ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
- 迷你版jQuery——zepto核心源码分析
前言 zepto号称迷你版jQuery,并且成为移动端dom操作库的首选 事实上zepto很多时候只是借用了jQuery的名气,保持了与其基本一致的API,其内部实现早已面目全非! 艾伦分析了jQue ...
- 40个让你的网站屌到爆的jQuery插件
一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...
- 最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
随机推荐
- discuz怎么根据连接知道调用的是什么模板页面
其实不怎么难,基本都可以看出discuz是怎么样调用模板页面的 这个是论坛的帖子的列表页,看到url就可以看出是forum目录下的forumdisplay这个模板,forumdisplay.html这 ...
- Javascript 笔记与总结(1-5)闭包
[例1] <script> function t1(){ var age = 20; function t2(){ alert(age); } return t2; } var tmp = ...
- 设计模式学习系列9 外观模式Facade
1.概述 自己卖了一辆越野自行车,但毕竟不是自己定制的,买回来之后可能需要更改一下脚蹬,座皮,里程计数器或者刹车系统,假如将自行车看做一个整体系统,对我们而言使用的是自行车,然后我们对自己车构件的修改 ...
- BCP 命令
bcp 实用工具 我们可以通过如下BCP命令(注意不能有回车)将其导出为XML文件,并保存: BCP "SELECT TOP 30 [bom_no],[LEVEL] FROM [sqladm ...
- href="#"和javasrcript:void(0)的区别
当我们需要一个空链接时,通常有两种方法: <a href="#">这个一个空链接</a> 和 <a href="javascript:voi ...
- C#委托初探
委托是一种定义方法签名的类型,可以与具有兼容签名的任何方法关联.您可以通过委托调用其中已添加的方法列表.委托用于将方法作为参数传递给其他方法.事件处理程序就是通过委托调用的方法.您可以创建一个自定义方 ...
- mongodb 常用命令
转自http://www.blogjava.net/waterjava/archive/2011/03/23/346819.html 命令行 --help 显示命令行参数 --nodb 不连接数据库方 ...
- idea控制台乱码
打开File->Settings->Editer->File Encoding,将IDE Encoding 和 Project Encoding 都改为UTF-8
- 【Android开发学习笔记】【第三课】Activity和Intent
首先来看一个Activity当中启动另一个Activity,直接上代码说吧: (1)首先要多个Activity,那么首先在res-layout下新建一个 Other.xml,用来充当第二个Activi ...
- 汇编查看StackFrame栈帧
INCLUDE Irvine32.inc myProc PROTO, x:DWORD, y:DWORD .data .code main proc mov eax,0EAEAEAEAh mov ebx ...