jquery基础知识3

1.jquery的位置信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            height: 400px;
            background-color: yellow;
            position: relative;
            top: 20px;
        }
        .box{
            width: 200px;
            height: 200px;
            padding: 10px;
            border:1px solid yellow;
            background-color: red;

            top: 10px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
    </div>
    <ul>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11d</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            //1.获取内容的宽和高
            // console.log($(".box").width());
            // console.log($(".box").height());

            //当2秒之后 让div的盒子的宽度变成400
            // delay() 必须要结合动画的方法
           // $(".box").delay(2000).hide(3000);
           //  setTimeout(function () {
           //      $(".box").width(400);
           //  },2000)

            //2.innerWidth() innerHeight()内部的宽和高 包含宽和高+paddding不包含boeder
            // $(".box").innerWidth(400);

            //3.outerWidth() outerHeight() 外部的宽和高 包含所有
            // console.log($(".box").outerHeight());

            // console.log($(".box").offset().top);

            //监听滚动事件
            $(document).scroll(function () {
                // console.log(11111);

                console.log($(this).scrollTop());
            });


        })
    </script>
</body>
</html>
View Code

2.回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .fixTop{
            position: fixed;
            bottom: 20px;
            right: 30px;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: #fff;
            background-color: #000;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <div class="fixTop">回到顶部</div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $(".fixTop").click(function () {
                $("html,body").animate({
                    "scrollTop":0
                },1000)
            })

        })
    </script>
</body>
</html>
View Code

3.事件流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
       // document.getElementById("btn").addEventListener("click",function () {
       //     alert(1);
       // },false);

        window.onload=(function (){
            var oBtn = document.getElementById('btn');

            //1.
            document.addEventListener('click',function(){
                console.log('document处于事件捕获阶段');
            }, true);

            //2.
            document.documentElement.addEventListener('click',function(){
                console.log('html处于事件捕获阶段');
            }, true);
            //3
             document.body.addEventListener('click',function(){
                console.log('body处于事件捕获阶段');
            }, true);
             //4.
            oBtn.addEventListener('click',function(){
                console.log('btn处于事件捕获阶段');
            }, true);
            //
            oBtn.addEventListener('click',function(){
                console.log('btn处于事件冒泡阶段');
            }, false);
            //5
             document.body.addEventListener('click',function(){
                console.log('body处于事件冒泡阶段');
            }, false);
             //6
              document.documentElement.addEventListener('click',function(){
                console.log('html处于事件冒泡阶段');
            }, false);
           //7.
            document.addEventListener('click',function(){
                console.log('document处于事件冒泡阶段');
            }, false);
        })

    </script>
</body>
</html>
View Code

4.事件冒泡的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div class="father">
        <button class="child">按钮</button>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            //默认传过来一个event
            $(".child").click(function (event) {
                console.log("按钮被点击了");
                console.log(this);
                // console.log(event);
                console.log(event.target);
                //阻止事件冒泡
                event.stopPropagation();
            })
            $(".father").click(function (event) {
                console.log("父盒子被点击了");
                console.log(this)
                //event.target 如果没有事件冒泡，指的是点击的目标对象
                console.log(event.target)
                console.log(event.currentTarget)
            })



        })
    </script>

</body>
</html>
View Code

5.换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       *{
            padding: 0;
            margin: 0;
        }
        .fu{
            position: fixed;
            top:0;
            left: 0;
            width: 100%;
            height: 320px;
            background-color: red;
            display: none;
        }
        .up{
            cursor: pointer;
        }
    </style>
</head>
<body style="height: 2000px">
    <a href='http://www.baidu.com' id="changeFu">换肤</a>
    <div class="fu">
        <ul>
            <li>
                <a href="javascript:void(0)">女神降临</a>
            </li>
            <li>
                <a href="javascript:void(0)">明星</a>
            </li>


            <span class="up">收起</span>

        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $("#changeFu").click(function (event) {
                // //阻止当前默认事件
                // event.preventDefault();
                // //阻止冒泡
                // event.stopPropagation();
                console.log(111);
                $(".fu").slideDown(1000);
                //想当于既阻止了默认事件又阻止冒泡
                return false;
            })
            $("body,.up").click(function (event) {
                $(".fu").slideUp(1000);
            })
            $(".fu ul li a").click(function (event) {
                event.stopPropagation();
                $(this).css("color","green").parent("li").siblings("li").find("a").css("color","blue");
            })
            $(".fu").click(function (event) {
                return false;
            })
        })
    </script>
</body>
</html>
View Code

6.事件代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li class="item1">
            <a href="javascript:void(0);" id="a">zhang</a>

        </li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            //绑定事件 如果使用事件委托的方式  以后的页面不会出现问题
            //第二个参数  表示的是后代的选择器
            //事件委托（代理）如果未来添加元素了 优先考虑事件委托

            $("ul").on("click","#a",function () {
                alert(this.innerText)
            })

            $("ul").append('<li><a href="javascript:void(0);" id="a">qing</a></li>')
        })
    </script>



</body>
</html>
View Code

7.合击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>按钮</button>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // $("button").mouseenter(function (event) {
            //
            // })
            // $("button").mouseleave(function (event) {
            //
            // })

            $("button").hover(function () {
                console.log("进入")
            },function () {
                console.log("离开")
            })


        })
    </script>


</body>
</html>
View Code

8.单双击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>按钮</button>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            //单双击的时间间隔是300ms
            var tim = null;
            var count = 0;
            $("button").click(function (event) {
                count++;
                clearTimeout(tim);
                var tim = setTimeout(function () {
                    if (count == 1){
                        console.log("单机");
                    }
                    count = 0;
                },300);

            });
            $("button").dblclick(function (event) {
                console.log("双击")
            });
        })
    </script>


</body>
</html>
View Code

9.聚焦和失焦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text">
    <script src="jquery.js"> </script>
    <script>
        //加载页面的时候 获取到焦点
        // $("input[type=text]").focus();
        //获取焦点时
        // $("input[type=text]").focus(function () {
        //     console.log(1);
        // });
        //获取到焦点并敲键盘时
        // $("input[type=text]").keydown(function (event) {
        //     console.log(1);
        //     console.log(event.keyCode);//键盘码
        // })
        //改变时
        // $('input[type=text]').change(function () {
        //     console.log(111);
        // })
        //选中内容的时候
         $('input[type=text]').select(function () {
             console.log(1111);
         })

    </script>
</body>
</html>
View Code

10.表单控件事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--form表单交互 接收不到 后端返回回来的数据-->
    <div>
        <input type="text" name="user">
        <input type="submit">
    </div>
    <script src="jquery.js"></script>
    <script>
        $('input[type=submit]').click(function (event) {
            var userName = $("input[type=text]").val();
            //发送ajax交互

        });
        //要是表单就取消自己的默认事件
        $('form').submit(function(event) {
            event.preventDefault();
        })
    </script>
</body>
</html>
View Code

 

posted @ 2018-10-08 17:40  被嫌弃的胖子  阅读(100)  评论(0)    收藏  举报