深入浅析jQuery对象$.html


Posted in Javascript onAugust 22, 2016

$对象

说起jQuery,最明显的标志,毫无疑问,就是, ,其实是jquery的简写。而使用$()包装的对象就是jQuery对象

与jQuery对象相对应的就是DOM对象,DOM对象其实就是DOM元素节点对象

如果直接写document,则指的是document的DOM元素对象

document.onclick = function(){
alert('dom');
}

而如果用()包括起来,如 ()包括起来,如(document),是jQuery(document)的简写形式,则指的是jQuery对象

<script src="jquery-3.1.0.js"></script> 
<script>
console.log(jQuery(document));//[document]
console.log($(document));//[document]
console.log(document);//#document
</script>

[注意]jQuery对象无法使用DOM对象的方法,DOM对象也无法使用jQuery对象的方法

<script src="jquery-3.1.0.js"></script> 
<script>
//无反应
$(document).onclick = function(){
alert(0);
};
//Uncaught TypeError: document.click is not a function
document.click(function(){
alert(1);
});
</script>

转换

【1】DOM转jQuery对象

对于一个jQuery对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象

【2】jQuery转DOM对象

jQuery是一个类数组对象,可以通过[index]或get(index)的方法得到相应的DOM对象

console.log(document === $(document)[0]);//true
console.log(document === $(document).get(0));//true

 共存

如果jQuery对象和DOM对象指向同一对象,绑定不同函数,则函数会按照顺序依次执行

//先弹出0,再弹出1
document.onclick = function(){
alert(0);
}
$(document).click(function(){
alert(1);
});

以上所述是小编给大家介绍的jQuery对象$.html,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
如何提高数据访问速度
Dec 26 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 #Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 #Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 #Javascript
JavaScript代码里的判断小结
Aug 22 #Javascript
angularjs 源码解析之scope
Aug 22 #Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 #Javascript
js严格模式总结(分享)
Aug 22 #Javascript
You might like
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
Django验证码的生成与使用示例
2017/05/20 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python 实现倒排索引的方法
2018/12/25 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
python对execl 处理操作代码
2020/06/22 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
村党支部换届选举方案
2014/05/02 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
python实现学员管理系统(面向对象版)
2022/06/05 Python