首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

jquery后来人选择器不同写法的区别

2012-08-02 
jquery后代选择器不同写法的区别?jquery后代选择器有多种写法,如下都能达到目的,哪位高人知道他们之间的核

jquery后代选择器不同写法的区别?
jquery后代选择器有多种写法,如下都能达到目的,哪位高人知道他们之间的核心区别是什么?

$("#tab_schedule").find("li");

$("#tab_schedule li");

$("li","#tab_schedule");

[解决办法]
主要是作用上有所区别
比如
当this 为 #tab_schedule 时 怎么获取 子元素li?
$(this).find('li'); 
这样就ok

$("li","#tab_schedule");
这个不是分组选择器吗? 怎么是后代选择器了?

可能是楼主这个例子中
#tab_schedule 下正好有li
而分组 取出来的dom,有li 有#tab_schedule,所以楼主就认为是后代选择器了。
[解决办法]
$("#tab_schedule").find("li")、$("li","#tab_schedule")这俩个是完全等价的。
[解决办法]
后代选择器的内部实现在文档中没有特别说明。我觉得这三种查找方法在内部实现都是一样的,都是先获取祖宗对象集合,再通过find()方法进行遍历查找,比如:
$("#tab_schedule ul li") 等价于 $("#tab_schedule").find("ul").find("li")
[解决办法]

HTML code
jQuery.fn = jQuery.prototype = {    constructor: jQuery,    init: function( selector, context, rootjQuery ) {        var match, elem, ret, doc;        // Handle $(""), $(null), or $(undefined)        if ( !selector ) {            return this;        }        // Handle $(DOMElement)        if ( selector.nodeType ) {            this.context = this[0] = selector;            this.length = 1;            return this;        }        // The body element only exists once, optimize finding it        if ( selector === "body" && !context && document.body ) {            this.context = document;            this[0] = document.body;            this.selector = selector;            this.length = 1;            return this;        }        // Handle HTML strings        if ( typeof selector === "string" ) {            // Are we dealing with HTML string or an ID?            if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {                // Assume that strings that start and end with <> are HTML and skip the regex check                match = [ null, selector, null ];            } else {                match = quickExpr.exec( selector );            }            // Verify a match, and that no context was specified for #id            if ( match && (match[1] || !context) ) {                // HANDLE: $(html) -> $(array)                if ( match[1] ) {                    context = context instanceof jQuery ? context[0] : context;                    doc = ( context ? context.ownerDocument || context : document );                    // If a single string is passed in and it's a single tag                    // just do a createElement and skip the rest                    ret = rsingleTag.exec( selector );                    if ( ret ) {                        if ( jQuery.isPlainObject( context ) ) {                            selector = [ document.createElement( ret[1] ) ];                            jQuery.fn.attr.call( selector, context, true );                        } else {                            selector = [ doc.createElement( ret[1] ) ];                        }                    } else {                        ret = jQuery.buildFragment( [ match[1] ], [ doc ] );                        selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;                    }                    return jQuery.merge( this, selector );                // HANDLE: $("#id")                } else {                    elem = document.getElementById( match[2] );                    // Check parentNode to catch when Blackberry 4.6 returns                    // nodes that are no longer in the document #6963                    if ( elem && elem.parentNode ) {                        // Handle the case where IE and Opera return items                        // by name instead of ID                        if ( elem.id !== match[2] ) {                            return rootjQuery.find( selector );                        }                        // Otherwise, we inject the element directly into the jQuery object                        this.length = 1;                        this[0] = elem;                    }                    this.context = document;                    this.selector = selector;                    return this;                }            // HANDLE: $(expr, $(...))            } else if ( !context || context.jquery ) {                return ( context || rootjQuery ).find( selector );            // HANDLE: $(expr, context)            // (which is just equivalent to: $(context).find(expr)            } else {                return this.constructor( context ).find( selector );            }        // HANDLE: $(function)        // Shortcut for document ready        } else if ( jQuery.isFunction( selector ) ) {            return rootjQuery.ready( selector );        }        if ( selector.selector !== undefined ) {            this.selector = selector.selector;            this.context = selector.context;        }        return jQuery.makeArray( selector, this );    }, 


[解决办法]
上一楼是jQuery对象的初始化函数代码,发现很多种类的选择器最后都是去调用find()方法的。
所以可以确定地说,楼主你写的三种方法,最终都是通过find()来实现的,但第一种方法效率是最高的,因为后两种要先经过一系列的if判断后再调用find()方法的,不过这个效率的损失还是比较小的,我觉得可以认为这三种写法是等价的。
[解决办法]
- -||

$("li","#tab_schedule")确实是获取后代元素
和 $('li, span, div') 这个 混淆了。

热点排行
Bad Request.