视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery中$()函数的使用方法
2020-11-27 19:33:24 责编:小采
文档


本篇文章给大家分享的是关于jQuery中$()函数的使用方法,内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家。

jQuery之$()

一般我们使用jQuery的时候,都是使用$()$指向全局的jQuery,所以其实是调用了jQuery(),结果是返回一个jq对象,但我们使用时却不需使用new创建对象,所以可以推测$()是一个工厂函数。

$()的定义

jQuery()src/core.js中定义,若在该方法中调用return new jQuery()则陷入循环,所以调用init()协助构造实例。值得一提的是,jQuery.fn/src/core.js指向了jQuery.prototype

 // Define a local copy of jQuery
 jQuery = function( selector, context ) {

 // The jQuery object is actually just the init constructor 'enhanced'
 // Need init if jQuery is called (just allow error to be thrown if not included)
 return new jQuery.fn.init( selector, context );
 }

init方法的定义

jQuery.fn.init()src/core/init.js中定义。方法接受三个参数selector, context, root,在方法内部,先判断是否有参数,无参数时返回false

 init = jQuery.fn.init = function( selector, context, root ) {
 var match, elem;

 // HANDLE: $(""), $(null), $(undefined), $(false)
 if ( !selector ) {
 return this;
 }

 // Method init() accepts an alternate rootjQuery
 // so migrate can support jQuery.sub (gh-2101)
 root = root || rootjQuery;

 // Handle HTML strings
 // < xxx > 或 $(#id)
 if ( typeof selector === "string" ) {
 if ( selector[ 0 ] === "<" &&
 selector[ 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[1]是html字符串,match[2]是匹配元素的id
 // selector是id选择器时match[1]为undefined,match[2]是匹配元素的id
 // selector是html字符串,match[1]是html字符串,match[2]为undefined
 match = rquickExpr.exec( selector );
 }

 // Match html or make sure no context is specified for #id
 // 匹配结果非空 且 存在匹配字符串或context空时执行
 // 未为id选择器限定查找范围
 if ( match && ( match[ 1 ] || !context ) ) {

 // HANDLE: $(html) -> $(array)
 if ( match[ 1 ] ) {
 context = context instanceof jQuery ? context[ 0 ] : context;

 // Option to run scripts is true for back-compat
 // Intentionally let the error be thrown if parseHTML is not present
 // 生成dom节点并合并到this上
 jQuery.merge( this, jQuery.parseHTML(
 match[ 1 ],
 context && context.nodeType ? context.ownerDocument || context : document,
 true
 ) );

 // HANDLE: $(html, props)
 // 遍历props,添加属性或方法
 if ( rsingleTag.test( match[ 1 ] ) && jQuery.isPlainObject( context ) ) {
 for ( match in context ) {

 // Properties of context are called as methods if possible
 if ( jQuery.isFunction( this[ match ] ) ) {
 this[ match ]( context[ match ] );

 // ...and otherwise set as attributes
 } else {
 this.attr( match, context[ match ] );
 }
 }
 }

 return this;

 // HANDLE: $(#id)
 // 处理id选择器且无context
 } else {
 elem = document.getElementById( match[ 2 ] );

 if ( elem ) {

 // Inject the element directly into the jQuery object
 this[ 0 ] = elem;
 this.length = 1;
 }
 return this;
 }

 // HANDLE: $(expr, $(...))
 // selector是选择器 context为undefined或context.jquery存在时执行。
 // $(#id,context)或$(.class [, context])等情况
 } else if ( !context || context.jquery ) {
 return ( context || root ).find( selector );

 // HANDLE: $(expr, context)
 // (which is just equivalent to: $(context).find(expr)
 } else {
 return this.constructor( context ).find( selector );
 }

 // HANDLE: $(DOMElement)
 // 传入DOM元素
 } else if ( selector.nodeType ) {
 this[ 0 ] = selector;
 this.length = 1;
 return this;

 // HANDLE: $(function)
 // Shortcut for document ready
 } else if ( jQuery.isFunction( selector ) ) {
 return root.ready !== undefined ?
 root.ready( selector ) :

 // Execute immediately if ready is not present
 selector( jQuery );
 }

 return jQuery.makeArray( selector, this );
 };

selector是字符串

如果有selector非空,先处理selector是字符串的情况,分为html字符串、$(selector)$(expr, $(...))$(expr, context)四种。如果selector是字符串类型,根据传入的字符串返回生成的dom节点,处理时先用正则匹配,查找html字符串或id。匹配结果非空且存在匹配字符串或context空时说明selctor是html字符串或selector是id选择器且未限定查找上下文。执行处理html字符串时,先确定生成后的节点要插入的document是哪个(即context参数),默认是加载jQuery的document,调用$.parseHTML()生成dom节点并添加到this;如果context是对象,则是$(html, props)的调用,将属性或者方法挂载到dom上,返回生成的jq对象。如果匹配到$(#id)的调用且context空时,则直接调用document.getElementById查找元素,元素存在时将this[0]指向该元素,返回查找结果。

如果selector不是id选择器或context非空,调用find进行查找,如果context非空,则从context开始查找,否则全局查找,将查找结果作为返回值。

selector是DOM元素

接着处理传入参数是Dom元素的情况。将this[0]指向Dom元素,设置jq对象长度为1,并返回this

selector是函数

最后处理$(function(){}),如果存在ready则调用传入函数调用ready(f()),否则传入jQuery,直接调用函数,调用makeArray,将其结果作为返回值。

修改init的原型

init = jQuery.fn.init = function( selector, context, root ) {
 ...
 }
// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

在原型上定义方法init,然后将init的原型指向jQuery的原型,如果不这么做,则创建的实例的原型是init.prototype,不是jQuery.fn,其实是init的实例而不是jQuery的实例,无法调用在core.js中定义在jQuery.fn上的各种变量和方法。

相关推荐:

通过Ajax如何请求下载Execl文件

在JS中用slice封装数组方法

下载本文
显示全文
专题