Python学习 Day 047 - BOM & jQUery
主要内容:
- 1.BOM
- 2.
- 4.
1.BOM
1.1BOM介绍
JavaScript基础分为三个部分：
-
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
-
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
-
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
(1)什么是BOM
BOM：Browser Object Model，浏览器对象模型。
BOM的结构图:
从上图也可以看出：
-
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
-
DOM是BOM的一部分。
window对象：
-
window对象是JavaScript中的顶级对象。
-
全局变量、自定义函数也是window对象的属性和方法。
-
window对象下的属性和方法调用时，可以省略window。
1.2 BOM 的常见内置方法和内置对象。
(1) 弹出系统对话框
alert(); //不同浏览器中的外观是不一样的 confirm(); //兼容不好 prompt(); //不推荐使用
(2)打开窗口,关闭窗口
//打开窗口 window.open(url,target) //url:要打开的地址, target :新窗口的位置。可以是：_blank 、_self、 _parent 父框架
(3)代码示例
<title>Title</title>
</head>
<body>
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
<button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName("button")[1];
var closeBtn = document.getElementsByTagName("button")[3];
oBtn.onclick = function(){
//在当前页中打开
// open("https://www.baidu.com","_self");
//打开空白页面
open('about:blank',"_self")
};
closeBtn.onclick = function(){
if (confirm("是否关闭?")){
close()
}
}
</script>
1.3 location对象
(1)location对象的属性
-
href：跳转
-
hash 返回url中#后面的内容，包含#
-
host 主机名，包括端口
-
hostname 主机名
-
pathname url中的路径部分
-
protocol 协议 一般是http、https
-
search 查询字符串
location.herf 属性举例
</head>
<div> asdlfaf</div>
<body>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function (){
//点击div时，跳转到指定链接 当前网页打开网址
location.href = "http://www.baidu.com"
// window.open("http://www.baidu.com","_blank"); //方式二
}
</script>
</body>
5秒后自动跳转到百度。
有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。举例：
<script> setTimeout(function () { location.href = "http://www.baidu.com"; }, 5000); </script>
(2)location 对象方法
location.reload(): 重新加载
<script> console.log(2222); // console.log(window.location); setInterval(function(){ //页面全局刷新 不建议 使用 可以用它调试 //更希望的是 局部刷新（ajax技术 与后端交互的核心技术） location.reload(); },2000) </script>
window.navigator 的一些属性可以获取客户端的一些信息。
-
userAgent：系统，浏览器)
-
platform：浏览器支持的系统，win/mac/linux
例子：
console.log(navigator.userAgent);
console.log(navigator.platform);
(4)history对象
1、后退：
-
history.back()
-
history.go(-1)：0是刷新
2、前进：
-
history.forward()
-
history.go(1)
用的不多。因为浏览器中已经自带了这些功能的按钮：
1.4 client offset scroll 系列
(1)client系列
2.
(1)
jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，
事件处理动画和Ajax更加简单。通过多功能性和可扩展性的结合，
jQuery改变了数百万人编写JavaScript的方式。 jquery 中 98%的都是方法 只有两个属性: 索引 length
(2) 为什么要使用jquery?
JavaScript书写代码的不足
-
window.onload 事件有事件覆盖的问题，因此只能写一个事件。
-
代码容错性差。
-
浏览器兼容性问题。
-
书写很繁琐，代码量多。
-
代码很乱，各个页面到处都是。
-
动画效果很难实现。
(3)jQuery的下载
- https://jquery.com/ 下载对应的jQuery
- https://www.bootcdn.cn/ 通过cdn的方式引入
- https://www.npmjs.com
<div id = "box" class="box"></div> <script type="text/javascript" src="./libs/jquery-3.3.1.js"></script> <script> (function(a,b){ alert(1) })(1,2); console.log($); console.log(jQuery) </script>
(5)jQuery的入口函数
<script>
/*
//window.onload有事件覆盖
window.onload = function () {
alert(1)
}
window.onload = function () {
alert(2)
}
*/
</script>
</head>
<body>
<script src="./libs/jquery-3.3.1.min.js"></script>
<script>
// $(document).ready(function(){
// alert(1)
// })
// ;
// $(document).ready(function(){
// alert(2)
// });
// $(window).ready(function(){
// alert(2)
// })
$(function(){
alert(1)
})
</script>
</body>
小结:
//入口函数 文档加载完成之后 会调用 $(document).ready(function(){ }) //等待图片加载完成之后 才执行 $(window).ready(function(){ }) //简便写法 文档加载完成之后 会调用 $(function(){ })
3.1 基础选择器
<title>Title</title>
</head>
<body>
<div class = "box" id = "wrap">
<p class="active">alex</p>
<p class="active">alex</p>
<p class="active">alex</p>
<p class="active">alex</p>
<p class="active">alex</p>
<p class="active">alex</p>
<p class="active">alex</p>
</div>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
//jQuery的选择器(获取DOM对象 注意,它获取的是jQuery对象而不是jsDOM对象)
$("div")[0].style.backgroundColor = "red";
console.log($("#wrap")); //id选择器
console.log($(".box")); //类选择器
console.log($("#wrap .active")); //后代选择器
// 获取到jQuery对象,click时间
$("#wrap .active").click(function(){
// console.log(this.innerText); //错误写法因为获取到的是jQuery对象而不是结束DOM对象
// //isdom =>jQuery对象
// console.log($(this));
console.log($(this).text()); //点击获取jqery对象的text值
$(this).text("haha"); //将获取当前点击的jQuery值修改
console.log($(this).text("haha"));
})
})
</script>
</body>
小结:
- 标签选择器 $('div')
- id选择器$('#box')
- class选择器
- 后代
- 子代
- 组合
- 交集
- 兄弟 + ~
3.2基本过滤器
<title>Title</title>
</head>
<body>
<ul>
<li>天龙八部</li>
<li>射雕英雄传</li>
<li>神雕侠侣</li>
<li>倚天屠龙记</li>
</ul>
<input type="text">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
//获取值 ,eq()的使用
console.log($("li:eq(1)").css("color"));
//设置单个值或者多个值
// $("li:eq(1)").css("color","red");
//通过字典的形式给对象设置多个值
$("li:eq(1)").css({
"color":"red",
"background-color":"blue"
});
//属性选择器
$("input[type='text']").css({
backgroundColor:"yellow"
})
})
</script>
小结:
- eq(index) index从0开始 选取匹配的元素 - gt(index) 大于index的元素 - lt(index) 小于index的元素 - odd 奇数 - even 偶数 - first 第一个 - last 最后一个
3.3 筛选选择器
<ul>
<li>天龙八部</li>
<li class="item">
<a href="">萧峰</a>
</li>
<li>倚天屠龙记</li>
<li>射雕英雄传</li>
</ul>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
//查的是后代,
console.log($("ul").find("a"));
//查找的是亲儿子 如果指定亲儿子,就在children('选择器'),想获取所有的亲儿子 不用写参数
console.log($("ul").children());
//查找的是亲爸
console.log($("a").parent());
//$(`li:eq(${index})`)
console.log( $('ul li').eq());
})
</script>
小结:
- find() 查找的是后代 - children()查找的是亲儿子 - eq() 选择匹配的元素 - siblings() 选取兄弟元素(除了自己本身) - parent() 查找的是亲爹
siblings()方法的用途
<title>Title</title>
<style>
div{
display: none;
}
div.active{
display: block;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<div class="active">
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
$("button").click(function(){
console.log($(this).css("backgroundColor","red"));
//获取索引
let i = $(this).index()
//返回了jquery对象
//链式编程
$(this).css("backgroundColor","red").siblings("button").css("backgroundColor","#666");
$("div").eq(i).addClass("active").siblings("div").removeClass("active");
})
})
</script>
另外:升级版的选项卡
<title>Title</title>
</head>
<body>
<ul>
<li>
<a href="javascript:void(0)">1</a>
</li>
<li>
<a href="javascript:void(0)">1</a>
</li>
<li>
<a href="javascript:void(0)">1</a>
</li>
<li>
<a href="javascript:void(0)">1</a>
</li>
</ul>
<script src ="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
$("ul li").click(function(){
$(this).find("a").css("color","red").parent().siblings("li").find("a").css("color","blue");
})
})
</script>
4.
浙公网安备 33010602011771号