window常用属性:

History:有关客户访问过的URL的信息

Location: 有关当前url的信息

常用方法:

Confirm()将弹出一个确认对话框

open()在页面上弹出一个新的浏览器

Close()用于关闭窗口

history对象

Back() 加载 history 对象列表中前一个URL

Forward()加载history对象列表中的后一个URL

go()加载history对象列表中的某个具体URL

location对象

属性:host 设置或返回主机名和当前URL的端口

Hostname 设置或返回当前URL的主机名

Href 设置或反回完整URL

方法:

reload() 重新加载当前文档

Replace() 用新的文档替换当前文档

document对象

属性:referrer 返回载入当前文档的URL

URL 返回当前文档的URL

方法:getElementById()

getElementsByIName()

getElementByTagIName()

Date对象:

方法:getDate()返回Data对象的一个月中的每一天:值为1-31

getDay()返回Data对象的星期中的每一天:值为0-6

getHours()返回Data对象的小时数:值为0-23

getMinutes()返回Data对象的分钟数:值为0-59

getSeconds()返回Data对象的秒数:值为0-59

getMonth()返回Data对象的月份:值为0-11

getFullYear()返回Data对象的年份:值为4位数

getTime()返回某一时刻 以来的毫秒数

Math对象:

方法:ceil() 对数进行上舍入

Floor() 对数进行下舍入

Round()把数四舍五入为最接近的数

Random()返回0-1中的随机数

定时函数:

setTimeout(“调用函数名称”,”等待的毫秒数”)

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>

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")[];
//通过jQuery提供的方法获取页面中所有class为box的标签
var ojQueryObj = $("div");
//DOM -> jQuery
console.log($(oDiv).html());
//jQuery -> DOM
console.log(ojQueryObj.get());
console.log(ojQueryObj[]);
</script>
</body>

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

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

    第二章 jQuery框架使用准备 2.1 jQuery框架和JavaScript加载模式对比 jQuery框架的加载模式 <script> window.onload = function ...

  2. jQuery系列 第六章 jQuery框架事件处理

    第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...

  3. jQuery系列 第五章 jQuery框架动画特效

    第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...

  4. jQuery系列 第三章 jQuery框架操作CSS

    第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...

  5. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

  6. jQuery系列 第七章 jQuery框架DOM操作

    第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...

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

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

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

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

  9. 第二章 Rest框架 Nancy

    正如你看到的,Nancy有两个主要用途. 其中第一项是作为一种通用的基于 REST 框架,可替代 ASP.NET Web API 或其他Rest工具包. 默认情况下,Nancy提供一流的路由和内容协商 ...

随机推荐

  1. hadoop之hive集合数据类型

    除了string,boolean,date等基本数据类型之外,hive还支持三种高级数据类型: 1.ARRAY ARRAY类型是由一系列相同数据类型的元素组成,这些元素可以通过下标来访问.比如有一个A ...

  2. l论文查重平台

    推荐大家一个靠谱的论文检测平台.重复的部分有详细出处以及具体修改意见,能直接在文章上做修改,全部改完一键下载就搞定了.怕麻烦的话,还能用它自带的降重功能.哦对了,他们现在正在做毕业季活动, 赠送很多免 ...

  3. 拉格朗日乘子法 - KKT条件 - 对偶问题

    接下来准备写支持向量机,然而支持向量机和其他算法相比牵涉较多的数学知识,其中首当其冲的就是标题中的拉格朗日乘子法.KKT条件和对偶问题,所以本篇先作个铺垫. 大部分机器学习算法最后都可归结为最优化问题 ...

  4. memcached--delete--replace--set--get--incr--decr--stats

    memcached命令 1.get  key 来获取在内存中的值 get name 2.delete  key 删除在内存中的值 delete name 3.replace  key flag exp ...

  5. Java学习笔记——I/O流常用类之间的继承关系及构造方法

    朝辞白帝彩云间,千里江陵一日还. 两岸猿声啼不住,轻舟已过万重山. ——早发白帝城 总结一下有哪些I/O流: 输入流方法主要是read()和close(),输出流方法主要是write().flush( ...

  6. JavaScript 基础知识 表达式和运算符

    表达式的概念:将同类型的数据(如常量.变量.函数等),用运算符号按一定的规则连起来的.有意义的式子称为表达式 一.原始表达式 最简单的表达式,是表达式的最小单位.JavaScript中的原始表达式包含 ...

  7. leadcode的Hot100系列--62. 不同路径--简单的动态规划

    题目比较清晰,简单来说就是: A B C D E F G H I J K L 只能往右或者往下,从A到L,能有几种走法. 这里使用动态规划的方法来做一下. 动态规划最重要的就是动态方程,这里简单说下这 ...

  8. HDU 1565:方格取数(1)(最大点权独立集)***

    http://acm.hdu.edu.cn/showproblem.php?pid=1565 题意:中文. 思路:一个棋盘,要使得相邻的点不能同时选,问最大和是多少,这个问题就是最大点权独立集. 可以 ...

  9. Django前端HTML通过JS实现表格可编辑,动态添加行,回车完成新建文件夹

    功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行:单击页面的新增行,使单元格td变成可编辑状态:输入内容后,当单元格失去焦点时,保存输入的内容:回车后通过AJAX提交后台完成新建文件夹. ...

  10. 关于过两级mux的时序约束的添加(一个非常经典的时序约束问题)

    非常开心自己的微信公众号: <数字集成电路设计及EDA教程> 关注者超过了1700 里面主要讲解数字IC前端.后端.DFT.低功耗设计以及验证等相关知识,并且讲解了其中用到的各种EDA工具 ...