理解jQuery对象$
来源:互联网 发布:淘宝买到假货怎么办 编辑:程序博客网 时间:2024/04/24 16:50
前面的话
如果要比喻jQuery和原生javascript的关系,我个人认为是自动档和手动档汽车的区别。使用原生javascript,可以知道离合器以及档位的作用;而使用jQuery,则把离合器和手动档位封装到函数,直接前进、后退或驻车即可。所以,熟练使用原生javascript,再去使用jQuery是一个很自然的步骤。从本文开始,将陆续介绍jQuery的相关内容,并给出相关的原生javascript实现。接下来,将详细介绍jQuery对象$
$对象
说起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]);//trueconsole.log(document === $(document).get(0));//true
共存
如果jQuery对象和DOM对象指向同一对象,绑定不同函数,则函数会按照顺序依次执行
//先弹出0,再弹出1document.onclick = function(){ alert(0);}$(document).click(function(){ alert(1);});
不报错
如果使用DOM对象,为不存在的DOM对象设置样式会报错
//Uncaught TypeError: Cannot read property 'style' of nulldocument.getElementById('test').style.color = 'red';
而使用jQuery对象,为不存在的jQuery对象设置样式不会报错
$('#test').css('color','red');
判断存在
一般地,DOM对象在使用之前需要判断存在,防止出错
if(document.getElementById('#test')){ document.getElementById('#test').style.color = 'red';}
对于jQuery对象来说,因为$()获取到的永远是对象,即使网页上没有该元素。所以不能采用下面方式判断
if($(#test)){ //}
应该根据获取到元素的长度来判断
if($(#test).length){ //}
或者转换成DOM对象来判断
if($(#test)[0]){ //}
最后
最后要提一下jQuery的版本问题。jQuery从2.0版本开始不再支持IE8-浏览器,且去掉了一些过时的API,从而使体积更小,运行速率更高。所以,如果有兼容IE8-浏览器的需求,需要使用jQuery1.*版本
- 理解JQuery对象$.html
- 理解jQuery对象$
- Jquery延迟对象的理解
- 对jQuery对象的理解
- 理解jQuery解析JSON数据对象原理
- jquery中拖动对象的理解
- 理解jquery对象和DOM对象的区别
- 深刻理解jquery对象和普通对象的区别
- DOM对象与jQuery对象的理解与分析
- 【JQuery学习笔记一】理解JQuery对象含义和JQuery选择器的使用!
- 【js与jquery】javascript中对象的理解
- jquery对象的position和offset方法理解
- jquery中事件对象、事件处理函数的简单理解
- jQuery源码分析以及从jQuery对象创建的角度理解extend方法的原理
- DOM对象和jQuery对象的理解及它们之间的相互转换
- JQuery对象可以理解为有多个Js对象组成的数组
- 通过jquery获取input的value问题--理解JQuery对象和JS:DOM对象区别与联系
- 对象理解...
- openCV学习笔记 (六) : 改变图像的对比度和亮度
- brpop read error on connection
- ELK 之 Logstash
- exec函数族
- ResNet论文笔记
- 理解jQuery对象$
- javax.servlet.http.HttpServletRequest.isAsyncStarted()Z
- opencv的swift实现
- 53. Maximum Subarray
- 如何使用AMP与WordPress插件
- Ros<一个空格惹的祸>
- Maven+SSM整合搭建
- NodeJs 入门demo
- 2017.12.20 第十天-继续优化界面