这里写目录标题
BOM
概述
BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，
比如：刷新浏览器、后退、前进、在浏览器中输入URL等
BOM*对象
window是浏览器的*对象，当调用window下的属性和方法时，可以省略window注意：window下一个特殊的属性 window.name
对话框
<script>
alert("警告框");
// 返回输入的内容
var content = prompt("请输入密码");
// 确定返回true,取消返回false
var flag = confirm("确定退出吗?");
window.onload=function(){
}
</script>
window.location
<script>
// 地址栏上(浏览器最上边)#后面的内容
console.log(window.location.hash);
// 主机名和端口号 localhost:52332 注意: 需要Ctrl+1 直接在vscode里打开浏览器才可以 直接复制路径是不行的
console.log(window.location.host);
// 主机名 localhost
console.log(window.location.hostname);
// 文件的路径---相对路径
console.log(window.location.pathname);
// 端口号
console.log(window.location.port);
// 协议
console.log(window.location.protocol);
</script>
history
<script>
// 跳转到test.html
$("#btn1").click(
function () {
window.location.href = "test.html";
}
);
// 前进
$('#btn2').click(() => {
window.history.forward()
});
$('btn3').click(() => {
window.history.back()
}
);
</script>
window.navigator
<script>
// 通过userAgent 可以判断浏览器的类型
console.log(window.navigator.userAgent);
// 通过platform可以判断浏览器所在的系统平台类型
console.log(window.navigator.platform);
</script>
定时器
setTimeout
<script>
// 1 setTimeout : 多久后执行(单位毫秒(1秒=1000毫秒)),并且只执行一次
// setTimeout(做什么(回调函数),多久之后);
setTimeout(() => {
console.log(1111);
}, 2000);
// 上面和下面同时执行,异步,就是定时器会开启一个新线程,来运行该程序
console.log(22222);
window.onload = function () {
// 需求 : 点击按钮的时候,绑定一个定时器,1秒之后面向页面输出1
// 并返回一个true/false,如果返回true,再追加输出一个2,如果false,输出3
$("#btn").click(() => {
var flag;
setTimeout(() => {
document.write(1);
flag = true;
return flag;
}, 1000);
if (flag) {
document.write(2);
} else {
document.write(3);
}
});
}
</script>
setInterval
<script>
// 2 setInterval : 没隔多久 做什么事
// setInterval(做什么,间隔时间);
var count = 0;
// 返回定时器的ID,可以根据这个ID 清除这个定时器
var timer = setInterval(() => {
document.write(count++ + "<br>");
if (count >= 10) {
// return是不能清除这个定时器的
// return;
// 清除定时器
clearInterval(timer)
}
}, 2000);
console.log(timer);
</script>
jQuery基础
jQuery基础语法
<!-- 引入jQuery函数库 -->
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
// dom树加载完就可以执行,可以写多个
jQuery(document).ready(()=>{
console.log('ready-1');
});
jQuery(document).ready(()=>{
console.log('ready-2');
});
// $ = jQuery 在jQuery内容,为了使用方便,用$ 和jQuery是一样,定义了$这个变量
// 如果$和其他框架冲突,就要使用jQuery了
$(document).ready(()=>{
console.log('ready-3');
});
// 简单写法
$(()=>{
console.log('ready-4');
})
</script>
基础选择器
<script>
// 得到ID为xxx的jQuery对象,并不是DOM
// jQuery对象中封装的是DOM,如果需要用到DOM对象的话,就需要通过[下标] 取出
$("#xxx");
// 根据类名获取
$(".className");
// 根据标签名获取
$("标签名");
// 并集选择器
$("div.className");
// 交集选择器
$("div,p,#xxx,.xxx");
// 子代
$("div>p>.class");
// 后代
$("div p");
// 属性 : 有type属性的input
$("input[type]");
// 属性 : type属性值为password的input
$("input[type='password']");
// 属性 : href属性值以http打头的a标签
$("a[href^=http]");
// 属性 : href属性值以com结尾的a标签
$("a[href$=com]");
</script>
过滤选择器
<script>
$(() => {
// CSS函数的使用
// 1 一个参数, 如果是对象, 则对所有DOM对象设置多个样式, 支持链式调用
// 2 一个参数, 不是对象, 就认为是属性, 则返回第一个DOM对象的属性的值, 不支持链式调用
// 3 两个参数, 第一个attr是属性, 第二个value是属性对应的值, 则对所有DOM设置该样式和值
// 从0开始 获取所有li标签,然后只要第 2个 (下标为0开始)
$("li:eq(2)").css({'color':'red','background-color':'green'});
// 获取所有li,然后只要奇数 (0开始,0算偶数)
$("li:odd").css("color","blue");
// 同上,取偶数
$("li:even").css("color","pink");
// 获取小于2的,0开始
$("li:lt(2)").css("background-color","yellow");
// 获取大于2的,0开始
$("li:gt(2)").css("background-color","black");
});
</script>
筛选选择器
<script>
$(()=>{
// 获取所有子标签
$("div").children().css("color","red");
// 获取指定子标签 (子代,h2中的span不会被选择)
$("div").children("span").css("color","blue");
// find 就是查找后代
$("div").find("span").css("color",'green');
// 获取所有子标签,然后只要第二个,下标 0 开始
$("div").children().eq(2).css("color",'pink');
// 获得兄弟节点(同级) (当前作用域中,非自己的标签 )
$('h2').siblings().css('background-color','red');
// 获取下一个标签(同级)
$('h2').next().css('background-color','black');
// 获取 下一个标签(同级),并且下一个标签必须是h3标签才行,如果不是h3,就不获取
$('h2').next('h3').css('background-color','blue');
// 获取后面的标签(同级)
$('h2').nextAll().css('background-color','blue');
// 获取所有子标签,然后通过not进行筛选,不要span标签、h3标签、class属性值为h的标签
$('div').children().not('span,h3,.h').css("font-size",'50px');
});
事件
<script>
$(()=>{
var p = $("p");
// 点击
// 箭头函数的上下文环境是window
p.click(function(e) {
// this 是jQuery对象中封装的DOM对象
console.log(this);
console.log(this.innerText);
// 通过$(DOM对象) 就可以把DOM对象转换为jQuery对象
// text函数 等于 innerText , 无参是获取,有参是设置
console.log($(this).text());
// 事件源得到的也是DOM对象
console.log(e.target.innerText);
});
// 双击
p.dblclick(function(){
// 隐藏,参数可以不写,不写没有动画效果,写就是毫秒数,多长时间内隐藏完成
$(this).hide(1000);
});
// 移入
p.mouseenter(function(){
$(this).css("color",'red');
console.log('移入...');
});
// 移出
p.mouseleave(function(){
$(this).css("color",'');
console.log('移出...');
});
$("#btn").click(function(){
// 显示 , 同hide
$("p").show(1000);
});
$("#btn1").click(function(){
// 切换.显示就隐藏,隐藏就显示,同hide
$("p").toggle(1000);
});
});
</script>
class操作
<script>
$(function(){
var add = $("#add");
var remove = $("#remove");
var toggle = $("#toggle");
var p = $("p");
var btns = $("button");
add.click(function(){
// 添加class
p.addClass('g');
console.log(btns.index(this));
});
remove.click(function(){
// 删除class
p.removeClass('g');
console.log(btns.index(this));
});
toggle.click(function(){
// 切换class,有就删除,没有就添加
p.toggleClass('g');
console.log(btns.index(this));
});
});
</script>