javascript---Bom
一、BOM（Browser Object Model）浏览器对象模型
作用：提供了很多操作浏览器的属性方法,而这些方法都存放在window浏览器对象上。
二、什么是Bom：
在浏览器上打开一个窗口 就是window对象，也就是BOM对象。
window下面的方法,在调用的时候可以省略window
三、Bom 对话框：
作用：浏览器通过方法调用系统封装的对话框时用来向用户显示信息。
系统弹出框分别有： aleat()、confirm()、prompt()三种。
注意：系统对话框与浏览器中显示网页的 没有关系，也不包含HTML,
他们的外观由操作系统与浏览器设置决定。而不是由css决定，对我们而言就是样式不可控
第一：alert() //接受一个字符串并将其显示给用户。
第二：confirm() //弹出一个带确定和取消的提示框。
返回值：布尔值，点击确定，返回true，点击取消，返回false
第三：prompt（）
功能：弹出一个带输出框的提示框
参数：第一个参数 提示面板上显示的内容
第二个参数 输入框内默认的文本
返回值：如果点击取消，返回null。如果点击确定，返回输入的内容。
四、因为时window对象
所以时对象的方法： open() 方法
4.1、window.open()
第一个参数：url 没执行一次，打开新窗口，加载url
第二个参数：给你打开的窗口起一个名字，当第一次打开的时候，是打开的一个新的，然后其他的时候就是围绕着第一个打开的继续刷新。
第三个参数：特殊含义的一串字符串。控制打开窗口的属性。： 无论你是怎么打开以及打开多次就是对你第一次打开的页面进行刷新
height=400 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200’);
案例：
五、作用：它获取了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。
5.1、protocol来获取传输协议协议
协议的类型：http https 都是网络传输协议,
可以通过方法location.protocol来获取传输协议
可以检验一下浏览器是什么类型。
5.2、获得主机名 域名
www.baidu.com 或者 localhost或者IP地址
IP：全球范围内你电脑使用网络的地址。
可以通过location.hostname得到
5.3、获取 port 端口号
端口号默认是隐藏的。
浏览器端口：8080
location.port
5.4、获取：pathname 路径
放在服务器上的路径
location.pathname
5.5、search
通过?拼接的这部分
?username=aa&password=123456
location.search
5.6 href
location.href 获取 url
1 var str = 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_sug4=1923'; 2 // console.log(str.split('?')[0]); 3 var a = str.split('?')[0]; //以什么分隔转换成数组。 4 var b = str.split('?')[1]; 5 var arr8 = b.split('&'); 6 var obj = {}; 7 for(var i = 0; i< arr8.length; i++){ 8 obj[arr8[i].split('=')[0]]= arr8[i].split('=')[1]; 9 } 10 console.log(obj); 11
5.6、hash 锚点
页面中的某一部分 （比如传参）
六、location对象的方法
location.assign 在本窗口进行页面跳转
页面跳转 会产生历史记录
location.reload 重载 刷新
参数：true false 默认false
如果true，说明要不经过浏览器缓存，直接强制重载。
location.replace() 页面替换
不产生历史记录的跳转 在本页面进行跳转
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div onclick = 'go()'>我去</div> 9 <div onclick = 'goHis()'>我再去</div> 10 </body> 11 <script type="text/javascript"> 12 13 // http://www.baidu.com:8080/qwer/index.html?search#1 14 // 协议://主机名:端口号/路径/?search#锚点 15 console.log(location); 16 console.log(location.search.split('=')); 17 console.log(location.hash); 18 function go(){ 19 20 location.assign('./history.html'); 21 } 22 function goHis(){ 23 24 // history.forward() 25 history.go(1) 26 } 27 28 </script> 29 </html>
七、history对象
输入的url不一样，就会产生历史记录。
属性：history.length
历史记录的条数
方法 back 后退 forward 前进 go
可以传参数
正整数 前进两条记录
负整数 后退两条记录
0 刷新
href 整个url链接
1.bank()
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 console.log(history); 8 console.log(history.length); 9 function goSear(){ 10 // history.back(); //后退一步 11 // history.go(-1); 后退两步 12 history.go(0); //刷新 13 } 14 </script> 15 </head> 16 <body> 17 <div onclick="goSear()" >后退</div> 18 </body>
======================================================================================================================
总结常用：
页面后退
$('i.icon-back').on('click', function() {
window.history.go(-1); //进行后退两步。
window.history.go(0); 对当前页面进行刷新。
window.history.back() // 进行后退
});
页面替换
$('.icon2').on('click',function(){
window.location.replace('/cart/index.html'); //页面替换，不产生历史记录
})
页面跳转
1.
$('.icon2').on('click',function(){
window.location.assign（'/cart/index.html'); //在本窗口进行跳转，产生历史记录
})
1 $('.icon2').on('click',function(){ 2 window.location.href（'/cart/index.html'); //页面跳转 3 })
打开名为“window2”的新窗口 open 第一次打开以后，其他情况都是围绕第一次打开进行继续刷新的。
1 window.open("http://www.w3school.com.cn","window2")
页面刷新
$('.icon2').on('click',function(){
window.location.reload（); //刷新页面 默认状态时false
})
获取地址中的id 获取的是浏览器的id
var id = parentInt(window.location.href.slice(window.loaction.href.indexof('=')+1))
var id = parsetInt(window.location.href.slice(window.location.href.indexOf('=') + 1));
获取同一页面的id
获取id ：获取的时本页面的藏数的id
dateset只能使用在原生js上面 所有可以转换成js 或者 是 获取 标签 来进行获取
2.1将jQuery强制转换为原生js去获取
// console.log($tr.get(0).dateset.id);
//console.log($tr[0].dateset.id);
用jQuery方法attr(); //使用的藏数据。
var id = parseInt($tr.attr("date-id"));
案例： var id = $(this).parents('li').attr('data-id');
锚点 ：
//首先根据渲染高度算出各个区域的临界值的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="/status/css/reset.css"/>
<link rel="stylesheet" type="text/css" href="/status/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="/status/swiper/swiper.css"/>
<link rel="stylesheet" type="text/css" href="index.css"/>
<title>商品详情</title>
</head>
<body>
<div class="datail-wrapper">
<div class="datail-top">
<ul>
<span>
<a href="#">
<i class="iconfont icon-back"></i>
</a>
</span>
<li class="active"><a href="#banner">商品</a></li>
<li><a href="#rate-wrapper">评论</a></li>
<li><a href="#paremeter-img">详情</a></li>
<li>推荐</li>
<span>
<a href="#">
<img src="../datail/images/省略号.png" >
</a>
</span>
</ul>
</div>
<div class="datail-banner-wrapper">
<div id="banner">
<ul class="datail-banner ">
</ul>
</div>
<div class="rate-wrapper" id="rate-wrapper">
<img src="../images/001.png" alt="" class="division">
<div class="people-rate-wrapper">用户评价（<span class="people-rate"></span>）条</div>
<div class="rate-specific">
<span>服务很好（13）</span>
<span>外观漂亮（32）</span>
<span>实用性高（8）</span>
</div>
<ul class="rate-img">
<li>
<a href="">
<img src="images/002.png" alt="">
</a>
</li>
</ul>
</div>
<div class="paremeter-img" id="paremeter-img">
<div class="paremeter">
<a href="#par1"><span>概述</span></a>
<a href="#par2"><span>参数</span></a>
<a href="#par3"><span>售后服务须知</span></a>
</div>
<img src="../images/product/other002.jpg" alt="" id='par1'/>
<img src="../images/product/other002.jpg" alt="" />
<img src="../images/product/other002.jpg" alt="" />
<img src="../images/product/other002.jpg" alt="" />
<img src="../images/product/other002.jpg" alt="" />
<img src="../images/product/other002.jpg" alt="" id='par2'/>
<img src="../images/product/other002.jpg" alt="" />
<img src="../images/product/other002.jpg" alt="" />
<img src="../images/product/other002.jpg" alt="" id='par3'/>
</div>
</div>
<div class="bottom">
<div class="icon-wrapper icon1">
<i class="iconfont icon-home"></i>
<span>小米</span>
</div>
<div class="icon-wrapper icon2">
<i class="iconfont icon-cart">
<span class="cart-count">
<!-- <a href="../cart/index.html"></a> -->
</span>
</i>
<span>购物车</span>
</div>
<div class="go-cart-wrapper">
<input type="button" value="加入购物车" class="go-cart">
</div>
</div>
</div>
<!-- 弹出的膜布 -->
<div class="cloth">
<div class="cloth-null"></div>
<div class="cloth-count clearfix">
<div class="cloth-product-wrapper">
</div>
<span class="cloth-number">数量</span>
<div class="count-wrapper">
<input type="button" value="-" class="decrease" disabled >
<span class="count">1</span>
<input type="button" value="+" class="increase">
</div>
<div class="btn-ok-wrapper">
<input type="button" class="btn-ok" value="确定">
</div>
</div>
</div>
</body>
<script src="../status/js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script src="/status/js/jQuery-exend.js" type="text/javascript" charset="utf-8"></script>
<script src="/status/swiper/swiper.js" type="text/javascript" charset="utf-8"></script>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
</html>
$('.datail-banner-wrapper>*').each(function(i, item) { //获取所有这个div下面的所有div 然后进行循环出来
heights.push($(item).offset().top - $('.datail-top').height());
console.log(heights);
});
// 监听滚动事件。做到上下一起联动效果
// 监听滚动式事件
$('.datail-banner-wrapper').on('scroll', function() {
// 1.滑动出现top条
$('.datail-top').css({
display: $(this).scrollTop() > 0 ? 'block' : 'none'
});
// 2.根据当前的实时位置结合height数组动态维护top
for (var i = 0; i < heights.length; i++) {
if ($(this).scrollTop() < heights[i]) break;
}
$('.datail-top li').eq(i - 1).addClass('active').siblings().removeClass('active');
});
target：
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
window.location.replace(sessionStorage.getItem('target') || '/category/index.html')
浙公网安备 33010602011771号