深入浅析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 数组以及json元素的添加删除
Jun 26 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
Ant Design的Table组件去除
Oct 24 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php记录日志的实现代码
2011/08/08 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
Python之父谈Python的未来形式
2016/07/01 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
利用python绘制正态分布曲线
2021/01/04 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
全球最大的游戏市场:G2A
2018/07/05 全球购物
运动会闭幕式解说词
2014/02/21 职场文书
工地安全质量标语
2014/06/07 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
特岗教师个人总结
2015/02/10 职场文书
简历自我评价优缺点
2015/03/11 职场文书
活动经费申请报告
2015/05/15 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
MySQL创建管理子分区
2022/04/13 MySQL