关于jquery:JQuery3

10次阅读

共计 22005 个字符，预计需要花费 56 分钟才能阅读完成。

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>

正文完
jquery
发表至： jquery
2020-09-13
 0
关于jquery:day-31-jQuery进阶
关于jquery:jQuery-安装
关于jquery:云原生时代谁是容器的最终归宿
关于jquery:如何用好云的弹性

站内搜索

-「」