深入浅析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 相关文章推荐
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
jQuery事件详解
Feb 23 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
微信小程序select下拉框实现源码
Nov 08 Javascript
JS实现纸牌发牌动画
Jan 19 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
php绘制一条弧线的方法
2015/01/24 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
详解javascript中的babel到底是什么
2018/06/21 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python中字符串类型json操作的注意事项
2017/05/02 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
大一学生的职业生涯规划书范文
2014/01/19 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
2014中考励志标语
2014/06/05 职场文书
记账会计岗位职责
2014/06/16 职场文书
食品安全演讲稿
2014/09/01 职场文书
创建文明城市倡议书
2015/04/28 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python