22-29学习总结

最新推荐文章于 2022-08-11 10:49:26 发布

jiuzhouy

最新推荐文章于 2022-08-11 10:49:26 发布

阅读量61

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/jiuzhouy/article/details/110340084

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

URL
统一资源定位符（Uniform Resource Locator，URL）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL 的一般语法结构为：

porotocol：//host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成说明
protocol 通信协议，常用的http、ftp、maito等
host 主机（域名）
port 端口号，可选，省略时使用默认断开，如http的默认端口80
path 路径，由零或多个“/”格开的字符串，一般用来表示主机上的一个目录或者文件地址
query 参数，以键值对的形式，通过符号 & 分割开来
fragment 片段，# 后面的内容常见于链接，锚点
location 对象的属性
location 对象属性返回值
location.href 获取或者设置整个 URL
location.host 返回主机（域名）
location.port 返回端口号，如果未写返回空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段，# 后面内容，常见于链接、锚点
5秒钟之后自动跳转页面
案例分析：

利用定时器做倒计时效果
location.href 跳转页面

  <div>将在5秒钟之后跳转到首页！</div>
    <script>
        setTimeout(function() {
            location.href = 'http://www.baidu.com';
        }, 5000);
    </script>

获取 URL 参数数据
主要练习数据在不同页面之间的传递

案例分析：

第一个登陆页面，里面有提交表单，action 提交到 index.html 页面
第二个页面可以使用第一个页面的参数，利用了 location.search 参数
截取字符串用 substr
分隔符，将 = 前后的分隔开
login.html :

<form action="index.html">
    <input type="text" name="username" id="">
    <input type="submit" value="登录">
</form>

index.html :

<div></div>
<script>
    // substr(起始位置, 截取几个字符)
    var params = location.search.substr(1);
    var arr = params.split('=');
    var div = document.querySelector('div');
    div.innerHTML = '欢迎您！会员' + arr[1] + '！';
</script>

location 常见方法
location 对象方法返回值
location.assign() 跟 href 一样，可以跳转页面
location.replace() 替换当前页面，因为不记录历史，所以不能后退页面
location.reload() 重新加载页面，相当于刷新按钮或者 F5，如果参数为true，强制刷新 ctrl + F5

navigator 对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的useragent头部的值。
history 对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。
history 对象方法作用
back() 后退功能
forward() 前进功能
go(参数) 前进后退功能，参数如果是1，前进一个页面，如果是-1，后退一个页面
history 对象在一般的实际开发中比较少用，但是会在一些 OA 办公系统中见到。
offset概述
offset翻译过来就是偏移量，使用offset的相关属性可以动态的获取元素的偏移、大小等

获得元素距离带有定位父元素的位置
获得该元素自身的大小（高宽）
注意：返回的数值都不带单位
offset系列常用属性：

offset系列属性作用
element.offsetParent 返回该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素上方的偏移
element.offsetWidth 返回自身包括padding、border、内容区的宽度
element.offsetHeight 返回自身包括padding、border、内容区的高度

offset和style的区别

offset style
可以等到任意样式表中的样式值只能得到行内样式表的样式值
得到的值没有单位得到的值都有单位
得到的值是包括padding+border+width 得到的值不包含padding和border的值
是只读属性，只能获得值，不能赋予值是可读写属性，可以获取值，也能赋予值
更合适用来获取元素值更适合用来给元素赋值

案列—模态拖拽框

下面介绍一个简单案列的实现，如下图：
在这里插入图片描述

代码如下

html：

<h1>点击，弹出登陆框</h1>
<div class="login">
    <h3>登录会员</h3>
    <form action="">
        <label for="">用户名： </label><input type="text" placeholder="请输入用户名"><br>
        <label for="">登录密码：</label><input type="password" placeholder="请输入登陆密码">
        <button>关闭</button>
    </form>
</div>

css:

body {
            position: relative;
            background: #ccc
        }
        h1{
            margin:5px auto;
            width: 300px;
            font-weight: normal;
            z-index: 0
        }
        h3 {
            cursor: move;
        }
        .login {
            width: 500px;
            height: 200px;
            background: #fff;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,50%);
            display: none;//开始是隐藏的
        }
        .login input {
            width: 200px;
            line-height: 20px;
            padding-left: 5px;
            margin-bottom: 10px;
            outline: none;
        }
        .login input[type=text]{
            margin-right: -14px
        }
        button {
            width: 40px;
            height: 40px;
            position: absolute;
            background: #fff;
            border-radius: 50%;
            border: none;
            top: -20px;
            right: -20px;
            outline: none;
            cursor: pointer;
        }

js:

var alert = document.querySelector('h1');
        //获取元素
        var login = document.querySelector('.login');
        var btn = document.querySelector('button');
        var mdown =document.querySelector('h3');
        alert.addEventListener('click', function(){
            login.style.display = 'block';
        });
        btn.addEventListener('click',function(){
            login.display.block = 'none';
        });

  

  mdown.addEventListener('mousedown', function(e){
        var x = e.pageX - login.offsetLeft;
        var y = e.pageY - login.offsetTop;
        document.addEventListener('mousemove',move);
        function move(e){
            var px = e.pageX - x;
            var py = e.pageY - y;
            login.style.left = px  + 'px';
            login.style.top = py +'px';
        }
        document.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',move);
        });
    });

案例分析：

1.点击弹出层，会弹出模态框

2.点击关闭按钮，可以关闭模态框

3.鼠标放在最上面一行可以按住鼠标拖拽模态框在页面移动

4.鼠标松开，可以停止拖动模态框移动

实现分析：

1.点击弹出层后模态框会显示出来display:block;

alert.addEventListener(‘click’, function(){
login.style.display = ‘block’;
});//给弹出层添加点击监听器，点击之后使模态框的display:none转变为display:block;

2.点击关闭按钮之后，可以关闭模态框display:none;

btn.addEventListener(‘click’,function(){
login.display.block = ‘none’;
});//给关闭按钮添加点击监听器，点击之后使模态框的display:block转变为display:none;

3.在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标，拖拽框停止移动

4.鼠标按下mousedown,鼠标移动mousemove,鼠标松开mouseup

5.鼠标按下过程：就是按住最上面哪一行h3标签，然后给他添加mousedown监听器事件

mdown.addEventListener(‘mousedown’, function(e){//给拖拽行添加监听器
var x = e.pageX - login.offsetLeft;//鼠标到拖拽框的左端距离
var y = e.pageY - login.offsetTop;//鼠标到拖拽框上端距离
document.addEventListener(‘mousemove’,move);//当按住鼠标之后就进行移动
function move(e){
var px = e.pageX - x;//拖拽框到浏览器左边的距离
var py = e.pageY - y;//拖拽框到浏览器上面的而距离
login.style.left = px + ‘px’;//拖拽框到浏览器左边的距离赋值给login的left值
login.style.top = py +‘px’;//将拖拽框到浏览器上面的距离赋值给login的login值
}
document.addEventListener(‘mouseup’,function(){//松开鼠标之后，移出move事件
document.removeEventListener(‘mousemove’,move);
});
});

5.鼠标移动过程：在按住的监听器下再添加一个移动的监听器事件，并动态的获取拖拽框的左端和上端距离浏览器的距离，在赋值给login的left和top；实现拖拽移动的效果

6.鼠标松开过程：添加鼠标松开事件，松开事件的时候，添加移除move事件，这时就可以实现模态框拖拽了。