深入浅析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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 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合并数组+与array_merge的区别分析
2010/08/01 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
详解php中反射的应用
2016/03/15 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python内置函数reversed()用法分析
2018/03/20 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python中安装django模块的方法
2020/03/12 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
电气自动化个人求职信范文
2014/02/03 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
网吧温馨提示
2015/07/17 职场文书
公司与个人合作协议书
2016/03/19 职场文书
Django如何与Ajax交互
2021/04/29 Python
mysql主从复制的实现步骤
2021/10/24 MySQL
Go语言特点及基本数据类型使用详解
2022/03/21 Golang