js中的location与浏览器滚动

最新推荐文章于 2024-05-07 14:33:11 发布

吃瓜瓜瓜

最新推荐文章于 2024-05-07 14:33:11 发布

阅读量295

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_53125449/article/details/112378544

版权

location

首先我们需要了解网址的含义。例：

 https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525 ?fr=aladdin#2_1
 http https          传输协议
 baike.baidu.com     域名
 fr=aladdin          查询字符
 #2_1                hash（锚点定位）

location对象：

里面存储了和网页地址所有内容有关的信息。

属性：

href：地址信息。
跳转页面：location.href = “XXX”;

window.onload = function()
            setInterval(skip,4000); //利用定时器的延迟等待页面加载完成，从而调用  location.href
        }
function skip(){
            location.href = "https://www.baidu.com";
        }

search：查询字符串一般是用于传输数据，需要进行解析。

 window.onload = function(){
            console.log(location.search);
        }

在这里插入图片描述
返回值：

split(分割字符串)：

 window.onload = function () {
  	var str2 = "苏轼|辛弃疾|李商隐";
  	console.log(str2.split("|"));
  }

返回值：
在这里插入图片描述

分割search属性获取到的值
步骤：
1.需要准备一个函数进行解析，这个函数还需要一个参数。
     参数：要解析的字符串。
    
2.开始解析     
  1.判断如果为空字符串，直接返回 空对象。
  2.如果不是空字符串，解析字符串，并将结果放入对象中。
  （1）截取掉第一个字符。
  （2）剩余字符按照&进行分割，得到一个数组。
  （3）遍历数组，得到 “属性名=属性值”这样格式的字符串。
  （4）对每一个字符串，按照=分割，得到一个属性和属性值组成的数组。
  （5）将属性名和属性值赋值给对象 //obj[t[0]]=t[1];
  （6）返回对象

  //例：?name=zhangsan&age=18
   function resolverSearch(search) {
      var obj = {};     // 生成空的对象。
      if (search) {
      	var tmp = search.slice(1).split("&");  //分割
        for (var key in tmp) {             //遍历
        	var t = tmp[key].split("=");  //二次分割
            obj[t[0]] = t[1];   //对象新增
              }
         }
       return obj;
     }

其他属性：

assign()：改变浏览器地址栏中的地址，并记录到历史中。注：设置location.href 就会调用assign方法。
replace() 替换浏览器地址栏中的地址。
reload() 重新加载 F5
reload(true) 强制加载，不适用缓存。

navigator

获取浏览器客户端的信息

 document.write(navigator.appName,"<br/>");
 document.write(navigator.userAgent,"<br/>");
 document.write(navigator.platform,"<br/>");

history

保存当前窗口的历史记录，里面包含了一些操作历史记录的属性和方法。

注：不是浏览器中的历史记录。

属性：

length:返回历史记录的条数。

方法：

back():
语法: history.back();
作用: 类似浏览器上面的后退键，回退到上一条历史记录中。
forward():
语法： history.forward();
作用： 类似浏览器上面的前进键，前进到下一条历史记录中。
go(n):
语法： history.go(n); n表示整数
正整数： 表示前进
0：刷新当前页面
负整数： 表示后退
**作用：**跳转n条记录记录。

<script>
        window.onload =function () {
                a.onclick = function () {          //创建点击效果
                    history.forward();
                }
            }

</script>
    
<body>
    <a href="history.html">跳转主页</a>  //创建链接，需要先跳转才能够使用按钮前进或后退
    <button id="a">前进</button>  //生成按钮
</body>

浏览器滚动

浏览器卷去的高宽

当页面的宽高比较大时，会出现滚动条，一部分内容会随着页面的滚动而被隐藏。
我们管上面隐藏的叫做 :  卷去的高度
左边隐藏的宽叫做:  卷去的宽度。

//不要忘记在css中设页面高度，滚动一次刷新后再次索取
//获取卷去的高度   使用时页面中必须要有DOCTYPE标签
window.onload = function () {
            console.log(document.documentElement.scrollTop);
        }
//获取卷去的宽度   使用时页面中必须要有DOCTYPE标签。        
window.onload = function () {
            console.log(document.documentElement.scrollLeft);
        }
//获取卷去的高度，使用时，页面中没有DOCTYPE标签。
window.onload = function () {
            console.log(document.body.scrollTop);
        }
//获取卷去的宽度，使用时，页面中没有DOCTYPE标签。
window.onload = function () {
            console.log(document.body.scrollLeft);
        }    
// 兼容写法:两者兼顾
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

浏览器滚动
可以通过js代码来指定浏览器滚动到什么位置上。
第一种方式：
格式： window.scroll(横坐标，纵坐标)；
【注意】不需要书写单位，瞬间定位。

window.onload = function(){
            window.scroll(200,400);
        }

第二种方式：

  window.onload = function(){
            gd.onclick = function(){
                window.scroll({
                    top:4000,
                    left:100,
                    behavior:"smooth" // behavior:可以决定滚动的方式，默认为 auto 瞬间定位，可以设置为smooth 平滑过渡。
                });
            }
        }

自定义滚动速度
通过定时器实现滚动速度可控：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var timer = null;
        //执行完毕后在加载
        window.onload = function () {
            console.log(document.documentElement.scrollTop);
            //创建点击事件
            skip.onclick = function () {
                //设置计时器，使速度可控
                timer = setInterval(function () {
                    //每50毫秒距离顶部减少20
                    document.documentElement.scrollTop -= 20;
                    if (document.documentElement.scrollTop <= 0) {
                        clearInterval(timer);
                    }
                }, 50);
            }
        }
        var compare = 0;
        window.onscroll = function () {
           //与上次的值进行比较，如果上次的值小于本次的值则认为用户滚动鼠标，进行定时器停止。
            if (compare < document.documentElement.scrollTop) {
                clearInterval(timer);
            }
            compare = document.documentElement.scrollTop;
        }
    </script>
</head>

<body>
    <h1>生于忧患，死于安乐</h1>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1>生于忧患，死于安乐</h1>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h1>生于忧患，死于安乐</h1>
  
    <button id="skip">返回顶部</button>
</body>
</html>

DOM

dom: docment object model 文档对象模型。
DOM 都是由节点组成的。
节点可以分为以下三类:

元素节点 html标签
文本节点标签中的文字（空格，换行）
属性节点标签的属性

dom，就是对节点的操作
修改： 修改DOM节点的内容。
遍历： 遍历DOM节点下的子节点，方便下一步操作。
添加： 在DOM节点下添加一个子节点。
删除： 将该节点从HTML中删除。也相当于删除了它包含的所有内容以及所有子节点。
DOM可以做什么：

找对象（元素节点）
设置元素节点的属性值、
动态删除和创建节点。
事件的响应触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <script>
         window.onload = function(){
            var h1 = document.getElementsByTagName("h1")[0];
            console.log(h1);
            h1.id="h1";
            h1.onclick = function(){
                alert("你点了我一下");
            }
         }
     </script>
</head>
<body>
    <h1>我是一级标题</h1>
    <a href="history/a.html">123</a>
</body>
</html>

获取节点的方式：
1.getElementById

格式：node.getElementById(“ID”)
功能：从node节点开始，通过ID查找节点

2.getElementsByTagName

通过标签名查找节点
格式：node.getElementsByTagName(“标签名”);

3.getElementsByClassName

通过类名去查找节点
格式：node.getElementsByClassName(“类名”);

4.getElementsByName()

通过name属性值去获取节点
最常用在表单元素中。

低版本的IE不支持：
1.querySelector()
格式： node.querySelector(css选择器)
返回值： 如果找到选择器匹配的元素，则返回第一个元素。如果没找到，则返回null

2.querySelectorAll()
格式： node.querySelector(css选择器)
返回值： 如果找到选择器匹配的元素，则返回全部。如果没找到，则返回null
nodelist 伪数组常规的数组方法对伪数组是无效的 length 【下标】

<script>
    window.onload = function(){
        // var box1 = document.getElementsByTagName("div")[0];
        // var h1 = box1.getElementById("h1");
        // var c3= box1.getElementsByClassName("pp")[0];
        // var c3 = document.querySelectorAll(".pp");
        var c3 = document.getElementsByName("ppp")[0];
        console.log(c3);
    }
</script>
<body>
    <div id="box1">
        <h1 id="h1">h1标题</h1>
        <div class="pp">div>div段落</div>
        <p  name="ppp" class="pp">p段落</p>
    </div>
</body>

吃瓜瓜瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中的location与浏览器滚动

location首先我们需要了解网址的含义。例： https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525 ?fr=aladdin#2_1 http https 传输协议 baike.baidu.com 域名 fr=aladdin 查询字符 #2_1 hash（锚点定位）location对象：里面存储了和网页地址所有内容有关的信息。属
复制链接

扫一扫