本篇文章给大家分享的是关于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
上的各种变量和方法。
相关推荐:
以上是jQuery中$()函数的使用方法的详细内容。更多信息请关注PHP中文网其他相关文章!

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

修改方法:1、用attr(),可设置被选元素的指定属性的值,语法“元素对象.attr("title","新值")”,新值将覆盖旧值;2、用prop(),可为匹配元素集合设置指定属性值,语法“元素对象.prop("title","新值")”。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Dreamweaver CS6
视觉化网页开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),