BOM、定时器、jQuery基础

Day41 BOM、定时器、jQuery基础

1. BOM
   1.1 BOM概述
   BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
   我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，
   比如：刷新浏览器、后退、前进、在浏览器中输入URL等
   1.2 BOM顶级对象
   window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window注释：window下一个特殊的属性 window.name
   1.3 对话框
   alert() 警告框
   prompt() 对话框 返回输入内容
   confirm() 确认框 返回true/false
   

1.4 Onload
onload事件
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

1.5Location对象
了解

http://localhost:52330/_02_location.html#2

1.6 History对象

先打开A页面进行跳转,然后会跳转到B页面,通过B页面的后退按钮,即可回到A页面,然后A页面中前进按钮,再次回到B页面

1.7 Navigator对象

2. 定时器

2.1 setTimeout
只执行一次。
方法用于在指定的毫秒数后调用函数或计算表达式。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想重复执行可以使用 setInterval() 方法。
提示： 使用 clearTimeout() 方法来阻止函数的执行。
参数：param1回调函数，param2时间
返回值: 返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行

2.2 setInterval
循环执行
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInteval()
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
//定时器
//参数1:函数
//参数2:时间—毫秒—1000毫秒–1秒
//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数…
//返回值就是定时器的id值

3. jQuery
   3.1 JS和jQuery对比

js: 1、入口函数只有一个，window.onload
2、浏览器兼容性：非常令人头疼，比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器
3、DOM错综复杂，实现简单的效果很麻烦
4、代码容错性差，出错后导致后面的代码不执行
jQuery: 1、市场占有率稳步上升，代码比较少，功能强大
2、DOM比较强大，事件处理，完全解决了浏览器的兼容性问题
3、ajax操作（比较好）
3.2 概述

3.3 引入

3.4 语法
3.4.1 基础语法

1、美元符号定义 jQuery
2、选择符（selector）“查询"和"查找” HTML 元素
3、jQuery 的 action() 执行对元素的操作。

$是什么其实$就是一个函数：$();参数不一样，功能不一样
$常用的几种情况：

3.4.2 入口函数

1.$(document).ready()

执行时机：等DOM树加载完毕后就能执行

编写个数：$(document).ready()可写N个

简写：$(function(){})

2.window.onload

执行时机：等网页中所有的资源加载完毕后（包括图片、flash、音频、视频），才能执行

编写个数：window.onload()一个

3.5 选择器
3.5.1 是什么
1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
2、jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
4、jQuery 中所有选择器都以美元符号开头：$()。
3.5.2 基础/层级选择器

总结 : 和CSS选择器的语法是一致的

3.5.3 过滤选择器
3.5.4 过滤选择器

总结 : 都加 : 冒号

3.5.5 筛选选择器

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

3.6 事件
3.6.1 是什么
根据用户对页面的操作,做出不同的响应措施
3.6.2 语法

3.7 CSS函数
3.7.1 是什么
用于设置单个、多个、获取 CSS属性
3.7.2 语法

3.8 Class操作
3.8.1 添加class
addClass(值) : 用于对HTML标签添加某个class值

3.8.2 删除class
removeClass(值) : 删除某个class值

3.8.3 切换class
toggleClass(值) : 如果该对象有这个class值就删除,否则就添加

3.8.4 Index()
Index() : 返回该对象在jQuery对象集中的下标索引

3.8.5 案例