网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 论文素材 设计下载 最新论文 下载排行 论文上传 在线投稿 联系我们
返回网学首页
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 网页素材 > AJAX代码 > 正文
详解JQuery选择器(上)篇
来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 11/01/18
jQuery.noConflict():运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
jQuery.noConflict(extreme):将$和jQuery的控制权都交还给原来的库。
比如在prototype框架中的$会和jQuery框架中的$产生命名冲突,这里就是为了解决这种问题
现在先看下noConflict方法的具体实现:
noConflict: function( deep ) {
    window.$ = _$;  

    if ( deep )
        window.jQuery = _jQuery;  

    return jQuery;
}
其中_$,_jQuery是在jQquery源码的开始几行定义的:
(function(){  

var  
       //  
    _jQuery = window.jQuery,
    _$ = window.$,
       //  
})();
他们都是为了防止$被覆盖而将window.jQuery,window.$放在临时变量中保存起来。

当deep为空的时候,“_contentrdquo;覆盖“window.contentrdquo;,“contentrdquo;的常规功能失效,但jQuery还可以继续使用。当有新的库中重新定义“contentrdquo;的时候,“jQuery”继续为jQquery的常规功能,而“contentrdquo;就不是jQuery中的了,它是属于新的库的常规功能;

当deep不为空的时候,它将“_jQuery”覆盖“window.jQuery”,这样导致可能jQuery插件失效;另外方法返回的jQuery,实际上没有被覆盖。通过它完全可以移到新的一个命名空间,如dom.query = jQuery.noConflict(true); dom.query("div p").hide();

前言
这篇文章将介绍jQuery选择器的原理,主要内容包括:


分析

一、基本

1. 【#id】和【element】
在第一篇中曾经提到核心函数的概念,形如$("#result")【jQuery(expression,[context])】表达式,归根调用【jQuery(elements)】,因此将调用:
if ( selector.nodeType ) {
    this[0] = selector;
    this.length = 1;
    this.context = selector;
    return this;
}
2. 【.class】
在第一篇中曾经提到核心函数的概念,形如 $(".container") 【jQuery(expression,[context])】表达式字符串的实现。

3. 【*】
通过第一篇的结论,将代码进行到:
点击展开;

当expr为“*”的时候,根据Expr.match[ type ].exec( expr )为true时,type为TAG,因此将执行:
if ( left.substr( left.length - 1 ) !== "\\" ) {
    match = (match || "").replace(/\\/g, "");
    set = Expr.find[ type ]( match, context, isXML );  
    if ( set != null ) {
        expr = expr.replace( Expr.match[ type ], "" );
        break;
    }

}

继续查看Expr.find[ type ]的方法,具体实现如下:
var Expr = Sizzle.selectors = {
  //

  find: {
    ID: function(match, context, isXML){
        if ( typeof context.getElementById !== "undefined" && !isXML ) {
            var m = context.getElementById(match);
            return m ? [m] : ;
        }

    }
,
    NAME: function(match, context, isXML){
        if ( typeof context.getElementsByName !== "undefined" && !isXML ) {
            return context.getElementsByName(match);
        }

    }
,
    TAG: function(match, context){
        return context.getElementsByTagName(match);
    }

}

所以将调用context.getElementsByTagName("*");返回context中所有的DOM元素。

4. 【selector1,selector2,selectorN】
参考第一篇中的内容,当表达式包含“,”符号的时候,最后也是返回一个jQuery对象。

二、层级
1. 【ancestor descendant】
在给定的祖先元素下匹配所有的后代元素。
HTML代码 jQuery代码 结果
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />  
$("form input") [ <input name="name" />, <input name="newsletter" /> ]

首先“ancestor descendant” 作为一个表达式字符串,根据第一篇中的内容,它将执行:

// 处理 形如 $("div .container")的表达式字符串
else
  return jQuery( context ).find( selector );

接着查看jQuery对象的find方法:

find: function( selector ) {
    // 当表达式不包含“,”符号时候
    if ( this.length === 1 && !/,/.test(selector) ) {
        var ret = this.pushStack( , "find", selector );
        ret.length = 0;
        jQuery.find( selector, this[0], ret );
        return ret;
    }
  
    // 当表达式包含“,”符号时候
    else {
        var elems = jQuery.map(this, function(elem){
            return jQuery.find( selector, elem );
        }
);

        return this.pushStack( /[^+>] [^+>]/.test( selector ) ?
            jQuery.unique( elems ) :
            elems, "find", selector );
    }

}

由于jQuery.find = Sizzle; 因此查看Sizzle对象的具体实现:

点击展开;

其中set = Sizzle.filter( ret.expr, ret.set );调用Sizzle.filter方法: 

点击展开;

最关键是在加粗字代码,result.push( item ); anyFound = true; 和 curLoop = result;将匹配的元素加入result中,然后赋值于curLoop。

而方法的最后返回的是curLoop。所匹配的元素就是最后所需要的jQuery对象。
2. 【parent > child】

在给定的父元素下匹配所有的子元素。

HTML代码 jQuery代码 结果
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
$("form > input") [ <input name="name" /> ]

我们只要查看一下它的核心代码:


点击展开


从这里我们可以得到checkSet的值集合。


2. 【prev + next】

匹配所有紧接在 prev 元素后的 next 元素。next (Selector) :一个有效选择器并且紧接着第一个选择器。

例子

HTML代码 jQuery代码 结果
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" /> 
$("label + input") [ <input name="name" />, <input name="newsletter" /> ]

只要查看一下它的核心代码:

 

点击展开


从这里我们可以得到checkSet的值集合。


3. 【prev ~ next】

匹配 prev 元素之后的所有 siblings 元素。

例子

HTML代码 jQuery代码 结果
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
<input name="none2" />
$("form ~ input") [ <input name="none" />, <input name="none2" />]

只要查看一下它的核心代码:

 

relative: {
    //  
    "~": function(checkSet, part, isXML){  
        var doneName = "done" + (done++), checkFn = dirCheck;  

        if ( typeof part === "string" && !part.match(/\W/) ) {
            var nodeCheck = part = isXML ? part : part.toUpperCase();
            checkFn = dirNodeCheck;
        }
  

        checkFn("previousSibling", part, doneName, checkSet, nodeCheck, isXML);
    }

}


其中checkFn("previousSibling", part, doneName, checkSet, nodeCheck, isXML); 调用的是dirCheck方法,它的具体实现为:

点击展开

从这里我们可以得到checkSet的值集合。

三、简单

1. 【:first】,【:last】,【:even】,【:odd】,【 :eq(index) 】,【 :gt(index) 】,【 :lt(index) 】和 【 :not(selector) 】

:first 匹配找到的第一个元素。
:last 匹配找到的最后一个元素。
:even 匹配所有索引值为偶数的元素,从 0 开始计数。
:odd 匹配所有索引值为奇数的元素,从 0 开始计数。
:eq(index) 匹配一个给定索引值的元素。
:gt(index) 匹配所有大于给定索引值的元素。
:lt(index) 匹配所有小于给定索引值的元素。
:not(selector) 去除所有与给定选择器匹配的元素。

例子

HTML代码 jQuery代码
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
$("tr:first"),$("tr:last"),$("tr:even"),$("tr:odd"),$("tr:eq(1)"),$("tr:gt(0)")

首先我们看下它的一个正则表达式:

POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/,

核心代码从Sizzle.filter开始:
接着看下Expr.setFilters的具体实现:

点击展开

噢,所有的标识 主要在这里判断elem元素在集合中的逻辑位置,并且返回一个布尔值。

接着 match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not );  Expr.prefilter的具体实现,主要核心代码为:

点击展开


当match匹配中包含为“not”时,即表达式字符串中包含:not时,发生“代码1”;否则,根据POS的正则表达式判断返回true。

最后将匹配的item元素入栈,即 result.push( item )。Sizzle.filter最后返回的是curLoop。所匹配的元素就是最后所需要的jQuery对象。

这篇主要讲述 基础,层级,简单的原理,下一篇将讲述选择器剩下的框题 内容,可见性,属性,子元素,表单,表单对象属性等等原理

  • 下一篇资讯: 详解JQuery选择器(下)篇
  • 网学推荐

    免费论文

    原创论文

    浏览:
    设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
    版权所有 电话:013574892963 QQ:3710167 邮箱:Educs@163.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2015 Www.myeducs.Cn All Rights Reserved
    湘ICP备09003080号