深入浅析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 相关文章推荐
JS自动缩小超出大小的图片
Oct 12 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
基于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
使用数据库保存session的方法
2006/10/09 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Python对列表中的各项进行关联详解
2017/08/15 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python版百度语音识别功能
2019/07/09 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
python如何建立全零数组
2020/07/19 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
2014年学校安全工作总结
2014/11/13 职场文书
食堂管理制度范本
2015/08/04 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python