理解jQuery对象$.html
如果要比喻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 functiondocument.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 null document.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]){ //}
转载于:https://blog.51cto.com/jsw55667/1932635
理解jQuery对象$.html相关推荐
- 深入理解jQuery中的Deferred
深入理解jQuery中的Deferred 引入 1 在开发的过程中,我们经常遇到某些耗时很长的javascript操作,并且伴随着大量的异步. 2 比如我们有一个ajax的操作,这个ajax从发出 ...
- 深入理解jQuery插件开发【转】
如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个使用简便的库.jQuery可能使用起来很简单,但是它仍然有一些奇怪的地方,对它基本功能和概念不熟悉的人可能会难以掌握.但是不用担心,我下面已 ...
- 如何判断一个对象是否为jquery对象
来源:http://www.cnblogs.com/conis/archive/2010/03/20/1720385.html 在写一个递归函数输入出JSON对象的时候,其中JSON数据中包括jQue ...
- 深入理解jQuery插件开发(转)
转自:http://blog.jobbole.com/30550/ 如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个使用简便的库.jQuery可能使用起来很简单,但是它仍然有一些奇怪的地方 ...
- 理解jquery的$.extend()、$.fn和$.fn.extend()
jQuery为开发插件提拱了两个方法,分别是:· jQuery.fn.extend();或者$.fn.extend jQuery.extend();或者$.extend jQuery.fn ($.fn ...
- 【08】jQuery:01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
- jquery 1.7.2源码解析(二)构造jquery对象
构造jquery对象 jQuery对象是一个类数组对象. 一)构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数:检查该字符 ...
- java ajax datatype_理解jquery ajax中的datatype属性选项值
jquery中ajax的dataType属性用于指定服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断,如果datatype选项不填写的话,会将返回的数据当成字 ...
- jquery jQuery的入口函数 $函数 dom对象和jquery对象
文章目录 jquery jQuery的入口函数 $函数 dom对象和jquery对象 jQuery的入口函数 视频 代码 $函数 视频 代码 dom对象和jquery对象 视频 代码 jquery j ...
最新文章
- 文巾解题 189. 旋转数组
- 后处理编辑修改_NX后处理打开报错处理方法
- 百炼OJ:2750:鸡兔同笼
- hihocoder-Week243-hiho字符串
- 双稳态继电器工作原理图_固态继电器只有单一的作用吗?带你了解不一样的固态继电器...
- duration java_Java Duration类| ofMinutes()方法与示例
- 删除Ubuntu旧内核的几种方法,这下grub菜单看起来清爽多了!
- ffdshow 源代码分析1 : 整体结构
- 2018年省赛热身赛第4场
- 求求你,别再叫我 X 工了!!!
- 微型计算机原理及应用 阶段作业,微机原理及应用第三次作业
- 喵喵玩 v3.8.5
- 魔术表演的核心秘密(六)——从障眼法到错误引导和案例分享
- Newt Scamander的恐惧
- 有关chromium浏览器 ios 读证书 验证证书 (注没有找到方法),在这里做一下笔记
- 力扣每日一题2021-12-24中等题:吃苹果的最大数目
- java打印漏斗图案_寒假作业1打印漏斗
- 亚马逊云科技云创计划携手 SegmentFault 思否,成就 AI 探路者
- 字符串1-3 2020.12.21
- Mindmanager2019官方中文版