开发者社区> 文顶顶.> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery系列 第二章 jQuery框架使用准备

简介: 第二章 jQuery框架使用准备     2.1 jQuery框架和JavaScript加载模式对比 jQuery框架的加载模式 1 2 window.onload = function () { 3 console.
+关注继续查看

第二章 jQuery框架使用准备

    2.1 jQuery框架和JavaScript加载模式对比

jQuery框架的加载模式

1 <script>
2     window.onload = function () {
3         console.log("window.onload——1")
4     };
5     window.onload = function () {
6         console.log("window.onload——2")
7     }
8 </script>

打印结果:window.onload——2

JavaScript的加载模式

1 <script src="jquery-3.2.1.js"></script>
2 <script>
3     $(document).ready(function () {
4         console.log("$().ready——1")
5     });
6     $(document).ready(function () {
7         console.log("ready——2")
8     })
9 </script>

    打印结果:ready——1 ready——2

两种加载模式对比

① 监听时机不相同
 
window.onload方法需要等所有的资源(CSS\JS\图片等)都加载完毕后执行包裹代码。
jQuery框架的ready方法等DOM结构加载完毕后执行包裹代码。
 
② 执行次数不相同
 
window.onload方法,N次只会执行一次,后面的会把前面的覆盖。
jQuery框架的ready方法,N次会执行N次,不存在覆盖的问题。
 
③ 简写方式不相同
  
jQuery框架中的加载方式可以简写为:
$().ready(function () {})
$(function () {})

2.2 jQuery框架解决冲突

在实际的开发中,我们的项目中可能需要用到并引入多个第三方框架,如果这些框架本身在设计的时候,没有命名空间的约束,那么库与库之间发生冲突将在所难免。

jQuery框架在设计的使用,使用闭包的形式在所有的代码都封装到一个立即调用函数中,对外仅仅提供了美元符号和jQuery作为框架的入口。

jQuery当中所有的操作都是使用美元符号或者是jQuery对象进行的。假如,我们在使用jQuery框架之前已经在页面的代码中用到了美元符号,那么这种情况下,我们再按照常规的方式使用jQuery就可能会发生错误。

为了避免这种情况的发生,jQuery框架使用noConflict方法,可以在使用之前把美元符号替换成其它的标识符,相当于是给jQuery对象换个其他的名字。

代码示例

1 <script src="jquery-3.1.1.js"></script>
2 <script>
3     var $ = "文顶顶";
4     $(function () {
5         console.log("DOM加载完毕");
6     })
7 </script>

代码说明

如果直接执行上面的代码,那么会报错。
报错信息:Uncaught TypeError: $ is not a function
报错原因:美元符号被定义为字符串,jQuery框架中美元符号被覆盖。

解决冲突(给jQuery框架安排新的代言人)

 1 <script>
 2     //在$符号被定义之前使用noConflict方法来重新设置名称
 3     var jq = $.noConflict();
 4     // $符号可能被定义为字符串或其他数据
 5     var $ = "文顶顶";
 6     //解决冲突之后,使用新设置的名称来操作
 7     jq(function () {
 8         console.log("DOM加载完毕");
 9     })
10 </script>

2.3 jQuery对象和DOM对象的相互转换

DOM对象:每个HTML页面都是一个 DOM对象(Document Object Model,文本对象模型),通过传统的JavaScript方法访问页面中的元素,就是访问 DOM 对象。

jQuery对象:在 jQuery框架中,通过本身自带的方法获取页面元素的对象,称为 jQuery 对象 ;

备注其实jQuery本身只是个工厂函数,我们通常意义上所说的jQuery实例对象其实是jQuery的原型对象上面的init方法创建出来的实例对象。即 jQuery对象 = new jQuery.prototype.init() , 只是因为init方法和jQuery构造函数共用相同的原型对象,因此我们才会称init构造函数创建出来的对象为jQuery实例。

代码示例

 1 <body>
 2 <div class="box">我是div</div>
 3 <script src="jquery-3.2.1.js"></script>
 4 <script>
 5     //通过DOM提供的api获取页面中所有class为box的标签
 6     var oDiv = document.getElementsByClassName("box");
 7     console.log(oDiv);
 8     //通过jQuery提供的方法获取页面中所有class为box的标签
 9     var ojQueryObj = $("div");
10     console.log(ojQueryObj);
11 </script>
12 </body>

DOM对象和jQuery对象的转换

DOM对象可以理解为标签对象,我们在操作这些标签的时候,有很多标签自带的方法可以使用,如innerHTML、innerText属性,或者是appendChild方法等。

jQuery对象可以理解为jQuery初始化方法这个构造函数创建的实例化对象,因为它的原型对象为jQuery.prototype,因此所有的jQuery实例对象都可以访问jQuery原型对象上面的成员[属性或方法],如html、text方法等。

注意: DOM对象不能直接访问jQuery原型对象上面的成员,jQuery对象也不能直接访问标签对象上面的成员,如需访问则应该先进行转换。

DOM标签对象 -> jQuery实例对象 $(DOM标签对象)
jQuery实例对象 -> DOM标签对象 jQuery对象.get(index) | jQuery对象[index]

 

代码示例

 1 <body>
 2 <div class="box">我是div</div>
 3 <script src="jquery-3.1.1.js"></script>
 4 <script>
 5     //通过DOM提供的api获取页面中所有class为box的标签
 6     var oDiv = document.getElementsByClassName("box")[0];
 7     //通过jQuery提供的方法获取页面中所有class为box的标签
 8     var ojQueryObj = $("div");
 9     //DOM -> jQuery
10     console.log($(oDiv).html());
11     //jQuery -> DOM
12     console.log(ojQueryObj.get(0));
13     console.log(ojQueryObj[0]);
14 </script>
15 </body>

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【JQuery框架】五大选择器“全家桶”详解!!!
【JQuery框架】五大选择器“全家桶”详解!!!
70 0
jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎。它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选 择,而且不必担心浏览器的兼容性,写法更加简洁。
861 0
240个jquery插件(转)
http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/File upload Ajax File Upload.
1338 0
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1227 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1344 0
+关注
文顶顶.
JavaScript专家、技术讲师 关注前端开发和移动端开发
196
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载