9.26号js总结

最新推荐文章于 2024-11-01 13:37:40 发布

gccv_

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量75

点赞数

文章标签：前端服务器 html

本文链接：https://blog.csdn.net/gccv_/article/details/127062840

版权

thead标签放表格里标签内容

tbody放表格主题内容

History对象

访问过的URL的信息

back（）方法相当于后退按钮

forWord（）方法相当于前进按钮

go（1）代表前进一页等价于forWord方法

go（-1）代表后退一页等价于back方法

<body>
    <a href="list.html">点击我去往列表页</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.forward();
            history.go(1);
        })
    </script>
</body>
 
<body>
    <a href="index.html">点击我去往首页</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.back();
            history.go(-1);
        })
    </script>
</body>

location对象

属性:

host 设置或检索位置或URL的主机名和端口号

hostname 设置或检索位置或URL的主机名

href 设置或检索完整的URL字符串

location.hash = "#123"; // url: https://www.baidu.com/#123 
 
// 参数修改
location.search = "?wd=123" // url: https://www.baidu.com/?wd=location 会重新加载
 
// 修改host
location.hash = "www.bilibili.com"; // url:https://www.bilibili.com/ 页面会重新加载，跳转到bilibili
 
// 修改href
location.href = "https://www.bilibili.com/"; // url: https://www.bilibili.com 是否会跳转可想而知

方法：

assign（）加载URL指定的新的html文档，可以后退

reload（）重新加载当前页，页面刷新

replace（）通过加载URL指定的文档来替换当前文档，没有后退功能

location.assign("https://www.bilibili.com");
可以后退回百度；
location.replace("https://www.bilibili.com");
无法后退；

// 正常重新加载
location.reload();
 
// 强制从服务器重新加载
location.reload(true);

鼠标键盘事件

Windows对象

onload（）对象装载完成后触发

onscroll（）窗口的滚动条被拖动时触发

onresize（）窗口的大小改变时触发

onblur ()/onfocus() 窗口失去/获得焦点时触发

onerror（）遇到执行错误时触发

onUnload（）对象被卸载后触发

表单

<form action="#" method="post" id="form">
    <p>用户名: <input type="text" name="username" /></p>
    <p>
        <button>注册</button>
        <button type="reset">重置</button>
    </p>
</form>
<script>
    var form = document.getElementById('form');
    //给文本框设置聚焦和失焦
    //先获取文本框
    var input = form.username;
    //设置聚焦事件
    //元素.onfocus = function(){}
    input.onfocus = function () {
        this.style.background = "pink";
    }
    //元素.onblur = function(){}
    input.onblur = function () {
        this.style.background = "";
    }
</script>