jQuery基础总结(三)

最新推荐文章于 2022-03-25 20:03:35 发布

顺其自然SLXYSYC

最新推荐文章于 2022-03-25 20:03:35 发布

阅读量300

点赞数

分类专栏： jquery 文章标签： jquery dom

本文链接：https://blog.youkuaiyun.com/yongchaocsdn/article/details/78636699

版权

jquery 专栏收录该内容

5 篇文章

订阅专栏

1.1 复习jQuery操作DOM

选择器 
基本选择器：#id 、.class 、element、* 、
层级选择器： 空格、>、+、~
     基本过滤选择器：:first、:last、:eq(index)、:lt(index)、:gt(index)、:odd、:even
     筛选选择器：.eq(index)、.children()、.parent()、.siblings()、.find()
     动画：show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle
            animate
     DOM操作：.css()、addClass(“className”)、removeClass()、toggleClass
                 .attr()、removeAttr()、.val()、.html(“<p></p>”)、text()
                 node.append(“<p>我是追加的内容</p>”)、prePend()

1.2 元素操作

1.2.1 高度和宽度

$(“div”).height();     // 高度
$(“div”).width();          // 宽度
.height()方法和.css(“height”)的区别：
1.  返回值不同，.height()方法返回的是 数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        jQuery(document).ready(function () {
            // 设置div的背景色
            $("div").css("background-color","green");
            // 设置高度
            $("button").eq(0).click(function () {
                // css方式设置高度
                //$("div").css("height","300px");
                //$("div").height(300);
                $("div").height("300px");
            });

            // 获取高度
            $("button").eq(1).click(function () {
                // 给div设置thml内容
                $("div").html("div的高度是：" + $("div").height());
            });

            // 设置宽度
            $("button").eq(2).click(function () {
                $("div").width(600);
            });

            // 获取宽度
            $("button").eq(3).click(function () {
                $("div").html("div的宽度是：" + $("div").width());
            });

            // 对比.css("height")和.height()
            $("button").eq(4).click(function () {
                console.log("height()方式获取的结果是：" + $("div").height());
                console.log("height()方式获取的结果类型：" + typeof $("div").height());
                console.log("css()方式获取的结果是：" + $("div").css("height"));
                console.log("css()方式获取的结果类型：" + typeof $("div").css("height"));
                /*$("div").html();
                $("div").html();*/
            });
        });
    </script>
</head>
<body>
    <button>设置高度</button>
    <button>获取高度</button>
    <button>设置宽度</button>
    <button>获取宽度</button>
    <button>对比CSS和height宽度</button>
    <div></div>
</body>
</html>

这里写图片描述

1.2.2 坐标值

$(“div”).offset(); // 获取或设置坐标值设置值后变成相对定位
$(“div”).position(); // 获取坐标值子绝父相只能读取不能设置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            /*position: absolute;*/
            top: 100px;
            left: 200px;
            width: 400px;
            height: 300px;
            background-color: #000000;
        }

        p {
            background: #666;
            position: absolute;
            top: 80px;
            left: 90px;
        }
    </style>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            // 获取offset坐标值
            $("#btn1").click(function () {
                console.log("距离页面上部的距离：" + $("div").offset().top);
                console.log("距离页面左边的距离：" + $("div").offset().left);
            });

            // 获取相对于父元素的位置
            $("#btn2").click(function () {
                console.log("相对与父元素上部的距离：" + $("p").position().top);
                console.log("相对与父元素左边的距离：" + $("p").position().left);
            });

            // 设置offset
            $("#btn3").click(function () {
                var txtTop = $("#txtTop").val();
                var txtLeft = $("#txtLeft").val();

                // 设置两个值：top和left
                /*$("div").offset({
                    top: txtTop,
                    left: txtLeft
                });*/

                $("div").offset({
                    left: txtLeft
                });
            });
        });
    </script>
</head>
<body>
<button id="btn1">获取offset坐标值</button>
<button id="btn2">获取position坐标值</button>
<button id="btn3">设置position坐标值</button>
<label for="txtTop">top：</label><input type="text" id="txtTop"/>
<label for="txtLeft">left：</label><input type="text" id="txtLeft"/>

<div>
    <p>我是div的子元素p</p>
</div>
</body>
</html>

1.2.3 滚动条（滚动事件）

$(“div”).scrollTop(); // 相对于滚动条顶部的偏移
$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            height: 300px;
            width: 300px;
            overflow: scroll;
            background: pink;
        }
        div p {
            height: 2000px;
            width: 2000px;
        }
    </style>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            // 获取
            $("#btn").click(function () {
                // 获取scrollTop值
                console.log($("div").scrollTop());
            });

            var i = 0;
            // 设置
            $("#btn1").click(function () {
                i += 100;
                $("div").scrollTop(i);
                $("div").scrollLeft(i);
            });
        });
    </script>
</head>
<body>
    <button id="btn">获取滚动条位置</button>
    <button id="btn1">设置滚动条位置</button>
    <div>
        <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
    </div>
</body>
</html>

这里写图片描述
案例:防腾讯固定导航栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>防腾讯固定导航栏</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .main{
            width: 1000px;
            margin:0 auto;
            /*margin-top: 20px;*/
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 获取顶部 top 的高度值
            var topHeight = $(".top").height();

            // 监听浏览器的滚动事件
            $(window).scroll(function () {
                var docScrollTop = $(document).scrollTop();
                //console.log(docScrollTop);
                // 判断一下 docScrollTOp 和 topHeight两个大小
                // 文档被卷去的高度 大于或等于 top高度的时候
                // 让导航栏变成固定定位
                if(docScrollTop >= topHeight) {
                    $(".nav").css({
                        "position": "fixed",
                        "top": 0
                    });

                    $(".main").css("margin-top" ,$(".nav").height());
                } else {
                    // 让固定导航栏变为默认状态 position: static
                    $(".nav").css({
                        "position": "static"
                    });
                    $(".main").css("margin-top" ,0);
                }
            });
        });
    </script>
</head>
<body>
<div class="top">
    <img src="images/top.png" />
</div>
<div class="nav">
    <img src="images/nav.png" />

</div>
<div class="main">
    <img src="images/main.png" />
</div>
</body>
</html>

这里写图片描述

案例:两侧跟随的广告

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .left, .right {
            position: absolute;
            top: 80px;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                var docScrollTop = $(document).scrollTop();

                //$(".main").css("top", docScrollTop + 80);
                $(".main").animate({"top" : docScrollTop + 80},30);
            });
        });
    </script>
</head>
<body>
<div class="left main"><img src="images/1.gif" alt=""/></div>
<div class="right main"><img src="images/2.gif" alt=""/></div>
<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>
</body>
</html>

这里写图片描述

1.3 jquery事件

1.3.1   绑定
click/mouseenter/blur/keyup
// 绑定事件
bind：$node.bind(“click”,function(){});
// 触发一次
one : $node.one(“click”,function(){});
delegate : $node.delegate(“p”,”click”,function(){});
on： $node.on(“click”,”p”,function(){});
1.3.2   解绑
unbind、undelegate   
off
1.3.3   触发
click   : $(“div”).click();
trigger：触发事件，并且触发浏览器默认行为
triggerHandler：不触发浏览器默认行为

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            /*$("button").click(function () {
                alert("我是click事件");
            }).mouseenter(function () {
                alert("我是click事件");
            });*/

            // bind 绑定两个事件
            /*$("button").bind("click mouseenter", function () {
                alert("我是click事件");
            });*/

            // 绑定两个事件，分别处理不同的效果
            /*$("button").bind({
                "click": function () {
                    alert("我是click事件");
                },
                "mouseenter": function () {
                    alert("我是mouseenter事件");
                }
            });*/

            // 传递数据
            /*$("button").bind("click",{ aa : true }, function (e) {
                alert(e.data.aa);
            });*/


            // one
            // 只触发一次
            /*$("button").one("click", function () {
                alert("我是one事件");
            });*/

            /*$("li").bind("click", function () {
                alert($(this).html());
            });*/

            // delegate绑定方式
            /*$("ul").delegate("li","click", function () {
                alert($(this).html());
            });*/

            // on 强烈推荐使用
            /*$("ul").on("click","li", function () {
                alert($(this).html());
            });*/

            /*$("div").on("click","h1", function () {
                alert($(this).html());
            });*/
        });
    </script>
</head>
<body>
    <button>绑定两个事件</button>
    <div>
        <p>我是p元素</p>
        <h1>我是h1元素1</h1>
        <h1>我是h1元素2</h1>
    </div>
    <ul>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
        <li>我是li6</li>
        <li>我是li7</li>
        <li>我是li8</li>
        <li>我是li9</li>
        <li>我是li10</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            // 绑定事件
            $("div").on("click mouseenter", "h1", function () {
                alert($(this).html());
            });

            $("div").off("click");
        });
    </script>
</head>
<body>
<button>绑定两个事件</button>
<div>
    <p>我是p元素</p>
    <h1>我是h1元素1</h1>
    <h1>我是h1元素2</h1>
</div>
<ul>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li>我是li4</li>
    <li>我是li5</li>
    <li>我是li6</li>
    <li>我是li7</li>
    <li>我是li8</li>
    <li>我是li9</li>
    <li>我是li10</li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            /*$("form").on("click","#btnSub", function () {
                var txtName = $("#txtName").val();
                if(txtName === "1") {
                    alert("提交成功");
                } else {
                    $("#txtName").val("").triggerHandler("focus");
                }
            });*/

            $("#btnSub").click(function () {
                var txtName = $("#txtName").val();
                if(txtName === "1") {
                    alert("提交成功");
                } else {
                    $("#txtName").val("").triggerHandler("focus");
                }
            });

            //
            $("#btnTrrigerHanlder").bind("click", function () {
                //$("#btnSub").trigger("click");
                $("#btnSub").triggerHandler("click");
            });
        });
    </script>
</head>
<body>
<form action="">
    <label for="txtName">用户名</label><input type="text" id="txtName"/>
    <input type="submit" value="提交" id="btnSub"/>
    <input type="button" value="触发提交" id="btnTrrigerHanlder"/>
</form>
</body>
</html>

鼠标跟随案例:


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: absolute;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            $(document).on("mousemove", function (e) {
                $("img").css({
                    "position": "absolute",
                    "top": e.pageY,
                    "left": e.pageX
                });




            });
        });
    </script>
</head>
<body>
<img src="img/ts.gif" alt=""/>
</body>
</html>

1.4 jQuery事件对象介绍

event.data //传递的额外事件响应方法的额外参数
event.currentTarget === this //在事件响应方法中等同于this，当前Dom对象
event.target //事件触发源，不一定===this
event.pageX //The mouse position relative to the left edge of the document
event.pageY
event.stopPropagation()//阻止事件冒泡
e.preventDefault(); //阻止默认行为
event.type //事件类型：click，dbclick…
event.which //鼠标的按键类型：左1 中2 右3
keydown : a,b,c
event.keyCode// code的c是大写

    案例：07图片跟随案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象案例</title>
    <style>
    .box {
        height: 200px;
        width: 400px;
        background-color: teal;
    }
    </style>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        jQuery(document).ready(function($) {
            $(".link").on("click", function(e){
                //取消默认操作
                e.preventDefault();
                //阻止事件冒泡
                // e.stopPropagation();

                console.log(e.type);

            });//jQuery 1.7 以上

            $(".box").on("click",function(e){
                console.log("div 事件响应方法执行");
                // alert("父div盒子被点击了");
                //怎么实现 ： 当前用户点击的是a标签，还是我自己div呢？
                if(e.target === this) {
                    console.log("你点击的div");
                }
            });

            $(window).click(function(event) {
                console.log(event.which);
            }).keydown(function(event) {
                //输出键盘字母的编码
                console.log(event.keyCode);
            });
        });
    </script>

</head>
<body>
    <div class="box">
        <a class="link" href="http://web.itcast.cn">传智前端学院</a>
    </div>
</body>
</html>