jQuery中$()函数的7种用法汇总
前言
jQuery对象是一个类数组的对象,含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中,形成了统一(也是惟一)的操作入口。
其中我们用的非常频繁的一个函数是$()或者说是jQuery(),当我们调用他的时候会根据传入的参数的不同而达到不同的效果。
接下来会一一说一下这7中用法,欢迎大家指正其中不正确的地方。
简要的说是:接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。
默认情况下,对匹配元素的查找都是从根元素ducument对象开始,也就是说查找范围是整棵文档树。但是如果给定了上下文context,则在指定上下文中查找
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会变红
2 jQuery(html,ownerDocument) 、jQuery(html,props)
用所提供的html代码创建DOM元素
对于jQuery(html,ownerDocument),参数html可以是单标签或者是多层标签之间的嵌套。第二个参数用于创建新DOM元素的文档对象,如果不传入则默认为当前的文档对象。
//单标签 两种方式都可以往body中插入div /* * 1 $('<div>').appendTo('body'); * 2 $('<div></div>').appendTo('body'); */ // 多标签嵌套 $('<div><span>dfsg</span></div>').appendTo('body');
另外:对于单标签,jQuery(html,props),props是一个包含属性和事件的普通的对象,用法如下。(该用法有待考证,请知道这一用法的童鞋告知一下,感激不尽)
$('<div>我是div</div>',{ title:'我是新的div', click:function(){ $(this).css('color','red'); console.log(this); } }).appendTo('body');
3 jQuery(element or elementsArray)
如果传入一个DOM元素或者是DOM元素的数组,则把DOM元素封装到jQuery对象中并返回。
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对象'
4 jQuery(object)
如果传入的是一个object对象,则把该对象封装到jQuery对象中并返回。
var obj={name:'谦龙'}; var $obj=$(obj);//封装成jQuery对象 //绑定自定义事件 $obj.on('say',function(){ console.log(this.name)//输出谦龙 }); $obj.trigger('say');
5 jQuery(callback)
当传进去的参数是函数的时候,则在document对象上绑定一个ready事件监听函数,当DOM结构加载完成的时候执行
$(function(){ }) //以上代码和下面的效果是一样的 $(document).ready(function(){ ...//代码 })
6 jQuery(jQuery object)
当传进去的参数是一个jQuery对象的时候,则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素
var aLi=$('li'); var copyLi=$(aLi);//创建一个aLi的副本 console.log(aLi); console.log(copyLi); console.log(copyLi===aLi);
7 jQuery()
如果不传入任何的参数,则返回一个空的jQuery对象,属性length为0
注意这个功能可以用来复用jQuery对象,例如可以创建一个空的jQuery对象,然后在需要的时候先手动修改其中的元素,然后在调用jQuery方法。从而避免重复创建jQuery对象。
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362
原文地址:https://www.cnblogs.com/xsd1/p/11963804.html
- 1644: [Usaco2007 Oct]Obstacle Course 障碍训练课
- 数据结构之哈夫曼树和编码器的构造
- 1578: [Usaco2009 Feb]Stock Market 股票市场
- webp图片实践之路
- 3522: [Poi2014]Hotel
- 3299: [USACO2011 Open]Corn Maze玉米迷宫
- 2272: [Usaco2011 Feb]Cowlphabet 奶牛文字
- 1632: [Usaco2007 Feb]Lilypad Pond
- 1630/2023: [Usaco2005 Nov]Ant Counting 数蚂蚁
- Java设计模式(七)Decorate装饰器模式
- 1623: [Usaco2008 Open]Cow Cars 奶牛飞车
- 1622: [Usaco2008 Open]Word Power 名字的能量
- 3297: [USACO2011 Open]forgot
- 1740: [Usaco2005 mar]Yogurt factory 奶酪工厂
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 学习|Unity3d的导航实现循环线路移动
- 【redis】闲得无聊,来聊聊当下爆火的 redis集群,顺便搭一个玩玩呗
- 【redis入门】Centos下安装redis
- LeetCode精选好题(五)
- 【leetcode两题选手】MySQL类题目(一)
- 【LeetCode每日一题】(8.11)被围绕的区域
- 二叉树的前中后序遍历(迭代法)(带动画)
- 【LeetCode两题选手】算法类题目(8.8)
- 【LeetCode每日一题】(8.9)复原IP地址(回溯)
- 【回溯算法】N叉树相关技巧
- 【回溯算法】回溯,从入门到入土,七道试题精选、精讲、精练
- 数据结构练手小项目(AVL树、哈希表、循环链表、MySQL数据库)
- 【LeetCode】每日一题(8.2)二叉树展开为链表
- 【小技巧】argc和argv的用法
- 全面分析redis持久化机制