前端事件、ajax、media

一、事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
    <div>
        <a href="http://www.qq.com">点我</a>
    </div>
    <form action="http://www.baidu.com">
        <label>
            User <input type="text">
        </label>
        <label>
            Password <input type="password">
        </label>
        <input type="submit" value="提交">
    </form>
</div>
<script type="text/javascript">
    $("a").click(function () {
        // 阻止a标签和from表单的默认行为
        event.preventDefault();
        // 阻止冒泡
        event.stopPropagation();
        console.log("a");
    });
    $("form").click(function () {
        // 阻止a标签和from表单的默认行为
        event.preventDefault();
        // 阻止冒泡
        event.stopPropagation();
        console.log("form");
    });
    $("div").click(function () {
        // 阻止a标签和from表单的默认行为
        event.preventDefault();
        // 阻止冒泡
        event.stopPropagation();
        console.log("div");
    })
</script>
</body>
</html>

二、ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<button>获取天气</button>
<p></p>
<script type="text/javascript">
    $(function () {
        $("button").click(function () {
            $.ajax({
                url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=b73a12edfab24ef6827447dc7557f50d',
                type:"get",
                dataType:'text',
                success:function (data) {
                        console.log(data);
                        // 把字符串转换成可操作的数组
                        var jsonData = JSON.parse(data);
                        console.log(jsonData);
                        $("p").text(data)
                    },
                error:function (err) {
                    console.log(err);
                }
            })
        })
    })
</script>
</body>
</html>

三、media

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <style>
    @media screen and (min-width: 1170px){
        body{
            background-color: red;
        }
    }
    @media screen and (min-width: 880px) and (max-width: 1170px){
        body{
            background-color: green;
        }
    }
    @media screen and (max-width: 880px){
        body{
            background-color: yellow;
        }
    }
    </style>
</head>
<body>
</body>
</html>

 

posted @ 2018-07-24 11:32  S.Curry  阅读(190)  评论(0)    收藏  举报