乐趣区

关于jquery:JQuery3

作者：

jiezi

在

JQuery事件处理

JQuery为咱们提供方便的事件注册机制，但有以下优缺点。
1.长处:操作简略，且不必放心事件笼罩等问题
2.毛病：不能解绑事件，且不能实现事件委托

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

事件处理程序on（）绑定事件

  • on():用于事件绑定，是目前最好用的事件绑定办法
  • off()事件解绑
  • trigger()/triggerHandler():事件触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>on()事件处理程序</title>
        <script src="jquery-3.5.1.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box,.container {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
                margin: 200px auto;
            }
            .curent {
                background-color: #008000;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        
        <div class="container"></div>
        <script>
            // on（）办法能够增加多个事件处理程序
             $(function(){
                 $('.box').on({
                     mouseenter:function(){
                         $(this).css('background','red')
                     },
                         
                     mouseleave:function(){
                          $(this).css('background','purple')
                     },
                     click:function(){
                         $(this).css('background','yellow')
                     }
                 })
                      //事件处理程序雷同的状况下
                     $('.container').on('mouseenter mouseleave',function(){
                         $(this).toggleClass('curent') 
                     })
             })
             
        
        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>on()事件处理程序</title>
        <script src="jquery-3.5.1.js"></script>
    </head>
    <body>
        <ul>
            <li>平庸的光荣 十分难看</li>
            <li>平庸的光荣 十分难看</li>
            <li>平庸的光荣 十分难看</li>
            <li>平庸的光荣 十分难看</li>
            <li>平庸的光荣 十分难看</li>
            <li>平庸的光荣 十分难看</li>
        </ul>
        <div class="box"></div>
        
        <script>
            $(function(){
                // on()办法能够实现事件委托
                $('ul').on('click','li',function(){
                    alert('very good')
                })
                
                // on（）能够给动静元素元素实现绑定事件
                $('.box').on('click','p',function(){
                    alert('咻咻咻')
                })
                
                
                var p =$("<p>hello</p>")
                $('.box').append(p)
            })
            
        </script>
    </body>
</html>

微博留言

1.点击公布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且增加到ul 中。
2.点击的删除按钮，能够删除以后的微博留言

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>微博公布性能</title>
    <script src="jquery-3.5.1.js"></script>
    <style>
        ＊ {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
            list-style: none;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px solid #CCCCCC;
            display: none;
        }

        input {
            float: right;
        }

        ul li a {
            float: right;
        }
    </style>
</head>
<body>
<div class="box">
    <span>微博公布</span>
    <textarea></textarea>
    <button class="bth">公布</button>
    <ul>

    </ul>
</div>
<script>
    $(function () {
    
    
        $('.bth').on('click', function () {
            //点击公布按钮 动态创建一个小li .放入文本框的内容和删除按钮，并且增加到ul外面
            let li = $("<li></li>");
            li.html($("textarea").val() + "<a href ='javascript:;'>删除</a>");
            $('ul').prepend(li);
            li.slideDown();
            $('textarea').val('')
        })

        
        // on能够给动态创建的元素绑定事件
        $('ul').on('click', 'a', function () {
            $(this).parent().remove()
        })
    })
</script>
</body>
</html>

解绑事件

jQuery 为咱们提供 了多种事件解绑办法：die() / undelegate() / off() 等
甚至还有只触发一次的事件绑定办法 one()，在这里咱们重点解说一下 off() ;

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

            div {
                width: 200px;
                height: 200px;
                background-color: black;
            }

            p {
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
        <script src="jquery-3.5.1.js"></script>
        <script>
            // 入口函数
            $(function() {
                $('div').on({
                    mouseenter: function() {
                        $(this).css("background", "yellow")
                    },
                    mouseleave: function() {
                        $(this).css("background", "purple")
                    }
                })
                //解绑div身上的鼠标挪动事件
                $('div').off('mouseenter');

                //事件委托
                $('ul').on('click', 'li', function() {
                    alert('事件委托')
                })
                //解除事件委托
                $('ul').off('click', "li");

                // 只触发一次事件
                $('p').one('click', function() {
                    alert("只触发一次事件")
                })

            })
        </script>
    </head>
    <body>
        <div></div>
        <ul>
            <li>知否</li>
            <li>知否</li>
            <li>知否</li>
            <li>知否</li>
            <li>知否</li>
            <li>知否</li>
        </ul>
        <p></p>
    </body>
</html>

事件处理trigger()主动触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主动触发事件</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
    <script src="jquery-3.5.1.js"></script>
    <script>
    $(function () {

        $('div').on('click', function () {
            alert("how are you")

        })

        $('input').on('focus',function(){
            $(this).val('how are you')
        })
        // 主动触发事件的三种办法
        //第一种办法
        $('div').click()
        //第二种办法
        $('div').trigger('click');
        //第三种办法  不会触发元素的默认行为
        $('input').triggerHandler('focus')

    })

    </script>
<body>
    <div></div>
    <input type="text">
</body>
</html>

JQuery事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更不便，应用变动不大。
事件被触发，就会有事件对象的产生。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery事件对象</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 200px auto;
        }
    </style>
</head>
<script src="jquery-3.5.1.js"></script>
<script>
    $(function(){
        $(document).on('click',function(e){
            console.log(e)
            alert('document')
        })
        $('div').on('click',function(e){
            alert('div');
            //勾销事件冒泡
            e.stopPropagation()
        })



    })
</script>
<body>
    <div></div>
</body>
</html>

JQuery拷贝对象

JQuery为咱们提供两套的疾速获取和设置元素尺寸和地位的API,不便易用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery拷贝对象</title>
</head>
<script src="jquery-3.5.1.js"></script>
<script>
    $(function () {
        //浅拷贝  会把原来对象外面的简单类型地址拷贝给指标对象
        var targetObj = {
            msg:{
                work:"it"
            }
        };
        var obj = {
            name:"尧子陌",
            sex:"男",
            age:'24',
            msg :{
                id:1,
            }
        };
        $.extend(targetObj,obj);
        console.log(targetObj)

        // 深拷贝 会把原来对象外面的数据齐全复制一份给指标对象，如果外面有不抵触的属性，则会合并在一起

        var targetObj2 = {
            age:'18',
            msg:{
                id:2
            },
        };
        var obj2 = {
            name:"尧子陌",
            sex:"男",
            age:'24',
            msg:{
                work:"it"
            },
        };
        $.extend(true,targetObj2,obj2);
        console.log(targetObj2)
    })
</script>
<body>

</body>
</html>

JQuery多库共存

随着jQuery的风行,采纳jQuery和$符为命名空间的js库越来越多便产生冲库，于是呈现JQuery多库共存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery多库共存</title>
</head>
<script src="jquery-3.5.1.js"></script>
<script>
        $(function () {
            //让JQuery放弃对$的控制权
            var zero = jQuery.noConflict();
            console.log(zero("span"))

        } )
</script>
<body>

    <span></span>
</body>
</html>

JQuery插件

jQuery 性能比拟无限，想要更简单的特效成果，能够借助于 jQuery 插件实现。插件也是依赖于jQuery来实现的，所以必须要先引入

jQuery文件，因而也称为 jQuery 插件。

JQuery插件的罕用网站

jQuery 插件罕用的网站：

  1. jQuery 插件库 http://www.jq22.com/
  2. jQuery 之家 http://www.htmleaf.com/

jQuery 插件应用步骤：

  • 引入相干文件。（jQuery 文件 和 插件文件）
  • 复制相干html、css、js (调用插件)。

瀑布流插件

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>JQuery瀑布流</title>
        <!-- 引进相干插件和文件 -->
        <link rel="stylesheet" href="./css/normalize.css">
        <link rel="stylesheet" href="./css/default.css">
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/pinterest_grid.js"></script>
        <style type="text/css">
            #gallery-wrapper {
                position: relative;
                max-width: 75%;
                width: 75%;
                margin: 50px auto;
            }

            img.thumb {
                width: 100%;
                max-width: 100%;
                height: auto;
            }

            .white-panel {
                position: absolute;
                background: white;
                border-radius: 5px;
                box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
                padding: 10px;
            }

            .white-panel h1 {
                font-size: 1em;
            }

            .white-panel h1 a {
                color: #A92733;
            }

            .white-panel:hover {
                box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
                margin-top: -5px;
                -webkit-transition: all 0.3s ease-in-out;
                -moz-transition: all 0.3s ease-in-out;
                -o-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
            }
        </style>
        <!--[if IE]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    </head>
    <body>
        <section class="htmleaf-container">
            <header class="htmleaf-header">
                <h1>兼容IE8的响应式网格瀑布流布局jQuery插件 <span>A Simple jQuery Plugin To Create Pinterest Style Grid Layout</span></h1>
                <div class="htmleaf-links">
                    <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span>
                            jQuery之家</span></a>
                    <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/pubuliuchajian/201601093003.html"
                     title="返回下载页" target="_blank"><span> 返回下载页</span></a>
                </div>
            </header>
        </section>
        <section id="gallery-wrapper">
            <article class="white-panel">
                <img src="img/focus1.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus2.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus3.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus4.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus1.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus2.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus3.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus4.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus1.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus2.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus3.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus4.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus1.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus2.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus3.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
            <article class="white-panel">
                <img src="img/focus4.jpg" class="thumb">
                <h1><a href="#">Title 1</a></h1>
                <p>Description 1</p>
            </article>
        </section>

        <script type="text/javascript">
            $(function() {
                $("#gallery-wrapper").pinterest_grid({
                    no_columns: 4,
                    padding_x: 10,
                    padding_y: 10,
                    margin_bottom: 50,
                    single_column_breakpoint: 700
                });

            });
        </script>
    </body>
</html>

懒加载插件

当页面滑动到有图片的地位，图片才开始加载，大大的进步页面的加载速度及用户体验

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery图片懒加载</title>
        <style>
            img {
                display: block;
                margin: 0 auto;
                margin-top: 100px;
            }
        </style>
    </head>

    <body>

        <img data-lazy-src="./img/focus1.jpg" alt="">
        <img data-lazy-src="./img/focus2.jpg" alt="">
        <img data-lazy-src="./img/focus3.jpg" alt="">
        <img data-lazy-src="./img/focus4.jpg" alt="">

        <!--引进相干插件 -->
        <script src="./js/jquery-3.5.1.js"></script>
        <script src="js/EasyLazyload.min.js"></script>
        <script>
            lazyLoadInit({

                offsetBottom: 0,
                offsetTopm: 0,
                showTime: 1100,
                onLoadBackEnd: function(i, e) {
                    console.log("onLoadBackEnd:" + i);
                },
                onLoadBackStart: function(i, e) {
                    console.log("onLoadBackStart:" + i);
                }
            });
        </script>
    </body>
</html>

全屏滚动插件（很重要）

全屏滚动插件比拟大，所以，个别大型插件都会有帮忙文档：http://www.dowebok.com/demo/2014/77/

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全屏滚动</title>
        <style>
            .section1 {
                background: url('./img/focus1.jpg') 50%;
            }

            .section2 {
                background: url(./img/focus2.jpg) 50%;
            }

            .section3 {
                background: url(./img/focus3.jpg) 50%;
            }

            .section4 {
                background: url(./img/focus4.jpg) 50%;
            }

            #menu {
                margin: 0;
                padding: 0;
                position: fixed;
                left: 10px;
                top: 10px;
                list-style-type: none;
                z-index: 70;
            }

            #menu li {
                float: left;
                margin: 0 10px 0 0;
                font-size: 14px;
            }

            #menu a {
                float: left;
                padding: 10px 20px;
                background-color: #fff;
                color: #333;
                text-decoration: none;
            }

            #menu .active a {
                color: #fff;
                background-color: #333;
            }

            #fp-nav ul li a.active span,
            #fp-nav ul li:hover a.active span,
            .fp-slidesNav ul li a.active span,
            .fp-slidesNav ul li:hover a.active span {
                background-color: whitesmoke;
            }
        </style>
    </head>
    <!--引进相干插件-->
    <link rel="stylesheet" href="./css/fullpage.min.css">
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="js/fullpage.min.js"></script>

    <body>
        <div id="dowebok">
            <div class="section section1">

            </div>
            <div class="section section2">

            </div>
            <div class="section section3">

            </div>
            <div class="section section4">

            </div>

            <ul id="menu">
                <li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
                <li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
                <li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
                <li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
            </ul>
        </div>
    </body>
    <script>
        $(function() {
            $('#dowebok').fullpage({
                'navigation': true,
                anchors: ['page1', 'page2', 'page3', 'page4'],
                menu: '#menu'

            });

            $('#dowebok').fullpage({
                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
                continuousVertical: true
            });

            setInterval(function() {
                $.fn.fullpage.moveSectionDown();
            }, 3000);
        });
    </script>
</html>

bootstrap插件

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依附jQuery实现，且反对响应式

组件是有数可复用的性能

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery组件</title>
    </head>
    <!--引进相干插件-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <!--引进JQuery文件-->
    <script src="jquery-3.5.1.js"></script>
    <!--引进bootstrap相干的js文件-->
    <script src="js/bootstrap.min.js"></script>
    <body>
        <div class="container-fluid">
            <nav class="navbar navbar-default">

                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                     aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">主页</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">导航 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">首页</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">选项卡
                                <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">提交</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">首页</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">选项卡<span
                                 class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->

            </nav>
        </div>
    </body>
</html>

bootstrap插件

bootstrap中的js插件其实也是组件的一部分，只不过是须要js调用性能的组件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery中的javascript插件</title>
        <style>
            .carousel-control span:nth-of-type(1) {
             position: absolute;
             top: 50%;
             font-weight: 700;
             font-size: 50px;

        }
        img {
            display: block;
        }
        .focus {
            width: 1920px;
            height: 1080px;
            overflow: hidden;
        }
    </style>
    </head>
    <!--引进相干插件-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <body>
        <div class="container-fluid">
            <!--选项卡-->
            <div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
                    <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
                    <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
                    <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
                </div>

            </div>

            <div class="focus">
                <!--轮播图-->


                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="./img/focus1.jpg" alt="...">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>
                        <div class="item">
                            <img src="./img/focus2.jpg" alt="...">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>

                        <div class="item">
                            <img src="./img/focus3.jpg" alt="...">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>

                        <div class="item">
                            <img src="./img/focus3.jpg" alt="...">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>
                        ...
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span>
                            <</span> <span class="sr-only">Previous
                        </span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span>></span>

                        <span class="sr-only">Next</span>
                    </a>
                </div>

            </div>
            <!-- 模态框 -->
            <button type="button" class="btn btn-primary btn-lg" id="bth">
                模态框
            </button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            china I love you
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        $(function() {
            $('#bth').on('click', function() {
                console.log('hello word')
                $('#myModal').modal()
            })
            $('.carousel').carousel({
                interval: 2000
            })

        })
    </script>
</html>

JQuery取得元素的尺寸

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

            .box {
                width: 200px;
                height: 200px;
                margin: 200px auto;
                padding: 20px;
                border: 10px solid red;
                background-color: blue;
            }
        </style>
        <script src="jquery-3.5.1.js"></script>
    </head>
    <body>
        <div class="box"></div>
    </body>

    <script>
        $(function() {
            //获取匹配元素的宽度
            console.log($('.box').width());
            console.log($('.box').innerWidth());
            console.log($('.box').outerWidth());
            console.log($('.box').outerWidth(true))
            //获取匹配元素的高度
            console.log($('.box').height());
            console.log($('.box').innerHeight());
            console.log($('.box').outerHeight());
            console.log($('.box').outerHeight(true))
        })
    </script>
</html>

JQuery地位

offset():取得设置间隔文档的地位

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery地位之offset()</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .father {
                width: 600px;
                height: 600px;
                background: red;
                margin: 200px auto;
            }

            .son {
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>
    <script src="jquery-3.5.1.js"></script>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
    <script>
        $(function() {
            //offset()取得设置间隔文档的地位
            console.log($('.son').offset());
            console.log($('.son').offset().top);
            console.log($('.son').offset().left);
            console.log($('.son').offset({
                top: 200,
                left: 680
            }))




        })
    </script>
</html>

position():取得间隔定位父元素的间隔

留神：不能设置，只能读取

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery地位之position()</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .father {
                position: relative;
                width: 600px;
                height: 600px;
                background: red;
                margin: 200px auto;
            }

            .son {
                position: absolute;
                top: 20px;
                left: 20px;
                width: 200px;
                height: 200px;
                background-color: blue;
            }
        </style>
    </head>
    <script src="jquery-3.5.1.js"></script>
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
    <script>
        $(function() {
            //offset()取得设置间隔定位父元素之间的间隔
            console.log($('.son').position());
            console.log($('.son').position().top);
            console.log($('.son').position().left);





        })
    </script>
</html>

scrolLeft()及scrollTop()
（1）scrollLeft() : 设置或返回被选元素的程度滚动条地位；
（2）scrollTop() : 设置或返回垂直滚动条地位；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Jquery地位之scrollTop()及scrollLeft()</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .container {
                width: 800px;
                height: 800px;
                background-color: blue;
                margin: 200px auto;
            }

            .goBack {
                display: none;
                position: fixed;
                bottom: 50px;
                right: 0;
                width: 100px;
                height: 50px;
                color: whitesmoke;
                font-weight: 700;
                text-align: center;
                line-height: 50px;
                background-color: purple;
            }
        </style>
    </head>
    <script src="jquery-3.5.1.js"></script>
    <body>
        <div class="goBack">返回顶部</div>
        <div class="container"></div>
    </body>
    <script>
        $(function() {
            let conTop = $('.container').offset().top;
            $(window).scroll(function() {
                if ($(document).scrollTop() >= conTop) {
                    $('.goBack').fadeIn()
                } else {
                    $('.goBack').fadeOut()
                }

            })
            //返回顶部
            $('.goBack').click(function() {
                $('body,html').stop().animate({
                    scrollTop: 0,
                })
            })
        })
    </script>
</html>

电梯导航案例

1、当页面滚动绝对应的模块，就让电梯导航显示进去
2、当点击电梯导航页面就能够滚动到相应页面
3、电梯导航模块与内容区模块意义对应
4、当咱们点击电梯导航某个小模块，就能够拿到以后小模块的索引号
5、就能够把annimate要挪动的间隔求进去；以后索引号内容区模块它的offset().top
6、而后执行动画即可

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

            body {
                height: 6000px;
            }

            .bg_c {
                background-color: red;
            }

            .box {
                width: 1200px;
                height: 600px;
                margin: 200px auto;
                background-color: black;
            }

            .header,
            .nav,
            .section,
            .footer {
                width: 1200px;
                height: 500px;
                text-align: center;
                line-height: 500px !important;
                font: normal 700 20px '楷体';
                color: white;
                margin: 50px auto;
            }

            .header {

                background-color: pink;
            }

            .nav {
                background-color: red;
            }

            .section {
                background-color: blue;
            }

            .footer {
                background-color: purple;
            }

            .aside {
                display: none;
                position: fixed;
                top: 200px;
                left: 50%;
                width: 200px;
                background-color: purple;
                margin-left: -800px;
            }

            .aside ul {
                list-style: none;
            }

            .aside ul li {

                cursor: pointer;
                width: 100%;
                color: white;
                text-align: center;
                padding: 5px 0px;
                border-bottom: 1px dashed white;
            }

            .goBack {
                cursor: pointer;
                width: 100%;
                height: 30px;
                text-align: center;
                line-height: 30px;
            }
        </style>
        <script src="jquery-3.5.1.js"></script>
    </head>
    <body>
        <div class="box"></div>
        <div class="floor">
            <div class="header item">header</div>
            <div class="nav item">nav</div>
            <div class="section item">section</div>
            <div class="footer item">footer</div>
        </div>

        <div class="aside">
            <ul>
                <li class="bg_c">header</li>
                <li>nav</li>
                <li>section</li>
                <li>purple</li>
            </ul>
            <div class="goBack">顶部</div>
        </div>
    </body>

    <script>
        $(function() {
            let boxTop = $('.box').offset().top
            togleClass()

            function togleClass() {
                $(window).scroll(function() {
                    if ($(document).scrollTop() >= boxTop) {
                        $('.aside').fadeIn()
                    } else {
                        $(".aside").fadeOut()
                    }

                })
            }

            $('.aside li').click(function() {
                console.log($(this).index())
                $(this).addClass('bg_c').siblings('li').removeClass('bg_c')
                // 当咱们每次点击小li的时候，页面会去往绝对应的地位
                var cuRent = $('.floor .item').eq($(this).index()).offset().top - 200
                //    须要做动画
                $('body,html').stop().animate({
                    scrollTop: cuRent,
                })
            })
            $('.goBack').one('click', function() {
                $('html,body').stop().animate({
                    scrollTop: 0
                })
            })


        })
    </script>
</html>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章