今天的内容稍稍繁杂，要记得很多。
今日内容
1.BOM
2.jQuery的用法
3.jquery的选择器
1.BOM
1.定时器
1.1周期定时器
语法:
window.setInterval(code,millionSec);
var 定时器对象=window.setInterval(code,millionSec);
window.clearInterval(定时器对象); 只能清除周期定时器
参数:
code: 指的是一段需要指定的代码或者是一个需要调用的自定义函数
如window.setInterval(“function()”,1000);
millionSec: 周期定时器的间隔，单位是毫秒。 1秒 = 1000毫秒
window.οnlοad= function(){} 页面加载时需要先加载的代码。
1.2超时定时器
语法:
window.setTimeout(code,millionSec);
var 定时器对象=window.setTimeout(code,millionSec);
window.clearTimeout(定时器对象); 比较少用
参数:
code: 指的是一段需要指定的代码或者是一个需要调用的自定义函数
如
window.onload = function(){
// window.setTimeout(function(){
// var photo = document.getElementById(“photo”);
// photo.style.display = “block”;
// },2000);
millionSec: 周期定时器的间隔，单位是毫秒。 1秒 = 1000毫秒
style样式
<!-- 隐藏元素
display block 块级元素
inline 行级元素
inline-block 行块级元素
none 隐藏
-->
时钟效果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="time"></p>
</body>
<script>
window.setInterval(function(){
//获取当前系统时间
var datetime = new Date();
//2020年 11月 26日 11:42:38
//年
var year = datetime.getFullYear();
var month = datetime.getMonth();
var day = datetime.getDate();
var hours = datetime.getHours();
var minutes = datetime.getMinutes();
var seconds = datetime.getSeconds();
// console.log(year);
// console.log(month+1);
// console.log(day);
// console.log(datetime.getDay());
// console.log(datetime.getHours()+":"+datetime.getMinutes()+":"+datetime.getSeconds());
var content = year+"年 "+(month+1)+"月 "+ day+" 日 "+ hours+":"+minutes+":"+seconds;
var time = document.getElementById("time");
time.innerHTML = content;
},1000)
</script>
</html>
2.BOM弹出框
浏览器常用弹出框有以下几个：
1.alert() 弹出一个消息框，警告框
2.promt() 弹出一个输入框 prompt(“提示”,”默认值”); 用的频率比较低
//prompt(“请输入你的年龄”,“比如:28”);
3.comfirm() 弹出一个确认框。注意：其操作返回是boolean值，可以用来判断。
function del(){
if(confirm("确定要删除吗？删除后无法恢复！！！")){
alert("删除成功！！");
}
else{
alert("删除操作已撤销...");
}
}
3．BOM的其他对象
在BOM还有一些对象会经常使用
3.1、Location-地址栏对象
location对象中有以下几个属性需要了解
port 端口
protocol 协议
hostname ip
href 当前访问地址
pathname 当前访问文件
search 参数
history
history，历史对象，浏览器的历史记录。
可以实现浏览器中 前进、后退的效果
前进
history.forward();
后退
history.back()
Jquery基本介绍
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery页面加载
jquery的页面加载事件写法一共有3种:
// jQuery(document).ready(function(){
// console.log($("#dx").html());
// })
// KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log(("#dx").html());
// });
//简写
$(function(){
console.log($("#dx").html());
})
JQuery的ready()与window.onload的区别：
1.执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
(
d
o
c
u
m
e
n
t
)
.
r
e
a
d
y
(
)
是
D
O
M
结
构
绘
制
完
毕
后
就
执
行
，
不
必
等
到
加
载
完
毕
。
由
此
可
见
，
(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 由此可见，
(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。由此可见，(document).ready()的执行时机要早于window.onload。
2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload，只会执行一个。
$(document).ready()可以同时编写多个，并且都可以得到执行。
3.简化写法
window.onload没有简化写法。
(
d
o
c
u
m
e
n
t
)
.
r
e
a
d
y
(
f
u
n
c
t
i
o
n
(
)
)
可
以
简
写
成
(document).ready(function(){})可以简写成
(document).ready(function())可以简写成(function(){});
总结：
以后写页面加载时，推荐使用$(function(){})
jquery对象和javascript对象的互转
为什么jquery对象和javascript需要互转？
原因： 有些情况用js比较简单，有些情况用jquery比较简单
jquery 转换成 js
var dx = $("#dx")[0]; //从jquery转换成js对象 第一种
var dx = $("#dx").get(0); //从jquery转换成js对象 第二种
js转换成 jquery
var $dx = $(dx);
jquery的选择器
基本选择器
- id选择器 #id值
- 类选择器 .class值
- 标签选择器 标签名
- 并集选择器 给定多个范围，多个范围合起来就是并集的匹配范围 $(“选择器1，选择器2”)
- 交集选择器 在给定的多个范围中，匹配重合的部分 $(“选择器1选择器2”)
层次选择器
层次选择器包含以下四种:
1.子选择器 获取指定节点的 子节点 直接父子关系
$(“#fu>li”)
2.后代选择器
$(“#fu li”)
3.相邻选择器
$(“#a+p”) 获取id为a元素节点后紧跟着的第一个p元素节点
4.同辈选择器
$(“#a~p”) 获取id为a的元素节点后所有同级节点
属性选择器
1.寻找含有指定属性的元素
$(“[href]”)
2.寻找含有指定属性，指定值的元素
$(“[href=abc.html]”)
3.寻找含有指定属性，值不为指定的值的元素
$(“[href!=abc.html]”)
4.寻找含有指定属性，值含有指定字符的元素
$(“[href*=a]”)
5.属性以指定值开头 ^
$(“[href^=a]”)
6.属性以指定值结尾 $
(
“
[
h
r
e
f
(“[href
(“[href=p]”)
过滤选择器
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
