深入浅析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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
基于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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php5 图片验证码实现代码
2009/12/11 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP钩子实现方法解析
2019/05/21 PHP
js中replace的用法总结
2013/12/27 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
动态创建按钮的JavaScript代码
2016/01/29 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python守护线程用法实例
2017/06/23 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
努比亚手机官网:nubia
2016/10/06 全球购物
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
实习教师自我鉴定
2013/12/09 职场文书
体育教师自荐信范文
2013/12/16 职场文书
上课说话检讨书大全
2014/01/22 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
打架检讨书
2015/01/27 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python