1 BOM（浏览器对象模型）
BOM 提供了独立于内容，可以与浏览器窗口进行互动的对象结构
对象层级：
1.1 BOM的作用
- 弹出新的浏览器窗口
- 移动和关闭窗口以及调整窗口大小
- 页面的前进和后退
1.2 常用属性
history 关于客户访问过的URL信息
location 当前的URL信息
// 使用语法
window.属性名 = "属性值";
window.location = "http://www.baidu.com";
2.3 常用方法
| 名称 | 描述 |
|---|---|
| prompt() | 提示用户输入的对话框 |
| alert() | 显示一个带有提示信息和确定按钮的警告框 |
| confirm() | 显示一个带有提示信息 确定 取消按钮的对话框 |
| close() | 关闭浏览器窗口 |
| open() | 打开一个新的浏览器窗口 加载给定的URL所指定的地址 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval() | 按照指定的周期（毫秒） 来调用函数或表达式 |
alert()、prompt()、confirm()的区别
alert 有一个参数，仅起警告作用，无返回值，不改变脚本
prompt 有两个参数，收集用户关于特定问题的信息反馈，有确认和取消按钮，有返回值
confirm 一个参数 ，对用户的操作进行二次确认，有确定和取消按钮，有返回值
2.4 History对象
常用方法
| 名称 | 描述 |
|---|---|
| back() | 加载history对象列表中的前一个url |
| forward（） | 加载history对象列表中的下一个url |
| go() | 加载history对象列表中的某个具体的url |
histiry.back()------等价于----history.go(-1) 就是浏览器的后退
history.forward()-----等价于-----history.go(1) 就是浏览器的前进
<a href="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href="javascript:location.reload()">刷新本页 （重新加载当前页面的url）</a>
//控制超链接a不跳转页面 取消的默认行为
href="javascript:void(0)"(推荐)
href="#"
2.5 定时器
setTimeout
setInterval
// 在指定的时间（3000毫秒）之后 执行函数 而且只执行一次
setTimeout("alert('3 seconds')",3000);
// 在指定的时间（3000毫秒）之后 执行函数 会循环执行 两次执行之间的时间间隔为（3000毫秒）
setInterval("alert('3 seconds')",3000);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function getTime(){
var now = new Date();//获取系统当前时间
var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds()
document.getElementsByTagName("h1")[0].innerHTML ="现在是北京时间：" +h+":"+m+":"+s;
}
// 设定定时器并开始计时
var clock = setInterval("getTime()",1000);
// 如果定时器是setTimeout定时器 则取消定时器使用clearTimeout();
function endTime(){
clearInterval(clock);
}
</script>
</head>
<body>
<input type="button" value="结束" onclick="endTime()">
<h1></h1>
</body>
</html>
3 JQuery
是目前最流行的JavaScript类库，是对JavaScript对象和函数的封装
版本：压缩版（实用环境）未压缩版（开发环境）
各版本的差异：
JQuery 1.X 兼容性强，兼容IE 5/6/7/8
JQuery 2.X 不再支持IE 5/6/7/8
JQuery 3.X 全面支持HTML5和CSS3
JQuery 2.0以上版本都不再支持IE 6/7/8
3.1 JQuery的使用
第一种：使用网络资源
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
第二种：使用本地资源
3.2 JQuery的作用
- 访问和操作DOM元素
- 控制页面
- 对页面事件进行处理
- 扩展新的JQuery插件
- 与AJAX技术完美结合
3.3 优势
- 体积小，压缩后小于100k
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 可以使用隐式迭代简化编程
- 插件丰富
JQuery的入口函数
$(document).ready(function(){
$("li:even").css("background-color","#e8f0f2");
$("li:odd").css("background-color","red");
})
// 简化写法
$(function(){// window.οnlοad= function(){}
$("li:even").css("background-color","#e8f0f2");
$("li:odd").css("background-color","red");
})
3.4 $(document).ready 和 window.onload 的区别
| window.onload | $(document).ready | |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容（图片 视频 flash等）加载完毕后才能执行 | 网页中所有的DOM文档结构绘制完毕即刻执行 |
| 编写的个数 | 在一个页面中不能同时编写多个 | 同一页面中可以同时编写多个 |
| 简化形式 | 无 | $(function(){ }) |
3.5 语法结构
$(选择器).action()
工厂函数$()：将DOM对象转换为JQuery对象
选择器selector：获取需要操作的DOM元素
方法action()：JQuery提供的方法，包括时间处理方法
3.6 页面元素的操作
addClass() 给元素添加样式
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
// 使用ID选择器，#idName
// 添加的样式必须在css中存在
$("#apple").addClass("red");
})
</script>
css() 给元素设置样式
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
// 使用ID选择器
$("#apple").addClass("red");
//元素选择器
$("li").mouseover(function(){
$(this).css({"background":"green","color":"yellow"});
})
$("li").mouseout(function(){
$(this).css({"background":"#fff","color":"#000"});
})
})
</script>
show()和hide() 设置元素的显示和隐藏
$(function(){
//同时给li绑定鼠标进入和鼠标离开事件 链式编程
$("li").mouseover(function(){
$(this).css({"background":"orange"})
$(this).children("div").show();//显示div
}).mouseout(function(){
$(this).css({"background":"rgb(222,0,0)"})
$(this).children("div").hide();//隐藏div
})
3.7 代码风格
链式操作 ：
//多一个对象进行多重操作，并将操作结果返回给该对象
$("h2").css("background-color","#CCFFFF").next().show();
隐式迭代：
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
// 隐式迭代
$("li").css({"font-weight":"bold","color":"red"});
})
</script>
3.8 DOM对象和JQuery对象
DOM对象就是直接使用JS获取的结点对象
var li = document.getElementById("title")
JQuery对象 使用JQuery包装DOM对象后产生的对象 就是JQuery对象 它能够是用JQuery的方法
var li = document.getElementById("title");
var $li = $(li) // 将dom对象转换为JQuery对象 jquer对象命名一般以$开头
var li = document.getElementById("title")innerHTML;
$(li).html(); // 相同
在事件中 经常会使用$(this) this就是触发事件的对象
JQuery对象转换为DOM对象
JQuery对象是一个类似于数组的对象，可以通过索引[index]方法得到对应的DOM对象，除此之外 还可以使用JQuery提供的get方法来获取的相应的DOM对象
var $li = $("li");
var firstLi = $li[0];// 得到了一个DOM对象
var firstLi = $li.get(0);// 得到了一个DOM对象