深入浅析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实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
javascript 动态创建表格
Jan 08 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 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
测试你的JS的掌握程度的代码
2009/12/09 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
实现高性能javascript的注意事项
2019/05/27 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
python中defaultdict的用法详解
2017/06/07 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python的help函数如何使用
2020/06/11 Python
python实现经纬度采样的示例代码
2020/12/10 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
小学优秀班干部事迹材料
2014/05/25 职场文书
青年文明号口号
2014/06/17 职场文书
给上级领导的感谢信
2015/01/22 职场文书
小学语文教学反思范文
2016/03/03 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers