Wie verwende ich Selektor und Kontext im jQuery-Objekt?

Die beiden Attribute des jQuery-Objekts, Selektor und Kontext, waren zunächst überhaupt nicht klar. Dann habe ich lange auf Baidu und Google gesucht, konnte aber den Grund dafür nicht finden jQuery-API-Dokument. Das Selektorattribut und das Kontextattribut des Objekts. Haha~ Also~, wenn Sie Freizeit haben, ist es besser, zuerst die jQuery-API-Dokumentation durchzugehen, um sich damit vertraut zu machen. Es ist besser, als wie ich, der immer noch nach Dingen im Internet sucht und sie immer noch nicht finden kann Sie, was sehr frustrierend ist. Wenn Sie als Schüler diesen Artikel noch nicht kennen, lernen Sie es hier. Tatsächlich besteht der größte Nutzen dieser beiden Attribute darin, Plug-Ins zu schreiben .

In der API-Dokumentation heißt es:
Wenn der Kontextparameter nicht angegeben ist, sucht $() standardmäßig nach DOM-Elementen im aktuellen HTML-Dokument, z. B. einem DOM Elementsatz oder jQuery-Objekt, es wird in diesem Kontext durchsucht. Nach jQuery 1.3.2 entspricht die Reihenfolge der zurückgegebenen Elemente der Reihenfolge, in der sie im Kontext erscheinen.

Der Kontextparameter muss ein funktionierendes Knotenobjekt sein (DOM-Objekt, kein jQuery-Objekt). Obwohl die Übergabe eines jQuery-Objekts auch den Suchbereich einschränken kann, wird in diesem Fall die Kontexteigenschaft des jQuery-Objekts zum gesamten Document-Objekt.

Und der Wert von $(expression, [context]).selector ist genau expression
Zum Beispiel:

 $("div ul").selector//值为“div ul”    
 $("div.test").selector//值为“div.test”    
 $("#test ul li:first").selector//值为“test ul li:first”

Mit anderen Worten, was ist Ausdruck, was ist Selektor ,

$(expression, [context]).context ist ein DOM-Objekt. In Bezug auf dieses DOM-Objekt ist das erhaltene Kontextobjekt unterschiedlich, wenn unterschiedliche $ (Ausdruck, [Kontext]) verwendet werden.

Zugehöriger Beispielcode:

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&#39;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 );
}

Das obige ist der detaillierte Inhalt vonWie verwende ich Selektor und Kontext im jQuery-Objekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!