Comment utiliser le sélecteur et le contexte dans un objet jQuery ?

Les deux attributs de l'objet jQuery, le sélecteur et le contexte, n'étaient pas clairs du tout au début. Ensuite, j'ai longuement cherché sur Baidu et Google, mais je n'ai pas trouvé la raison. Plus tard, j'ai trouvé ce jquery dans le. Document de l'API jQuery. L'attribut sélecteur et l'attribut contexte de l'objet. Haha~ Alors~ quand vous avez du temps libre, il vaut mieux d'abord consulter la documentation de l'API jQuery pour vous familiariser avec. C'est mieux que d'être comme moi, qui cherche toujours des choses sur Internet et ne trouve toujours pas. eux, ce qui est très frustrant. Ouais ~ Si vous, les étudiants qui lisez cet article, ne connaissez toujours pas la signification de ces deux attributs, apprenez-la simplement ici. En fait, la plus grande utilisation de ces deux attributs est d'écrire des plug-ins. .

La documentation de l'API dit :
Par défaut, si le paramètre de contexte n'est pas spécifié, $() recherchera les éléments DOM dans le document HTML actuel si le paramètre de contexte est spécifié, comme un DOM ; ensemble d'éléments ou objet jQuery, il sera recherché dans ce contexte. Après jQuery 1.3.2, l'ordre des éléments renvoyés est équivalent à l'ordre dans lequel ils apparaissent dans le contexte.

Le paramètre Context doit être un objet nœud de travail (objet DOM, pas objet jQuery). Bien que transmettre un objet jQuery puisse également limiter la portée de la recherche, dans ce cas, la propriété de contexte de l'objet jQuery deviendra l'intégralité de l'objet Document.

Et la valeur de $(expression, [context]).selector est exactement expression
Par exemple :

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

En d'autres termes, qu'est-ce que l'expression, qu'est-ce que le sélecteur. ,

$(expression, [context]).context est un objet DOM. Concernant cet objet DOM, lors de l'utilisation de différents $(expression, [context]), l'objet contexte obtenu est différent.

Exemple de code associé :

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 );
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!