- 浏览: 704348 次
文章分类
- 全部博客 (324)
- 图片 (1)
- Javascript (25)
- Android (144)
- css (6)
- intellij (3)
- jquery (9)
- java (29)
- mysql (5)
- grails (1)
- groovy (1)
- Android Eclipse (2)
- linux (12)
- web (5)
- 算法 (2)
- 软件安装 (1)
- dedecms (12)
- centsos (6)
- tomcat (1)
- win 2003 (3)
- 杰奇 (1)
- window (1)
- loadrunner (3)
- QTP (38)
- VBS (33)
- Android 自动化 (12)
- python (3)
最新评论
-
masuweng:
Intellij 中javax.servlet.http.HttpServlet包导不进来 -
臧殿彬:
为什么我在主线程中定义也会出现这个bug?
java.lang.RuntimeException: Can't create handler inside thread that has not cal -
wpp1993:
...
http请求返回并解析json数据 -
javasea:
不错不错
socket阻塞与非阻塞,同步与异步、I/O模型 -
suyuwen1:
Apache2.4.x版wampserver本地php服务器如 ...
WAMPserver配置(允许外部访问、phpmyadmin设置为输入用户名密码才可登录等)
本文所有代码,出自jQuery.1.5.2,为方便理解,引入类的概念,虽然jQuery不是基于面向对象思想。
jQuery是现在最流行的Javascript框架, $是其中最常见的符号,已经在jQuery留下了深深的烙印。
那么$到底是什么东西,它可以接受一个字符,也可以接受一个文档对象,亦或者一个函数,也可以调用一个函数。
接下来我会彻底分析这个符号背后隐藏的秘密。
jQuery,高效,精炼,特别是对DOM元素对象操作的简化,很大程度上将前端程序员从一大堆冗余的代码解放出来,大大提高了开发效率!对多浏览器的兼容性,也最大限度让程序员摆脱各种bug的纠缠
$符号作为元素选择器的简写,最早是由Prototype库使用,来简写getElementById,jQuery沿袭这一理念,并发扬光大,使$符号成为了jQuery最别具一格的特点。那么在jQuery中,$符号到底是啥?
熟悉jQuery的人应该知道,几乎jQuery所有操作,都是从$符号开始,当作为元素选择器的时候,操作结果返回的是一个jQuery对象。
那么,现在就看jQuery类的构造函数的主要代码
var jQuery = (function() { //创建jQuery对象,给所有的jQuery方法提供统一的入口,避免繁琐难记 var jQuery = function( selector, context ) { //jQuery的构造对象,调用了jQuery.fn.init方法 //最后返回jQuery.fn.init的对象 return new jQuery.fn.init( selector, context, rootjQuery ); }, ..... //定义jQuery的原型,jQuery.fn指向jQuery.prototype对象 jQuery.fn = jQuery.prototype = { //重新指定构造函数属性,因为默认指向jQuery.fn.init constructor: jQuery, init: function( selector, context, rootjQuery ) {.....}, ...... } ...... //返回jQuery变量,同时定义将全局变量window.jQuery和window.$指向jQuery return (window.jQuery = window.$ = jQuery); })();
从以上jQuery的主体结构,我们可以看出,当首次执行完毕后,全局变量$和jQuery,都是指向了var jQuery=function(selector,context){}这个函数,这里,就可以下个结论,$就是jQuery的别名,实际调用jQuery.fn.init。
再看看var jQuery=function(selector,context){}这个构造函数,为什么里面不直接返回jQuery的对象?而是调用另外一个方法呢?
假如直接返回对象的话,每次使用jQuery对象,都要new jQuery() 这样的话,十分不方便,直接将new 这个操作封装在jQuery构造函数里面,简化了实例化的操作,同时,jQuery通过了jQuery或者$符号,统一了接口,方便代码的编写,化繁为简,提高效率。
那么jQuery类具体是如何构造的?居然能支持各种参数形式的调用
直接上jQuery.fn.init的“辕马”,jQuery的真实构造器,我们就可以完全清楚了
/*所有查找或生成元素的结果,封装为jQuery对象数组返回. */ init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // 1)处理 $(""), $(null), or $(undefined) //this指向jQuery对象 if ( !selector ) { return this; } // 2)处理 $(DOMElement) //selector.nodeType得知为DOM元素,如果是DOM元素直接放进jQuery对象数组中 if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } //3)body元素只出现一次, 优化查找 if ( selector === "body" && !context && document.body ) { this.context = document; this[0] = document.body; this.selector = "body"; this.length = 1; return this; } //4)如果是字符串,有六种情况, /* *(1)单个html元素 不带属性对象字面量 :createElement + merge *(2)单个html元素 带属性对象字面量 :createElement + attr + merge *(3)多个html元素 :buildFragment + merge *(4)#id 不带context :getElementById或者getElementById + Sizzle *(5)#id 带context :Sizzle *(6)experession string :Sizzle *(7)标签选择器 :Sizzle(内置getElementByTagName) */ if ( typeof selector === "string" ) { // 判断是否为HTML string 还是 ID //如果是HTML strings match[1] 非空 //如果是ID strings match[1] 空 //quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]+)$)/, match = quickExpr.exec( selector ); // 分析匹配结果,且当#id没有context参数,例如不是$('#xxx',xxx) if ( match && (match[1] || !context) ) { // 处理HTML字符 $(html) -> $(array) if ( match[1] ) { //如果context为jQuery对象,则取用第一个元素,即是context[0] context = context instanceof jQuery ? context[0] : context; //取得document文档 doc = (context ? context.ownerDocument || context : document); //判断是否为单个元素字符串 ret = rsingleTag.exec( selector ); //单个元素 if ( ret ) { //带对象属性字面量 //检查context是否为对象字面量,适用场景 //例如$('<div>', { 'id': 'test', 'class': 'test' }); if ( jQuery.isPlainObject( context ) ) { selector = [ document.createElement( ret[1] ) ]; jQuery.fn.attr.call( selector, context, true ); } else { //不带对象字面量 //例如$('<div>') selector = [ doc.createElement( ret[1] ) ]; } } else { //如果是多个元素字符串,例如$('<div><a></a></div>') ret = jQuery.buildFragment( [ match[1] ], [ doc ] ); selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes; } //将生成结果selector 合并到jQuery对象中 return jQuery.merge( this, selector ); // 处理$("#id"),例如$("#xxx"); } else { elem = document.getElementById( match[2] ); if ( elem && elem.parentNode ) { //处理IE和Opera ID 与 Name 混淆的bug,使用Sizzle查找 if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // 否则,简单插入jQuery对象数组 this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // 处理 $(expr, $(...)),使用Sizzle查找,例如$("div"),$('div > a'),$('div,a'),$('div:first') } else if ( !context || context.jquery ) { return (context || rootjQuery).find( selector ); // 处理: $(expr, context),例如$('div a');或者$('a','div')或者$('div').find('a'); } else { return this.constructor( context ).find( selector ); } //5)处理: $(function),设置DOM载的时候绑定的函数,等同于$().ready(){foo} } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } //6)处理:$($(...)),完成克隆jQuery对象的简单参数,具体由makeArray完成 if (selector.selector !== undefined) 完成加{ this.selector = selector.selector; this.context = selector.context; } //使用makeArray,为jQuery对象添加元素,例如$([1,2]); return jQuery.makeArray( selector, this ); },
总结
$符号,其实是对jQuery类构造函数的引用,此函数实际调用了jQuery.fn.init(即是jQuery.prototype.init)来生成jQuery对象,其中jQuery.prototype的所有方法都被jQuery的对象继承。$.func实际是jQuery类的静态方法,所以$即是jQuery类的构造函数,支持各种条件的查找和生成并返回DOM对象构成jQuery对象,同时也是一个类,是所有jQuery静态方法的入口,例如可以使用个$.ajax()。
最后,奉送一些资源给大家,14条改善jQuery代码的技巧
关于jQuery Sizzle选择器,有兴趣的同学可以参阅初探 jQuery 的 Sizzle 选择器
http://blog.csdn.net/pgmsoul/article/details/8002805
发表评论
-
图片或文字上下左右滚动【JS向上滚动、JS向下滚动、JS向左滚动、JS向右滚动】【整理综合】
2014-12-03 17:48 782注:上下滚动时,单元格demo1里面的内容高度要大于demo ... -
Js中 关于top、clientTop、scrollTop、offsetTop
2014-12-03 17:45 945obj.clientWidth //获取元素的宽度 o ... -
jquery实现静态html文件的include效果
2014-10-17 12:01 2253直接调用jquery的get方法调用远程页面,代码就这样: ... -
异步请求,跨域
2014-01-07 11:00 1079(function ($) { $.rpc = ... -
js获得相对于父元素的坐标
2013-08-23 16:50 16828<html> <head> &l ... -
js 动态插入遍历对象
2013-05-10 22:11 996动态插入对象: var imgarr = []; ... -
js 发布异步请求
2013-04-09 17:04 1494function loadXMLDoc() ... -
如何将一个HTML页面嵌套在多个动态页面(asp)
2013-03-31 18:53 8034正 文: 很多时候,由于程序设计需要,要求在as ... -
不同设备浏览器的userAgent值大全
2013-03-21 13:14 1577这里对浏览器各自的userAgent特点做一分析,并 ... -
js判断是手机还是电脑访问网站
2013-03-20 16:00 1321<script type="text/ja ... -
生成汉字首字母拼音
2013-01-22 11:43 1920window.strChineseFirstPY = ... -
封装 jquery ui 的dialog
2013-01-22 11:31 2596(function ($) { var defau ... -
生成汉字拼音首字母
2012-11-13 11:40 1318function makePy(str){ ... -
返回顶部
2012-11-06 11:05 926看www.qq.com时,看到里面返回顶部的代码: < ... -
jQuery 如何存储,获取和删除 Cookies
2012-11-02 16:37 1022jQuery.cookie = function(nam ... -
纠正jQuery获取radio选中值的写法
2012-10-16 16:39 1177<input type="radio&q ... -
readonly的input里面键入backspace键,会触发history.back()
2012-10-15 16:56 1266在IE下,如果在readonly的input里面键入ba ... -
判断字段是否包含中文
2012-10-10 13:15 1094/** * 判断字段是否包含中文 * ... -
限制输入不能超过六个字节(含中文),并截取
2012-10-10 13:14 1450var COUNT=100; //返回限制输入多 ... -
jquery 中 ie7/ie8下input="text" 删除类
2012-10-07 17:52 1048ie7下,我要删除所有文本框中的一个类: $(" ...
相关推荐
RE-RB-OFDM-SB-符号详解.pdfRE-RB-OFDM-SB-符号详解.pdfRE-RB-OFDM-SB-符号详解.pdfRE-RB-OFDM-SB-符号详解.pdfRE-RB-OFDM-SB-符号详解.pdfRE-RB-OFDM-SB-符号详解.pdfRE-RB-OFDM-SB-符号详解.pdfRE-RB-OFDM-SB-符号...
JQuery详解JQuery详解JQuery详解JQuery详解JQuery详解JQuery详解
RE-RB-OFDM-SB-符号详解.docxRE-RB-OFDM-SB-符号详解.docxRE-RB-OFDM-SB-符号详解.docxRE-RB-OFDM-SB-符号详解.docxRE-RB-OFDM-SB-符号详解.docxRE-RB-OFDM-SB-符号详解.docxRE-RB-OFDM-SB-符号详解.docxRE-RB-OFDM-...
oracle_v$session_v$session_wait用途详解oracle_v$session_v$session_wait用途详解oracle_v$session_v$session_wait用途详解oracle_v$session_v$session_wait用途详解oracle_v$session_v$session_wait用途详解...
VB-Open-函数详解
jQuery.extend 函数详解 Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
博客《ViewPager 详解(二)---详解四大函数》所对应源码,博客地址:http://blog.csdn.net/harvic880925/article/details/38487149
对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when…done…fail…then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下面的$.ajax写法,看起来很乱 ...
jQuery:jQuery.extend函数详解
学习永无止境:oracle存储过程总结_函数_语法_大全_详解
PLSQL单行函数和组函数详解PLSQL单行函数和组函数详解
asp函数详解-最全的asp函数asp函数详解-最全的asp函数asp函数详解-最全的asp函数asp函数详解-最全的asp函数asp函数详解-最全的asp函数asp函数详解-最全的asp函数asp函数详解-最全的asp函数
jQuery_extend 函数详解
4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox & radio 选择功能 8、支持任意更换皮肤 / 个性化图标...
C++调用C函数实例详解 前言:以前见到extern “C”这样的语句,只是简单地知道跟外部链接有关,但是没有深刻理解它的意思。 首先,为什么要使用extern “C”修饰符? C++调用其它语言的函数,由于编译器生成函数的...
jquery 插件开发详解通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建
c语言字符串函数详解--函数名及源代码整理
Oracle 存储过程总结 1、创建存储过程 2、变量赋值 3、判断语句 4、For 循环 5、While 循环 6、数组 7.游标的使用