当前位置:首页 > 开发 > 行业应用 > 正文

jq的选择器流程分析开篇

发表于: 2013-01-28   作者:zhangyaochun   来源:转载   浏览次数:
摘要: 本文简单地分析以下jquery的选择器流程: 为了考量jq的版本优化,这篇的代码分析来自jq1.3  /* *@paramselector *@paramcontext *@info$的入口 */ varjQuery=window.jQuery=window.$=function(selector,context){ returnnewjQuery.fn.init(selector,c

本文简单地分析以下jquery的选择器流程

 

为了考量jq的版本优化,这篇的代码分析来自jq1.3

 

 

/*
 * @param selector 
 * @param context
 * @info $的入口
*/
var jQuery = window.jQuery = window.$ = function(selector,context){
       return new jQuery.fn.init(selector,context);
}

 

 

var quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/;

jQuery.fn = jQuery.prototype = {
       /*
        * @name init
        * @param selector
        * @param context
       */
       init:function(selector,context){
             //默认是document
             selector = selector || document;
             
             //selector为DOM Element
             if(selector.nodeType){
                   this[0] = selector;
                   this.length = 1;
                   this.context = selector;
                   return this;
             }


             //selector为string
             if(typeof selector === "string"){
                   //比如#test 返回的match为["#test",undefined,undefined,"test"];
                  //比如<div id="test">test</div>返回的match为:['<div id="test">test</div>','<div id="test">test</div>','v',undefined];
                   var match = quickExpr.exec(selector);

                   if(match && (match[1] || !context)){

                         if(match[1]){
                              selector = jQuery.clean([match[1]],context);

                         }else{

                              //$("#ID")
                              var elem = document.getElementById(match[3]);
                              if(elem){
                                     if(elem.id != match [3]){
                                           return jQuery().find(selector);
                                     }

                                     var ret = jQuery(elem);
                                     ret.context = document;
                                     ret.selector = selector;
                                     return ret;

                              }
                              selector = [];
                         
                         }


                   }else{

                          //$(expr,[context])  ===>  $(content).find(expr)
                          return jQuery(context).find(selector); 
                   }                   

             }else if(jQuery.isFunction(selector)){

                   //很多简写的方式:$(function(){});
                    return jQuery(document).ready(selector); 
             }


             if(seletor.selector && selector.context){
                    this.selector = selector.selector;
                    this.context = selector.context;
             }

              return this.setArray(jQuery.makeArray(selector));
    
       }

}
 
 
 

 

 

 

 

jq的选择器流程分析开篇

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。 下图是在android中的
近来打算跳槽,打算把java基础方面的知识好好复习一下,一方面是为面试做准备。另一方面当做工作一
5 开篇
熠——光耀,鲜明。最早有记载的出处为《詩·豳風》中的《东山》篇。 仓庚于飞,熠耀其羽。之子于归
6 开篇
又是一个五一,这个日子有些特别,前两份工作都是差不多这个时候辞职的。 大学学的是机械制造与自动
7 开篇
网络终于在今天恢复了,想到在os上注册了账号,随便写点吧,作一个开篇. 我很少写日记,更不用提博客了
图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,
//test.c #include<stdio.h> int main() { int x=3,y=4; printf("x=%d y=%d\n",x,y); return
hdfs一次读的过程,涉及三个部分:Client、Namenode、Datanode,通过Client与Namenode之间的通信(
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号