`
JavaSam
  • 浏览: 952718 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 自定义 id class 选择器实现 支持链式操作

阅读更多
(function() {
	return window.Query = window.$ = function() {
		var _this = {}, selector = arguments[0];
		$.prototype = _this;
		/**
		 * 判断是对象是数组还是名值对象
		 * 返回0表示是数组,返回1表示是名值对象
		 */
		function objOrArr(obj) {
			if (!obj)
				return;
			if (typeof obj === "object") {
				for (var attr in obj) {
					return 1;
				}
				return obj.push ? 0 : 1;
			}
		}

		/**
		 * 确保所有对象都能call
		 */
		function applyAll(obj, callback) {
			if (!obj)
				return;
			var idx = 0
			if (objOrArr(obj)) {
				for (var i in obj) {
					if (callback.call(obj[i], i, obj[i]) === false) {
						break;
					}
				}
			} else {
				for (var o = obj[0]; idx < obj.length&& callback.call(o, idx, o) !== false; o = obj[++idx]) {
				}
			}
		}

		/**
		 * id选择器
		 */
		function identity(selector) {
			if (selector) {
				return document.getElementById(selector);
			}
		}

		/**
		 * 类选择器
		 */
		function clazz(selector) {
			var result = [];
			if (selector) {
				var a = selector.split(".");
				var prefix = a[0] || "*";
				var suffix = a[1];
				applyAll(document.getElementsByTagName(prefix), function() {
					if (this.nodeType === 1 && this.id) {
						var classNames = this.className.split(/\s+/g);
						var finded = this;
						applyAll(classNames, function() {
							if (this == suffix) {
								result.push(finded);
							}
						});
					} else {
					}
				});
			}
			return result;
		}

		if (selector) {
			if (typeof selector === "string") {
				if (selector.indexOf(".") != -1)
					return clazz(selector);
				if (selector.indexOf("#") != -1){
					return identity(selector.substring(selector.indexOf("#")+1));
				}else{
					return document.getElementsByTagName(selector);
				}
			}
			if (typeof selector === "object") {
				_this[0] = selector;
				return _this[0];
			}
			if (typeof selector === "function") {
				return selector(_this);	// selector 就是传入的function
			}
		} else {
			_this.toString();
		}
		_this.toString = function() {
			return "[Query query]";
		}
		return _this;
	}
})();

/**
 * 简易弹出框
 */
$.pop = function(url, title, options) {
	if(options){
		window.open(url,title,options)
	}else{
	    window.open(url,title,'height=350,width=800,top=200,left=300,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
	}
},
/**
 * 简易ajax请求
 */
$.ajax = function(options) {
	var httpRequest = window.ActiveXObject? new ActiveXObject("Microsoft.XMLHTTP"): new XMLHttpRequest();httpRequest.onreadystatechange = function() {
		var dataType = options.dataType.toLowerCase();
		httpRequest.readyState === 4&& httpRequest.status === 200&& options.callback(dataType === "json" ? eval("("	+ httpRequest.responseText + ")") : dataType === "xml"? httpRequest.responseXML: httpRequest.responseText, options.context);
	};
	httpRequest.open(options.mode, options.url, options.sync);
	if(options.mode.toLowerCase() === "post"){
		httpRequest.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
	}
	options.mode.toLowerCase() === "get" ? httpRequest.send(null):httpRequest.send(options.params);
},
/**
 * 去除所有空格
 */
$.trim = function(str) {
	return str.replace(/(^\s*)|(\s*$)/g,"");
},
/**
 * 去除左边空格
 */
$.ltrim = function(str) {
	return str.replace(/(^\s*)/g, "");
},
/**
 * 去除右边空格
 */
$.rtrim = function(str) {
	return str.replace(/(\s*$)/g, "");
}

 

0
0
分享到:
评论

相关推荐

    jQuery实现点击文本框颜色拾取的颜色选择器源码.zip

    jQuery的核心在于它的选择器,通过CSS语法选择DOM元素,如`$("#elementID")`选择ID为"elementID"的元素,`$(".className")`选择所有class为"className"的元素。此外,jQuery提供了丰富的链式操作,使得代码更加简洁...

    jquery语法与选择器介绍 带有案例

    1. **基本选择器**:`$('element')`(标签选择器)、`$('#id')`(ID选择器)、`$('.class')`(类选择器)。 2. **组合选择器**:`$('element1, element2')`(并集选择器)、`$('element1 element2')`(后代选择器)...

    jQuery 选择器、DOM操作、事件、动画

    在本篇中,我们将详细讨论jQuery选择器、DOM操作、事件处理和动画相关的知识点。 1. jQuery选择器 jQuery选择器用于选择HTML元素,并且能够在这些元素上执行各种操作。基本选择器和过滤选择器是jQuery选择器中最...

    模仿jQury-简单的选择器封装

    本教程将引导你了解如何模仿jQuery实现一个简单的选择器封装,这对于初学者理解jQuery的设计哲学和工作原理是很有帮助的。 首先,我们需要明白jQuery的核心就是它的选择器功能。jQuery的选择器基于CSS选择器,允许...

    基于jQuery实现的自定义下拉框控件

    jQuery的核心特性可以概括为:CSS选择器、链式操作、DOM操作、事件处理和动画。在本文中,我们将重点讨论如何利用jQuery创建自定义下拉框控件。 **创建自定义下拉框的步骤** 1. **HTML结构**:首先,我们需要一个...

    Jquery实现城市选择

    2. 自定义样式:使用CSS对选择器进行美化,如改变字体、颜色、边框等,以符合整体网页设计风格。 五、响应式设计 为了让城市选择器在不同设备上都能良好运行,可以结合Bootstrap或其他前端框架实现响应式布局,确保...

    jquery-javascript特效

    jQuery由John Resig于2006年创建,它简化了JavaScript的DOM操作,提供了丰富的选择器、链式调用、动画效果等功能,让开发者能够快速实现复杂的特效。 1. jQuery选择器:jQuery提供了一系列CSS选择器,如`$("#id")`...

    JavaScript交互式程序设计题库.doc

    - 使用CSS类选择器、ID选择器、属性选择器等,可以更精确地定位元素。例如,`$(".class")`选择所有class为指定值的元素。 10. jQuery遍历和操作: - `.each()` 方法用于循环遍历匹配的元素集合。 - `.append()` ...

    12个很棒的jQuery选择器扩展

    合理地使用ID选择器(`#id`)和类选择器(`.class`),避免使用过于复杂的选择器,可以提高代码的执行效率。 10. **链式调用**: jQuery的一大特色是链式调用,比如`$('selector').method1().method2()`,这样可以在...

    JavaScript框架-4

    - **JQuery 选择器**:JQuery支持多种选择器,包括基本选择器(如ID、类、标签名)、特殊选择器(如`:first`、`:last`)和筛选选择器(如`:even`、`:hidden`)。选择器的使用极大地提高了代码的可读性和效率。 - *...

    jquery点击改变class并toggle

    1. 选择目标元素,可以是ID选择器`$("#id")`或class选择器`$(".class")`。 2. 使用`click()`函数绑定点击事件处理器。 3. 在处理器内部调用`toggleClass()`方法,传入要切换的class名称。 希望这个解释有助于理解...

    jquery自定义风格独特的下拉列表控件(可实现单选和多选).zip

    它的核心特性包括选择器(用于找到HTML元素)、链式操作(一次调用多个方法)和高效的DOM操作。 二、自定义下拉列表控件 下拉列表(Dropdown List)是网页表单中常见的一种元素,通常由`&lt;select&gt;`标签定义。然而,...

    jQuery手册(优秀的javascript框架)

    - **选择器**:jQuery的选择器功能强大,它集成了CSS1至CSS3的选择器,如ID选择器(#id),类选择器(.class),以及属性选择器等,使得选取DOM元素变得更加直观。 - **链式调用**:jQuery对象返回的是自身,因此可以...

    第34章 项目1-博客前端:封装库--CSS选择器[下]1

    通过模拟的CSS选择器,可以实现类似`$('#box p .a').css('color', 'red')`的调用,该调用会找到ID为`box`的元素下的所有`p`元素中的`class='a'`的子元素,并将其颜色设置为红色。 6. **讲师信息**: 本节课程由...

    jQuery下拉列表框日期选择代码

    // 实现选择器的日期和时间选择功能,可以使用现有的库如Bootstrap Datepicker或自定义实现 // ... return this; // 保持链式调用 }; })(jQuery); // 初始化插件 $(document).ready(function() { $('#...

    javascript优化

    JavaScript 优化 JavaScript 作为一种...通过选择器优化、方法链式调用、事件绑定和解除绑定、浏览器类型判断、数组和对象操作、字符串操作、元素操作、toggleClass 和事件处理等方法,可以提高 JavaScript 的性能。

    JQuery DoM和ajax 操作

    1. **选择器**: jQuery提供了多种CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element),以及组合选择器等,使我们能够快速准确地定位到需要的元素。 2. **链式操作**: jQuery对象支持链式调用,这...

    项目四 jQuery_javascript_

    2. **选择器**:jQuery支持CSS选择器,如类选择器(`.class`)、ID选择器(`#id`)和属性选择器(`[attribute=value]`)。通过这些选择器,你可以精确地选取页面上的特定元素。 3. **事件处理**:jQuery提供了一种...

    jQuery实现可以拖动及查看自定义坐标刻度尺效果.zip

    通过这些选择器,开发者可以轻松地定位到页面中的特定元素,如`$("#elementId")`选择ID为`elementId`的元素,`$(".className")`选择所有class为`className`的元素。 2. **链式操作**:jQuery方法返回的是jQuery对象...

Global site tag (gtag.js) - Google Analytics