jQuery 中 $( ) 函数的用法总结
摘要
1 2 3 4 5 6 | jQuery对象: 具有jquery框架设置的所有功能的调用者, 就是该框架的对象$又是什么?: $就是jQuery对象, jQuery对象为window的全局属性, 所以可以直接使用如何自定义jQuery对象: 如用 JQ 替换 jQuery | $var JQ = jQuery.noConflict(); //这是jquery源码中提供的方法JQ('.box').html("<b>哈哈</b>"); |
jQuery(selector,context)
1 | 简要的说是：接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象 |
默认情况下，对匹配元素的查找都是从根元素ducument对象开始，也就是说查找范围是整棵文档树。但是如果给定了上下文context，则在指定上下文中查找
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | html<span>body span</span><span>body span</span><span>body span</span><div class="wrap"> <span>wrap span</span> <span>wrap span</span> <span>wrap span</span></div>js$('span').css('background-color','red');//所有的span都会变红$('span','.wrap').css('background-color','red');//只有.wrap中的span会变红 |
jQuery(html,ownerDocument) ，jQuery(html,props)
1 | 用所提供的html代码创建DOM元素对于jQuery(html,ownerDocument)，参数html可以是单标签或者是多层标签之间的嵌套。<br>第二个参数用于创建新DOM元素的文档对象，如果不传入则默认为当前的文档对象 |
1 2 3 4 5 6 7 | //单标签 两种方式都可以往body中插入div/* * 1 $('<div>').appendTo('body'); * 2 $('<div></div>').appendTo('body'); */// 多标签嵌套 $('<div><span>dfsg</span></div>').appendTo('body'); |
另外:对于单标签，jQuery(html,props)，props是一个包含属性和事件的普通的对象，用法如下
1 2 3 4 5 6 7 | $('<div>我是div</div>',{ title:'我是新的div', click:function(){ $(this).css('color','red'); console.log(this); }}).appendTo('body'); |
jQuery(element or elementsArray)
1 | 如果传入一个DOM元素或者是DOM元素的数组，则把DOM元素封装到jQuery对象中并返回。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | html<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul>js // 传入DOM元素 $('li').each(function(index,ele){ $(ele).on('click',function(){ $(this).css('background','red');//这里的DOM元素就是this })})//传入DOM数组var aLi=document.getElementsByTagName('li'); aLi=[].slice.call(aLi);//集合转数组 var $aLi=$(aLi); $aLi.html('我是jQuery对象');//所有的li的内容都变成'我是jQuery对象' |
jQuery(object)
1 | 如果传入的是一个object对象，则把该对象封装到jQuery对象中并返回 |
1 2 3 4 5 6 7 | var obj={name:'谦龙'};var $obj=$(obj);//封装成jQuery对象//绑定自定义事件$obj.on('say',function(){ console.log(this.name)//输出谦龙});$obj.trigger('say'); |
jQuery(callback)
1 | 当传进去的参数是函数的时候，则在document对象上绑定一个ready事件监听函数，当DOM结构加载完成的时候执行 |
1 2 3 4 5 6 | $(function(){})//以上代码和下面的效果是一样的$(document).ready(function(){ ...//代码}) |
jQuery(jQuery object)
1 | 当传进去的参数是一个jQuery对象的时候，则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素 |
1 2 3 4 5 | var aLi=$('li');var copyLi=$(aLi);//创建一个aLi的副本console.log(aLi);console.log(copyLi);console.log(copyLi===aLi); |
jQuery()
1 | 如果不传入任何的参数，则返回一个空的jQuery对象，属性length为0注意这个功能可以用来复用jQuery对象，<br>例如可以创建一个空的jQuery对象，然后在需要的时候先手动修改其中的元素，然后在调用jQuery方法。从而避免重复创建jQuery对象 |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库