`
jilong-liang
  • 浏览: 481261 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类

[转]仿jQuery封装Javascript

阅读更多
//前台调用
var $ = function (args) {
	return new Base(args);
}

//基础库
function Base(args) {
	//创建一个数组,来保存获取的节点和节点数组
	this.elements = [];
	
	if (typeof args == 'string') {
		//css模拟
		if (args.indexOf(' ') != -1) {
			var elements = args.split(' ');			//把节点拆开分别保存到数组里
			var childElements = [];					//存放临时节点对象的数组,解决被覆盖的问题
			var node = [];								//用来存放父节点用的
			for (var i = 0; i < elements.length; i ++) {
				if (node.length == 0) node.push(document);		//如果默认没有父节点,就把document放入
				switch (elements[i].charAt(0)) {
					case '#' :
						childElements = [];				//清理掉临时节点,以便父节点失效,子节点有效
						childElements.push(this.getId(elements[i].substring(1)));
						node = childElements;		//保存父节点,因为childElements要清理,所以需要创建node数组
						break;
					case '.' : 
						childElements = [];
						for (var j = 0; j < node.length; j ++) {
							var temps = this.getClass(elements[i].substring(1), node[j]);
							for (var k = 0; k < temps.length; k ++) {
								childElements.push(temps[k]);
							}
						}
						node = childElements;
						break;
					default : 
						childElements = [];
						for (var j = 0; j < node.length; j ++) {
							var temps = this.getTagName(elements[i], node[j]);
							for (var k = 0; k < temps.length; k ++) {
								childElements.push(temps[k]);
							}
						}
						node = childElements;
				}
			}
			this.elements = childElements;
		} else {
			//find模拟
			switch (args.charAt(0)) {
				case '#' :
					this.elements.push(this.getId(args.substring(1)));
					break;
				case '.' : 
					this.elements = this.getClass(args.substring(1));
					break;
				default : 
					this.elements = this.getTagName(args);
			}
		}
	} else if (typeof args == 'object') {
		if (args != undefined) {    //_this是一个对象,undefined也是一个对象,区别与typeof返回的带单引号的'undefined'
			this.elements[0] = args;
		}
	} else if (typeof args == 'function') {
		this.ready(args);
	}
}

//addDomLoaded
Base.prototype.ready = function (fn) {
	addDomLoaded(fn);
};

//获取ID节点
Base.prototype.getId = function (id) {
	return document.getElementById(id)
};

//获取元素节点数组
Base.prototype.getTagName = function (tag, parentNode) {
	var node = null;
	var temps = [];
	if (parentNode != undefined) {
		node = parentNode;
	} else {
		node = document;
	}
	var tags = node.getElementsByTagName(tag);
	for (var i = 0; i < tags.length; i ++) {
		temps.push(tags[i]);
	}
	return temps;
};

//获取CLASS节点数组
Base.prototype.getClass = function (className, parentNode) {
	var node = null;
	var temps = [];
	if (parentNode != undefined) {
		node = parentNode;
	} else {
		node = document;
	}
	var all = node.getElementsByTagName('*');
	for (var i = 0; i < all.length; i ++) {
		if (all[i].className == className) {
			temps.push(all[i]);
		}
	}
	return temps;
}

//设置CSS选择器子节点
Base.prototype.find = function (str) {
	var childElements = [];
	for (var i = 0; i < this.elements.length; i ++) {
		switch (str.charAt(0)) {
			case '#' :
				childElements.push(this.getId(str.substring(1)));
				break;
			case '.' : 
				var temps = this.getClass(str.substring(1), this.elements[i]);
				for (var j = 0; j < temps.length; j ++) {
					childElements.push(temps[j]);
				}
				break;
			default : 
				var temps = this.getTagName(str, this.elements[i]);
				for (var j = 0; j < temps.length; j ++) {
					childElements.push(temps[j]);
				}
		}
	}
	this.elements = childElements;
	return this;
}

//获取某一个节点,并返回这个节点对象
Base.prototype.ge = function (num) {	
	return this.elements[num];
};

//获取首个节点,并返回这个节点对象
Base.prototype.first = function () {
	return this.elements[0];
};

//获取末个节点,并返回这个节点对象
Base.prototype.last = function () {
	return this.elements[this.elements.length - 1];
};

//获取某一个节点,并且Base对象
Base.prototype.eq = function (num) {
	var element = this.elements[num];
	this.elements = [];
	this.elements[0] = element;
	return this;
};

//获取当前节点的下一个元素节点
Base.prototype.next = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i] = this.elements[i].nextSibling;
		if (this.elements[i] == null) throw new Error('找不到下一个同级元素节点!');
		if (this.elements[i].nodeType == 3) this.next();
	}
	return this;
};

//获取当前节点的上一个元素节点
Base.prototype.prev = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i] = this.elements[i].previousSibling;
		if (this.elements[i] == null) throw new Error('找不到上一个同级元素节点!');
		if (this.elements[i].nodeType == 3) this.prev();
	}
	return this;
};

//设置CSS
Base.prototype.css = function (attr, value) {
	for (var i = 0; i < this.elements.length; i ++) {
		if (arguments.length == 1) {
			return getStyle(this.elements[i], attr);
		}
		this.elements[i].style[attr] = value;
	}
	return this;
}

//添加Class
Base.prototype.addClass = function (className) {
	for (var i = 0; i < this.elements.length; i ++) {
		if (!hasClass(this.elements[i], className)) {
			this.elements[i].className += ' ' + className;
		}
	}
	return this;
}

//移除Class
Base.prototype.removeClass = function (className) {
	for (var i = 0; i < this.elements.length; i ++) {
		if (hasClass(this.elements[i], className)) {
			this.elements[i].className = this.elements[i].className.replace(new RegExp('(\\s|^)' +className +'(\\s|$)'), ' ');
		}
	}
	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;
}

//设置innerHTML
Base.prototype.html = function (str) {
	for (var i = 0; i < this.elements.length; i ++) {
		if (arguments.length == 0) {
			return this.elements[i].innerHTML;
		}
		this.elements[i].innerHTML = str;
	}
	return this;
}

//设置鼠标移入移出方法
Base.prototype.hover = function (over, out) {
	for (var i = 0; i < this.elements.length; i ++) {
		addEvent(this.elements[i], 'mouseover', over);
		addEvent(this.elements[i], 'mouseout', out);
	}
	return this;
};

//设置点击切换方法
Base.prototype.toggle = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		(function (element, args) {
			var count = 0;
			addEvent(element, 'click', function () {
				args[count++ % args.length].call(this);
			});
		})(this.elements[i], arguments);
	}
	return this;
};

//设置显示
Base.prototype.show = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.display = 'block';
	}
	return this;
};

//设置隐藏
Base.prototype.hide = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.display = 'none';
	}
	return this;
};

//设置物体居中
Base.prototype.center = function (width, height) {
	var top = (getInner().height - 250) / 2;
	var left = (getInner().width - 350) / 2;
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.top = top + 'px';
		this.elements[i].style.left = left + 'px';
	}
	return this;
};

//锁屏功能
Base.prototype.lock = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.width = getInner().width + 'px';
		this.elements[i].style.height = getInner().height + 'px';
		this.elements[i].style.display = 'block';
		document.documentElement.style.overflow = 'hidden';
		addEvent(window, 'scroll', scrollTop);
	}
	return this;
};

Base.prototype.unlock = function () {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].style.display = 'none';
		document.documentElement.style.overflow = 'auto';
		removeEvent(window, 'scroll', scrollTop);
	}
	return this;
};

//触发点击事件
Base.prototype.click = function (fn) {
	for (var i = 0; i < this.elements.length; i ++) {
		this.elements[i].onclick = fn;
	}
	return this;
};

//触发浏览器窗口事件
Base.prototype.resize = function (fn) {
	for (var i = 0; i < this.elements.length; i ++) {
		var element = this.elements[i];
		addEvent(window, 'resize', function () {
			fn();
			if (element.offsetLeft > getInner().width - element.offsetWidth) {
				element.style.left = getInner().width - element.offsetWidth + 'px';
			}
			if (element.offsetTop > getInner().height - element.offsetHeight) {
				element.style.top = getInner().height - element.offsetHeight + 'px';
			}
		});
	}
	return this;
};

//设置动画
Base.prototype.animate = function (obj) {
	for (var i = 0; i < this.elements.length; i ++) {
		var element = this.elements[i];
		var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' : 
					   obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' : 
					   obj['attr'] == 'o' ? 'opacity' : obj['attr'] != undefined ? obj['attr'] : 'left';

		
		var start = obj['start'] != undefined ? obj['start'] : 
						attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 : 
												   parseInt(getStyle(element, attr));
		
		var t = obj['t'] != undefined ? obj['t'] : 10;												//可选,默认10毫秒执行一次
		var step = obj['step'] != undefined ? obj['step'] : 20;								//可选,每次运行10像素
		
		var alter = obj['alter'];
		var target = obj['target'];
		var mul = obj['mul'];
		
		var speed = obj['speed'] != undefined ? obj['speed'] : 6;							//可选,默认缓冲速度为6
		var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';		//可选,0表示匀速,1表示缓冲,默认缓冲
		
		
		if (alter != undefined && target == undefined) {
			target = alter + start;
		} else if (alter == undefined && target == undefined && mul == undefined) {
			throw new Error('alter增量或target目标量必须传一个!');
		}
		
		
		
		if (start > target) step = -step;
		
		if (attr == 'opacity') {
			element.style.opacity = parseInt(start) / 100;
			element.style.filter = 'alpha(opacity=' + parseInt(start) +')';
		} else {
			//element.style[attr] = start + 'px';
		}
		
		
		if (mul == undefined) {
			mul = {};
			mul[attr] = target;
		} 
		

		clearInterval(element.timer);
		element.timer = setInterval(function () {
		
			/*
				问题1:多个动画执行了多个列队动画,我们要求不管多少个动画只执行一个列队动画
				问题2:多个动画数值差别太大,导致动画无法执行到目标值,原因是定时器提前清理掉了
				
				解决1:不管多少个动画,只提供一次列队动画的机会
				解决2:多个动画按最后一个分动画执行完毕后再清理即可
			*/
			
			//创建一个布尔值,这个值可以了解多个动画是否全部执行完毕
			var flag = true; //表示都执行完毕了
			
			
			for (var i in mul) {
				attr = i == 'x' ? 'left' : i == 'y' ? 'top' : i == 'w' ? 'width' : i == 'h' ? 'height' : i == 'o' ? 'opacity' : i != undefined ? i : 'left';
				target = mul[i];
					

				if (type == 'buffer') {
					step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
														 (target - parseInt(getStyle(element, attr))) / speed;
					step = step > 0 ? Math.ceil(step) : Math.floor(step);
				}
				
				
				
				if (attr == 'opacity') {
					if (step == 0) {
						setOpacity();
					} else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
						setOpacity();
					} else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
						setOpacity();
					} else {
						var temp = parseFloat(getStyle(element, attr)) * 100;
						element.style.opacity = parseInt(temp + step) / 100;
						element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')';
					}
					
					if (parseInt(target) != parseInt(parseFloat(getStyle(element, attr)) * 100)) flag = false;

				} else {
					if (step == 0) {
						setTarget();
					} else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
						setTarget();
					} else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
						setTarget();
					} else {
						element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px';
					}
					
					if (parseInt(target) != parseInt(getStyle(element, attr))) flag = false;
				}
				
				//document.getElementById('test').innerHTML += i + '--' + parseInt(target) + '--' + parseInt(getStyle(element, attr)) + '--' + flag + '<br />';
				
			}
			
			if (flag) {
				clearInterval(element.timer);
				if (obj.fn != undefined) obj.fn();
			}
				
		}, t);
		
		function setTarget() {
			element.style[attr] = target + 'px';
		}
		
		function setOpacity() {
			element.style.opacity = parseInt(target) / 100;
			element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
		}
	}
	return this;
};

//插件入口
Base.prototype.extend = function (name, fn) {
	Base.prototype[name] = fn;
};

















 

//浏览器检测
(function () {
	window.sys = {};
	var ua = navigator.userAgent.toLowerCase();	
	var s;		
	(s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
	(s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
	(s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] : 
	(s = ua.match(/opera\/.*version\/([\d.]+)/)) ? sys.opera = s[1] : 
	(s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;
	
	if (/webkit/.test(ua)) sys.webkit = ua.match(/webkit\/([\d.]+)/)[1];
})();

//DOM加载
function addDomLoaded(fn) {
	var isReady = false;
	var timer = null;
	function doReady() {
		if (timer) clearInterval(timer);
		if (isReady) return;
		isReady = true;
		fn();
	}
	
	if ((sys.opera && sys.opera < 9) || (sys.firefox && sys.firefox < 3) || (sys.webkit && sys.webkit < 525)) {
		//无论采用哪种,基本上用不着了
		/*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();
			}
		}, 1);
	} else if (document.addEventListener) {//W3C
		addEvent(document, 'DOMContentLoaded', function () {
			fn();
			removeEvent(document, 'DOMContentLoaded', arguments.callee);
		});
	} else if (sys.ie && sys.ie < 9){
		var timer = null;
		timer = setInterval(function () {
			try {
				document.documentElement.doScroll('left');
				doReady();
			} catch (e) {};
		}, 1);
	}
}

//跨浏览器添加事件绑定
function addEvent(obj, type, fn) {
	if (typeof obj.addEventListener != 'undefined') {
		obj.addEventListener(type, fn, false);
	} else {
		//创建一个存放事件的哈希表(散列表)
		if (!obj.events) obj.events = {};
		//第一次执行时执行
		if (!obj.events[type]) {	
			//创建一个存放事件处理函数的数组
			obj.events[type] = [];
			//把第一次的事件处理函数先储存到第一个位置上
			if (obj['on' + type]) obj.events[type][0] = fn;
		} else {
			//同一个注册函数进行屏蔽,不添加到计数器中
			if (addEvent.equal(obj.events[type], fn)) return false;
		}
		//从第二次开始我们用事件计数器来存储
		obj.events[type][addEvent.ID++] = fn;
		//执行事件处理函数
		obj['on' + type] = addEvent.exec;
	}
}

//为每个事件分配一个计数器
addEvent.ID = 1;

//执行事件处理函数
addEvent.exec = function (event) {
	var e = event || addEvent.fixEvent(window.event);
	var es = this.events[e.type];
	for (var i in es) {
		es[i].call(this, e);
	}
};

//同一个注册函数进行屏蔽
addEvent.equal = function (es, fn) {
	for (var i in es) {
		if (es[i] == fn) return true;
	}
	return false;
}

//把IE常用的Event对象配对到W3C中去
addEvent.fixEvent = function (event) {
	event.preventDefault = addEvent.fixEvent.preventDefault;
	event.stopPropagation = addEvent.fixEvent.stopPropagation;
	event.target = event.srcElement;
	return event;
};

//IE阻止默认行为
addEvent.fixEvent.preventDefault = function () {
	this.returnValue = false;
};

//IE取消冒泡
addEvent.fixEvent.stopPropagation = function () {
	this.cancelBubble = true;
};


//跨浏览器删除事件
function removeEvent(obj, type, fn) {
	if (typeof obj.removeEventListener != 'undefined') {
		obj.removeEventListener(type, fn, false);
	} else {
		if (obj.events) {
			for (var i in obj.events[type]) {
				if (obj.events[type][i] == fn) {
					delete obj.events[type][i];
				}
			}
		}
	}
}


//跨浏览器获取视口大小
function getInner() {
	if (typeof window.innerWidth != 'undefined') {
		return {
			width : window.innerWidth,
			height : window.innerHeight
		}
	} else {
		return {
			width : document.documentElement.clientWidth,
			height : document.documentElement.clientHeight
		}
	}
}

//跨浏览器获取滚动条位置
function getScroll() {
	return {
		top : document.documentElement.scrollTop || document.body.scrollTop,
		left : document.documentElement.scrollLeft || document.body.scrollLeft
	}
}


//跨浏览器获取Style
function getStyle(element, attr) {
	var value;
	if (typeof window.getComputedStyle != 'undefined') {//W3C
		value = window.getComputedStyle(element, null)[attr];
	} else if (typeof element.currentStyle != 'undeinfed') {//IE
		value = element.currentStyle[attr];
	}
	return value;
}


//判断class是否存在
function hasClass(element, className) {
	return element.className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'));
}


//跨浏览器添加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 trim(str) {
	return str.replace(/(^\s*)|(\s*$)/g, '');
}

//滚动条清零
function scrollTop() {
	document.documentElement.scrollTop = 0;
	document.body.scrollTop = 0;
}

 

$().extend('drag', function () {
	var tags = arguments;
	for (var i = 0; i < this.elements.length; i ++) {
		addEvent(this.elements[i], 'mousedown', function (e) {
			if (trim(this.innerHTML).length == 0) e.preventDefault();
			var _this = this;
			var diffX = e.clientX - _this.offsetLeft;
			var diffY = e.clientY - _this.offsetTop;
			
			//自定义拖拽区域
			var flag = false;
			
			for (var i = 0; i < tags.length; i ++) {
				if (e.target == tags[i]) {
					flag = true;					//只要有一个是true,就立刻返回
					break;
				}
			}
			
			if (flag) {
				addEvent(document, 'mousemove', move);
				addEvent(document, 'mouseup', up);
			} else {
				removeEvent(document, 'mousemove', move);
				removeEvent(document, 'mouseup', up);
			}
			
			function move(e) {
				var left = e.clientX - diffX;
				var top = e.clientY - diffY;
				
				if (left < 0) {
					left = 0;
				} else if (left > getInner().width - _this.offsetWidth) {
					left = getInner().width - _this.offsetWidth;
				}
				
				if (top < 0) {
					top = 0;
				} else if (top > getInner().height - _this.offsetHeight) {
					top = getInner().height - _this.offsetHeight;
				}
				
				_this.style.left = left + 'px';
				_this.style.top = top + 'px';
				
				if (typeof _this.setCapture != 'undefined') {
					_this.setCapture();
				} 
			}
			
			function up() {
				removeEvent(document, 'mousemove', move);
				removeEvent(document, 'mouseup', up);
				if (typeof _this.releaseCapture != 'undefined') {
					_this.releaseCapture();
				}
			}
		});
	}
	return this;
});

 视频

1
0
分享到:
评论
1 楼 jianwang0310 2014-06-16  
很不错啊 !学习了

相关推荐

    jQuery封装的组件

    本文将深入探讨一个基于jQuery封装的组件,通过标题"jQuery封装的组件"我们可以推测,这是一个利用jQuery创建的自定义UI元素或功能模块。描述中的链接指向了一篇博客文章,虽然具体内容无法直接提供,但我们可以根据...

    jquery封装的漂亮弹窗confirm

    "jquery封装的漂亮弹窗confirm"是一个利用jQuery实现的对话框插件,它为开发者提供了一个美观且功能丰富的确认对话框替代原生JavaScript的`confirm()`函数。这个组件的主要目标是增强用户体验,同时保持代码的简洁和...

    jquery 封装select实现select自定义样式插件jquery.easydropdown.min.js

    《jQuery封装Select实现自定义样式插件:jquery.easydropdown.min.js》 在Web开发中,Select元素是常用的数据选择控件,但其默认样式通常较为单一,无法满足设计师们对界面美观度的需求。jQuery库为我们提供了丰富...

    我的第一个jquery封装方法---jquery

    标题 "我的第一个jquery封装方法---jquery" 暗示了这篇博客主要关注的是如何使用jQuery这一流行的JavaScript库来封装自定义的功能。jQuery以其简洁的API和强大的DOM操作能力,成为了前端开发者的常用工具。在这里,...

    Jquery封装的地图工具

    **jQuery封装的地图工具详解** 在Web开发中,地图应用已经成为不可或缺的一部分,无论是地理位置查询、导航服务还是数据分析,都需要借助地图工具。本篇文章将详细介绍如何利用jQuery来封装常用的地图工具,包括...

    jQuery封装插件原理教学 Demo

    本教程将深入讲解如何基于jQuery封装自己的插件,这是一门面向初级开发者的技术分享,旨在帮助初学者理解jQuery插件的创建过程。 首先,我们需要了解jQuery插件的基本结构。一个简单的jQuery插件通常由以下部分组成...

    jquery封装好的验证码

    **jQuery封装好的验证码技术详解** 在网页开发中,验证码是一种常用的安全机制,用于防止自动化的机器人或恶意软件进行非法操作,如防止恶意注册、登录等。`jQuery` 是一款广泛使用的JavaScript库,它简化了DOM操作...

    jquery封装好的js文件

    这个压缩包中的 "jquery封装好的js文件" 提供了一个预封装的 jQuery 实例,使得开发者能够更快速、更便捷地在项目中使用 jQuery。 ### jQuery 的核心特性 1. **DOM 操作**:jQuery 提供了一系列简洁的 API 来查找...

    jQuery和JavaScript使用小案例

    jQuery的核心特性包括选择器(用于高效地找到页面中的元素)、链式调用(允许连续执行多个方法)和封装Ajax请求。例如,使用jQuery选择器`$("#elementId")`可以轻松地获取ID为"elementId"的元素,而`$(document)....

    jquery函数 强大的封装

    标题中的“jquery函数 强大的封装”正揭示了jQuery的核心魅力:它将复杂的JavaScript操作封装成易于理解和使用的函数,极大地降低了前端开发的难度,特别是对于熟悉CSS的人来说,jQuery提供了更便捷的操作DOM(文档...

    Jquery 封装下的ajax异步加载

    这个Web项目实例展示了如何利用jQuery封装的AJAX功能实现异步加载,通过与Servlet配合,实现了客户端与服务器间JSON数据的交换。理解这些概念和实践,对于提升Web应用的用户体验和性能至关重要。通过深入学习和实践...

    JavaScript和jquery实战手册

    JavaScript和jQuery是Web开发中的两种关键技术,它们在创建交互式网页和动态用户界面方面发挥着重要作用。本实战手册旨在深入探讨这两种技术的核心概念、语法以及实际应用,帮助开发者提升技能并构建高效、响应式的...

    仿照jquery封装一个自己的js库(一)

    ### 仿照jQuery封装自己的JS库(一) #### 一、理解jQuery的美元符号 在JavaScript的世界里,jQuery 是一个非常流行的库,它通过简化HTML文档遍历、事件处理、动画以及Ajax交互等功能来帮助开发者更高效地编写网页...

    AngularJS封装jQuery DateTimepicker

    这篇博客“AngularJS封装jQuery DateTimepicker”可能是关于如何在AngularJS应用中有效地整合和自定义这个日期时间选择器的教程。 在AngularJS中,我们通常避免直接使用jQuery,因为Angular提供了一套自己的数据...

    jquery封装的时间控件超级漂亮

    2. **高效性**:jQuery封装的时间控件通过优化的JavaScript代码和DOM操作提高了性能。它们通常使用事件委托来减少DOM查询,利用缓存技术提高查找速度,并使用异步操作避免阻塞页面加载。此外,许多插件还提供了懒...

    jquery封装函数,前后端分离框架

    本主题将深入探讨如何利用jQuery封装函数来实现这一目标,以及与JavaSC和AJAX的关系。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、Ajax交互等任务,使得前端开发更加便捷。在前后端分离...

    《JavaScript和jQuery实战手册》PDF

    《JavaScript和jQuery实战手册》是一本深入探讨JavaScript和jQuery编程技术的专业书籍,旨在帮助读者掌握这两门重要技术,提升Web开发能力。JavaScript是互联网上最广泛使用的脚本语言,而jQuery则是JavaScript的一...

    简单的跟随广告Jquery封装

    【跟随广告Jquery封装】是一种在网页中实现广告动态跟随用户滚动效果的技术,它利用了JavaScript库Jquery的强大功能,为网页添加了一种引人注目的互动广告形式。这种技术可以使广告始终保持在用户的视野范围内,增加...

    js照片轮播和jquery封装的照片播放器

    JavaScript 和 jQuery 在网页开发中广泛应用于创建动态和交互式的用户界面,其中照片轮播就是一种常见且实用的功能。本文将详细讲解如何使用 JavaScript 和 jQuery 实现照片轮播,并结合提供的"一行多图轮播 含有弹...

    jquery封装的input file控件

    "jquery封装的input file控件"是一种解决方法,通过jQuery库来改进文件上传控件的外观和交互体验。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在本案例中,开发者...

Global site tag (gtag.js) - Google Analytics