18

2024-02-09 23:29:04

1-如何多次给同一元素绑定多种同类型的事件？ onclick()方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定多个事件</title>
    <script>
        window.onload = function(){
            document.getElementById('btn').onclick = function () {
                alert(1);
            };
            document.getElementById('btn').onclick = function () {
                alert(2);
            };
        }
    </script>
</head>
<body>
<button id="btn">点我</button>
</body>
</html>

运行结果是第二个onclick把第一个onclick给覆盖了，虽然大部分情况用on就可以完成想要的结果，但是有时又需要执行多个相同的事件，很明显如果用on不能完成

addEventListener()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定多个事件</title>
    <script>
        window.onload = function(){
            document.getElementById('btn').addEventListener('click', function(){
                alert(1);
            }, false);
            document.getElementById('btn').addEventListener('click', function(){
                alert(2);
            }, false);
        }
    </script>
</head>
<body>
<button id="btn">点我</button>
</body>
</html>

2-说明 localStorage 和 sessionStorage 的区别

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问
并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅、是会话级别的存储。只允许同一窗口访问。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。

并且他们储存的对象类型均为字符串类型；

3-localStorage 和 sessionStorage 和 cookies 的区别

4-使用 jquery 完成一个 ajax 请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <title>jquery</title>
</head>
<body>
    <div id="content"></div>
    <button id="btnLoad">Load载入</button>
    <button id="btnGet">Get载入</button>
    <button id="btnAjax">Ajax载入</button>

</body>
</html>
<script>
    $(document).ready( function () {

        $('#btnLoad').click( function () {
            $('#content').load('/content/ p',function () {
                alert('载入成功');
            });
        });

        $('#btnGet').click( function () {
            $.get('/content/',null,function (response) {
                $('#content').html(response);
            });
        });

        $('#btnAjax').click( function () {
            $.ajax({
                url:'/content/',
                method:'Get',
                data:null,
                success: function (response) {
                    $('#content').html(response);
                }
            });
        });
    });
</script>

5-http 常见的状态码有哪些？

200("OK")
一切正常。实体主体中的文档（若存在的话）是某资源的表示。
400("Bad Request")
客户端方面的问题。实体主题中的文档（若存在的话）是一个错误消息。希望客户端能够理解此错误消息，并改正问题。
500("Internal Server Error")
服务期方面的问题。实体主体中的文档（如果存在的话）是一个错误消息。该错误消息通常无济于事，因为客户端无法修复服务器方面的问题。
301("Moved Permanently")
当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外，当客户端向一个资源的旧URI发送请求时，也发送此响应代码。
404("Not Found") 和410("Gone")
当客户端所请求的URI不对应于任何资源时，发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况；410用于服务器端知道客户端所请求的资源曾经存在，但现在已经不存在了的情况。
409("Conflict")
当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。

码农公寓

addEventListener()方法

相关文章