您好,欢迎访问一九零五行业门户网

jQuery对象中的selector和context是怎么使用的?

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是怎么使用的?的详细内容。
其它类似信息

推荐信息