jQuery物件的兩個屬性selector和context,一開始一點都摸不著頭腦,然後在百度和谷歌上面查了好久,也沒查到個所以然來,後來還是在jQuery API文檔中發現了這個jquery物件的selector屬性和context屬性。呵呵~所以說呀~有空的時候,還是先把jQuery API文檔先翻一遍熟悉一下,也好過像我這樣,明明API文檔中有的東西,還在網上到處找,還找不到,多鬱悶呀~如果看到這篇文章的同學,還不知道這兩個屬性的意思的話,那正好在此學習一下吧,其實這兩個屬性的最大的用處是用在編寫插件。
API文件中說了:
預設值, 如果沒有指定context參數,$()將在目前的HTML document中尋找DOM 元素;如果指定了context 參數,如一個 DOM元素集或jQuery對象,那就會在這個context 中查找。在jQuery 1.3.2以後,其傳回的元素順序等同於在context中出現的先後順序。
Context參數需要是一個正常工作的節點物件(DOM對象,而不是jQuery對象)。雖然傳遞jQuery物件也可以起到限定查找範圍的作用,但是這樣的話,那麼jQuery物件的context屬性就會變成整個Document物件。
而$(expression, [context]).selector的值正好就是expression
例如:
$("div ul").selector//值为“div ul” $("div.test").selector//值为“div.test” $("#test ul li:first").selector//值为“test ul li:first”
也就是說expression是什麼,selector就是啥,
$(expression, [context]).context是一個DOM物件。關於這個DOM對象,在使用不同的$(expression, [context]),取得的context物件還有不同。
相關範例程式碼:
function( selector, context, rootjQuery ) {var match, elem, ret, doc;// Handle $(""), $(null), or $(undefined) //如果selector为空格,!selector为false if (!selector) {//此时this为空jQuery对象 return this; }// Handle $(DOMElement) //nodeType节点类型,利用是否有nodeType属性来判断是否是DOM元素 if ( selector.nodeType ) {//将第一个元素和属性context指向selector this.context = this[0] = selector;this.length = 1;return this; }// The body element only exists once, optimize finding it //因为body只出现一次,利用!context进行优化 if ( selector === "body" && !context && document.body ) {//context指向document对象 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? //以<开头以>结尾,且长度大于等于3,这里假设是HTML片段,跳过queckExpr正则检查 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) {//如果context是普通对象 if (jQuery.isPlainObject(context)) { //之所以放在数组中,是方便后面的jQuery.merge()方法调用 selector = [document.createElement(ret[1])]; //调用attr方法,传入参数context jQuery.fn.attr.call( selector, context, true ); } else { selector = [ doc.createElement( ret[1] ) ]; } //复杂HTML的处理方法 } 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 //即使是documen.getElementById这样核心的方法也要考虑到浏览器兼容问题,可能找到的是name而不是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, $(...)) //没有指定上下文,执行rootjQuery.find(),制定了上下文且上下文是jQuery对象,执行context.find() } else if ( !context || context.jquery ) {return ( context || rootjQuery ).find( selector );// HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) //如果指定了上下文,且上下文不是jQuery对象 } else { //先创建一个包含context的jQuery对象,然后调用find方法 return this.constructor( context ).find( selector ); }// HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) {return rootjQuery.ready( selector ); } //selector是jquery对象 if ( selector.selector !== undefined ) {this.selector = selector.selector;this.context = selector.context; } //合并到当前jQuery对象 return jQuery.makeArray( selector, this ); }
以上是jQuery物件中的selector和context是怎麼使用的?的詳細內容。更多資訊請關注PHP中文網其他相關文章!