深入浅析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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
DOM精简教程
Oct 03 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
聊聊鉴权那些事(推荐)
Aug 22 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的静态成员函数效率更高的原因
2014/06/13 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
ajax异步请求详解
2017/01/06 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
python中模块查找的原理与方法详解
2017/08/11 Python
python中的闭包函数
2018/02/09 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python 遍历pd.Series的index和value
2019/11/26 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
.NET概念性的面试题
2012/02/29 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
退学证明范本3篇
2014/10/29 职场文书
年会邀请函范文
2015/01/30 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python