第二章 jQuery框架使用准备

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

jQuery框架的加载模式

 <script>
window.onload = function () {
console.log("window.onload——1")
};
window.onload = function () {
console.log("window.onload——2")
}
</script>

打印结果:window.onload——2

JavaScript的加载模式

 <script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function () {
console.log("$().ready——1")
});
$(document).ready(function () {
console.log("ready——2")
})
</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对象换个其他的名字。

代码示例

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

代码说明

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

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

 <script>
//在$符号被定义之前使用noConflict方法来重新设置名称
var jq = $.noConflict();
// $符号可能被定义为字符串或其他数据
var $ = "文顶顶";
//解决冲突之后,使用新设置的名称来操作
jq(function () {
console.log("DOM加载完毕");
})
</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实例。

代码示例

 <body>
<div class="box">我是div</div>
<script src="jquery-3.2.1.js"></script>
<script>
//通过DOM提供的api获取页面中所有class为box的标签
var oDiv = document.getElementsByClassName("box");
console.log(oDiv);
//通过jQuery提供的方法获取页面中所有class为box的标签
var ojQueryObj = $("div");
console.log(ojQueryObj);
</script>
</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]

代码示例

 <body>
<div class="box">我是div</div>
<script src="jquery-3.1.1.js"></script>
<script>
//通过DOM提供的api获取页面中所有class为box的标签
var oDiv = document.getElementsByClassName("box")[0];
//通过jQuery提供的方法获取页面中所有class为box的标签
var ojQueryObj = $("div");
//DOM -> jQuery
console.log($(oDiv).html());
//jQuery -> DOM
console.log(ojQueryObj.get(0));
console.log(ojQueryObj[0]);
</script>
</body>

jQuery系列 第二章 jQuery框架使用准备的更多相关文章

  1. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  2. Spring学习指南-第二章-Spring框架基础(完)

    第二章 Spring框架基础 面向接口编程的设计方法 ​ 在上一章中,我们看到了一个依赖于其他类的POJO类包含了对其依赖项的具体类的引用.例如,FixedDepositController 类包含 ...

  3. 第二章 jQuery框架使用准备

    window常用属性: History:有关客户访问过的URL的信息 Location: 有关当前url的信息 常用方法: Confirm()将弹出一个确认对话框 open()在页面上弹出一个新的浏览 ...

  4. ActiveMQ 快速入门教程系列 第二章 发布-订阅者模式实现

    第二章我们会介绍怎样实现一个发布者对多个订阅者的消息传递 Topic和queue的最大区别在于topic是以广播的形式,通知所有在线监听的客户端有新的消息,没有监听的客户端将收不到消息:而queue则 ...

  5. jQuery系列 第八章 jQuery框架Ajax模块

    第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...

  6. 第二章 jQuery数组和字符串

    章节内容: 1.利用数组在列表中显示名字 (1)利用数组显示名字列表--join()方法 (2)从数组中获取名字并追加到有序列表--each()方法 (3)利用HTML元素创建数组和计算数组长度--g ...

  7. 第二章 jQuery选择器

    选择器是行为与文档内容之间的纽带,其目的是能轻松的找到文档中的元素. jQuery中的选择器继承了CSS的风格.利用jQuery选择器,可以非常便捷快速地找出特定的DOM元素,然后给它们添加相应的行为 ...

  8. 第二章 jquery的dom操作

    三个方面    dom核心,html-dom和css-dom 一. 1.dom core核心 document.getElementsByTagName("form")  获取表单 ...

  9. jQuery 第六章 jQuery在Ajax应用

    1.本章目标 ajax 2.ajax 异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互 用户体验好 地图,前台验证,表单提交,修改,查询等等 原生的js和ajax packag ...

随机推荐

  1. 线程池的submit和execute方法区别

    线程池中的execute方法大家都不陌生,即开启线程执行池中的任务.还有一个方法submit也可以做到,它的功能是提交指定的任务去执行并且返回Future对象,即执行的结果.下面简要介绍一下两者的三个 ...

  2. apache实现301永久性重定向代码

    301重定向(301 redirect)又叫301代表永久性转移(Permanently Moved),将各种网络请求重新定个方向转到其它位置,是网页更改地址后对搜索引擎友好的最好方法,只要不是暂时搬 ...

  3. php和apache工作原理?

    1.CGI和FastCGI是apache处理php脚本的其中两种工作模式,还有ISAPI,SAPI等 2.而php-fpm并不是一种工作模式,而是一个PHP在FastCGI模式运行下的进程管理器,全称 ...

  4. shell命令总结一

    简述:这篇总结是在360企业安全实习第一周学到的. Linux中的 2>&1 .if文件命令 .tr .$0等相关参数含义的用法 1. 2>&1 command>/d ...

  5. BLESS学习笔记

    BLESS全称:Bloom-filter-based Error Correction Solution for High-throughput Sequencing Reads,即基于布隆过滤器的高 ...

  6. spring框架学习笔记5:SpringAOP示例

    1.导包: 导入spring中的这两个包 再导入其他包(网上下载): 2.准备目标对象: package service; public class UserServiceImpl implement ...

  7. EM算法的直观描述

    解决含有隐变量的问题有三种方法,其中第三种方法就是通常所说的em算法.下面以统计学习方法中给出的三硬币问题为例来分别描述这三种方法.(a,b,c三硬币抛出来为正的概率分别为pai,p,q,每轮抛硬币先 ...

  8. C语言第一次博客作业——输入输出格式

    一.PTA实验作业 注意:本次PTA实验共有8个题目,在博客上只要贴:4个题目就可以,分别为: 题目1:7-3 温度转换 (1分) 题目2:7-4 将x的平方赋值给y (2分) 题目3:7-6 是不是 ...

  9. Beta 凡事预则立

    写在Beta冲刺前 关于组长是否重选的议题和结论 总体结论 组长无需更换 队内无人替代 理由 当前组长能够较好的号召和组织团队成员进行工作 当前组长能够对项目有合理的规划 当前组长被大家一致认可可以继 ...

  10. C语言博客作业—字符数组

    一.PTA实验作业 题目1:字符串转换成十进制整数 1. 本题PTA提交列表 2. 设计思路 (1)定义i为循环变量,number用于存放每一次转化的结果,flag用于判断是否为负数,p用于修改结果的 ...