一、BOM模型
（一）BOM模型简介
浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
window是一个对象，是js中顶级对象，类似于java中object的
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
（二）window之定时器
定时器功能：秒表，闹铃，定时炸弹
-
周期性定时器：每间隔一定周期就会执行一次相同的操作，反复执行多次。
window.setInterval(function(){
console.log(“hello”);
},1000);参数1：需要执行的周期性的函数
参数2：每隔多长时间执行一次，单位是毫秒
注意：这个定时器，会返回一个number类型的数字 1
-
超时定时器（延时定时器）：延迟一段时间后执行操作，只执行一次就结束。
var id = window.setTimeout(function(){
console.log(“hello”);
document.write(id);
},3000);参数1：需要执行的周期性的函数
参数2：等待毫秒值后，执行1次
注意：这个定时器，会返回一个number类型的数字 1
3.清除定时器
window.clearInterval(id); 清除周期性定时器，函数的参数是设置定时器的返回值
window.clearTimeout(id);清除延时性定时器，函数的参数是设置定时器的返回值
4：定时器的不同写法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> //定义函数名，复用性强 var id = window.setInterval(show,1000); var id = window.setInterval("show()",1000); //匿名函数，一次性的 var id = window.setInterval(function(){ document.write("123<br />"); },1000); function show(){ document.write("123<br />"); } </script> </head> <body> </body> </html>
1、轮播图
需求：每隔一定的周期轮换显示下一张图片，当鼠标悬浮到图片上时停止轮换，鼠标离开后继续轮换。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//设置周期性的定时器
var id ;
//文档加载函数
window.onload = goon;
function goon(){
id = window.setInterval(changeImg,1000);
}
//改变图片
var count = 0;
function changeImg(){
count++;
//1:获取img元素
var img = document.getElementById("img");
//2:修改img的src属性
img.src = "img/"+count+".jpg";
//回到起始图片
if(count==4){
count=0;
}
}
//停止轮播
function stopImg(){
window.clearInterval(id);
}
</script>
</head>
<body>
<img onmouseover="stopImg()" onmouseout="goon()" src="img/1.jpg" id="img" width="400px" height="400px" >
</body>
</html>
2、定时弹广告
需求：默认情况下广告图片处于隐藏状态，页面加载后延迟5s显示广告图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#img{
margin-left:1020px;
margin-top: 350px;
display: none;
}
</style>
<script type="text/javascript">
window.onload= function(){
window.setTimeout(function(){
//让图片显示
document.getElementById("img").style.display = "inline-block";
},3000);
}
</script>
</head>
<body>
<a href="http://www.offcn.com"><img id="img" src="img/1.jpg" width="200px" height="200px" ></a>
</body>
</html>
3、显示系统时间
需求：每隔1秒显示一次系统时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
window.setInterval(function(){
//获取日期类型
var d = new Date();
//分别获取年月日，时分秒
var year = d.getFullYear();
var month = d.getMonth()+1;
var date = d.getDate();
var day = d.getDay();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var time = d.getMilliseconds();
var str = "今天是"+year+"年"+month+"月"+date+"日"+" 星期"+day+" "+hour+":"+minute+":"+second+" "+time;
document.getElementById("span1").innerText = str;
},1);
}
</script>
</head>
<body>
<span id="span1">
</span>
</body>
</html>
（三）window弹框
1、消息框：window.alert(“内容”);
function show1(){
window.alert("我是弹出框");
}
2、确认框：window.confirm(“提示内容“);
function show2(){
if(window.confirm("确认要离开此页面?")){
window.close();
};
}
3、接收框：window.prompt(“提示内容”,”默认值”);
function show3(){
var num = window.prompt("请输入一个数字",0);
alert(num)
}
注意：window可以省略不写
window的转换函数
window.eval(“字符串”)；将字符串准转为s代码，直接运行
window.parseInt(“字符串”) 将字符串准为整数
window.parseFloat(“字符串”) 将字符串转为小数
（四）window其他对象
1. location：表示当前地址栏对象
改变当前地址栏：location.href = “新的url地址”;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//location 当前地址栏对象
//alert(window.location);
//url: 协议+ip+端口+项目地址,
document.write(location.protocol+"<br />"); //协议
document.write(location.hostname+"<br />"); //ip
document.write(location.port+"<br />"); //端口号
document.write(location.pathname+"<br />"); //项目地址
function show(){
//js的动态跳转
location.href = "http://www.baidu.com";
}
</script>
</head>
<body>
<button type="button" onclick="show()">百度</button>
</body>
</html>
刷新页面 location.reload();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function show(){
//刷新页面
window.location.reload();
}
</script>
</head>
<body>
<button type="button" onclick="show()">刷新页面</button>
</body>
</html>
作用
1：框架的局部刷新
2：前后端交互，数据需要恢复初始值
JS动态改变title
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是标题</title>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").onclick =function(){
//动态的改变title值
window.document.title = new Date();
}
};
</script>
</head>
<body>
<button type="button" id="btn" >改变title</button>
</body>
</html>
2. history ：浏览器的历史记录对象
history.back() 后退一个页面
history.forward():前进一个页面
history.go(1):前进一个页面
history.go(-1):后退一个页面
3. screen：屏幕对象
元素居中案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
background-color: red;
border-radius: 50%;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<script type="text/javascript">
window.onload = function(){
//1:获取屏幕可用宽高
var width = screen.availWidth;
var height = screen.availHeight;
//获取div的宽高
var div = document.getElementById("div");
var dw = div.style.width;
var dh = div.style.height;
div.style.left = (width-parseInt(dw))/2+"px";
div.style.top = (height-parseInt(dh))/2+"px";
}
</script>
</head>
<body>
<div id="div" style="width: 200px; height: 200px;">
</div>
</body>
</html>
4. document:当前浏览器文档对象
document其实就是整个HTML页面
通过document对象，可以获取页面上的任何一个子对象
window–>document–>body–>div,p,span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function show(){
//window.document.bgColor = "#FF0000";
//window.document.body.bgColor = "#FF0000";
document.write(document.body.offsetWidth+"<br />"); //获取body的可用宽度
document.write(document.body.offsetHeight);//获取body的可用高度
}
</script>
</head>
<body>
<button type="button" onclick="show()">获取document对象</button>
</body>
</html>
二、jQuery基本介绍
（一）jQuery简介
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
特点：
1：快速，简洁
2：封装了js的原生代码，功能强大，代码量少
3：丰富的插件机制（特效插件）
4：兼容性强大（适用各大浏览器）
5：jquery是以函数的形式封装了所有的js代码
例如
window.οnclick= function(){}; js
document.getElementById(“id”).value js
$(对象).click(function(){ })
$(“id”).val();
（二）jQuery的使用步骤
1、下载jQuery库文件
2、使用jquery库文件
2.1：将jquery.js文件放在项目的js文件夹中
2.2：在html文件中引入jquery文件
3、jquery的基本语法
jquery的基本语法结构
1：jQuery.函数()
2: $.函数（）；
4、jQuery加载就绪函数
js的加载函数
window.onload = function(){}
jquery的加载函数
//jquery的加载函数1
jQuery(document).ready(function(){
console.log("jquery的加载函数1")
});
//jquery的加载函数2
$(document).ready(function(){
console.log("jquery的加载函数2");
});
//jquery的加载函数3
$(function(){
console.log("jquery的加载函数3");
});
js的加载函数和jquery的加载函数区别
js的加载函数只能执行一次，如果有多个加载函数，后面的会覆盖前面的加载函数
jquery的加载函数可以执行多次，不会覆盖
（三）DOM对象与jQuery对象
DOM对象：通过原生的js代码获取到的对象就是DOM对象。
jQuery对象：通过工厂函数jQuery()或$()对DOM对象进行包装后得到的就jQuery对象。
注意：js通过id获取的dom对象是一个html的对象
jquery获取的是object数组对象
二者之间可以相互转换：
DOM对象和jQuery对象所拥有的属性和函数不能混合调用。
转换方式：
DOM—jQuery: jQuery(DOM对象) $(DOM对象)
alert("原生的dom对象"+txt);
alert("转换后的jquery对象"+$(txt));
jQuery—DOM：jQuery对象[index] jQuery对象.get(index)
alert("jqueyr对象："+$txt);
alert("转换后的dom对象:"+$txt.get(0));
案例：通过DOM和jquery对象获取标签中的文本信息和文本框中的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function show(){
//js获取
var txt = document.getElementById("txt");
document.getElementById("span1").innerText = txt.value;
}
function show2(){
//jquery获取
$("#span1").text($("#txt").get(0).value);
}
</script>
</head>
<body>
<input type="text"id="txt" />
<button type="button" onclick="show()">dom获取</button>
<button type="button" onclick="show2()">jquery获取</button>
<span id="span1">
</span>
</body>
</html>
三、jQuery选择器
选择器作用：精确定位查询页面中的元素。
1、基本选择器
$("#id") id选择器
$(".class名") class选择器
$(“标签名”) 元素选择器
2、层级选择器
$(“父元素>子元素”) 匹配所有的子元素
$(“元素1+元素2”) 匹配相邻元素
$(“元素1 ~ 元素2”) 匹配和元素1同级的元素2
3、过滤选择器
$(元素:first) 获取第一行
$(元素:last) 获取最后一行
$(元素:even) 获取偶数行
$(元素:odd) 获取奇数行
4、属性选择器
console.log($("input[type=text]"))
console.log($("input[type=password]"));
5、表单选择器
案例1：可用与禁用
案例2：选中状态
6、this
$(this):表示当前对象，谁调用，this就是谁
扫一扫
36万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
