深入浅析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 选择器 xpath 语法应用
May 13 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
js处理表格对table进行修饰
May 26 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
js实现省市级联效果分享
Aug 10 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
vue项目出现页面空白的解决方案
Oct 31 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简单系统查询模块代码打包下载
2008/06/07 PHP
PHP基础学习小结
2011/04/17 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
C++是不是类型安全的
2014/02/18 面试题
致400米运动员广播稿
2014/02/07 职场文书
党支部公开承诺书
2014/03/28 职场文书
协议书的格式
2014/04/23 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书