jQuery 基础

一初识　

　　1.参考网址 http://jquery.cuishifeng.cn/

　　2.基本语法：$(selector).action()

二寻找元素(重要的选择器和筛选器)

2.1 选择器

2.1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")

2.1.2层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

2.1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

2.1.4 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')

2.1.5 表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签

$("input:checked")

2.2 筛选器

2.2.1 过滤筛选器

$("li").eq(2) $("li").first() $("ul li").hasclass("test")

2.2.2 查找筛选器

$("div").children(".test") $("div").find(".test")

$(".test").next() $(".test").nextAll() $(".test").nextUntil()

$("div").prev() $("div").prevAll() $("div").prevUntil()

$(".test").parent() $(".test").parents() $(".test").parentUntil()

$("div").siblings()

左侧菜单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        .menu{
            width: 20%;
            height: 500px;
            background-color: #2459a2;
            float: left;
        }
        .menu .title{
            color: white;
            font-size: 20px;
            text-align: center;
        }

        .content{
            width: 80%;
            height: 500px;
            background-color: green;
            float: left;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="pg_body">
        <div class="menu">
            <div class="item">
                <div class="title" onclick="show(this);">标题一</div>
                <div class="list">
                    <ul>
                        <li>111</li>
                        <li>111</li>
                        <li>111</li>
                    </ul>
                </div>
            </div>
             <div class="item">
                <div class="title" onclick="show(this);">标题二</div>
                <div class="list hide">
                    <ul>
                        <li>111</li>
                        <li>111</li>
                        <li>111</li>
                    </ul>
                </div>
            </div>
             <div class="item">
                <div class="title" onclick="show(this);">标题三</div>
                <div class="list hide">
                    <ul>
                        <li>111</li>
                        <li>111</li>
                        <li>111</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content">
        </div>
    </div>
    <script>
        function show(args) {
            //第一种
            $(args).next().removeClass('hide');
            $(args).parent().siblings().children(".list").addClass('hide');
            //第二种
//            $('.title').next().addClass('hide');
//            $(args).next().removeClass('hide');
        }
    </script>
</body>
</html>

View Code

tab切换实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        .menu{
            width: 300px;
            height: 50px;
            background-color: #2459a2;
        }
        .menu ul{
            list-style: none;
            line-height: 50px;
            text-align: center;
            padding: 0;
            margin: 0;
        }
        .menu ul li{
            display: inline-block;
            padding: 0px;
            margin: 0px;
            width:96px ;
            color: white;
        }
        .content{
            width: 300px;
            height: 200px;
            background-color: #dce7f4;
        }
        .current{
            background-color: darkmagenta;
            color: #2459a2;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div class="menu">
            <ul>
                <li class="current" onclick="show(this);" abc="i1">菜单一</li>
                <li onclick="show(this);" abc="i2">菜单二</li>
                <li onclick="show(this);" abc="i3">菜单三</li>
            </ul>
        </div>
        <div class="content">
            <div id="i1">内容一</div>
            <div id="i2" class="hide">内容二</div>
            <div id="i3" class="hide">内容三</div>
        </div>
    </div>
    <script>
        function show(args) {
            $(args).addClass('current').siblings().removeClass('current');
            var ind = $(args).attr('abc');
            $('#'+ind).removeClass('hide').siblings().addClass('hide');
        }
    </script>
</body>
</html>

View Code

三操作元素(属性 CSS 和文档处理)

3.1 属性操作

$("p").text() $("p").html() $(":checkbox").val()

$(".test").attr("alex") $(".test").attr("alex","sb")

$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")

$(".test").prop("checked",true)

$(".test").addClass("hide")

全选反选实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        table tr td{
            width: 60px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td><input type="checkbox"></td>
            <td>1111</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>2222</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>3333</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>4444</td>
        </tr>
    </table>
    <div>
        <input type="button" value="全选" onclick="selectAll();">
        <input type="button" value="取消" onclick="cancleAll();">
        <input type="button" value="反选" onclick="reverseAll();">
    </div>
    <script>
        //全选
        function selectAll() {
            $('table :input').prop('checked',true);
        }
        //取消
        function cancleAll() {
            $('table :input').prop('checked',false);
        }
        //反选，循环集合
        function reverseAll() {
            $('table :input').each(function () {
                if($(this).prop('checked')){
                    $(this).prop('checked',false);
                }else {
                    $(this).prop('checked',true);
                }
            });
        }
        //另一种，循环集合的方法
        li = [11,22,33,44];
        $.each(li,function (a,b) {
            console.log(a,b);
        });
    </script>
</body>
</html>

View Code

模态对话框实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.js"></script>
    <style>
        #shadow{
            position: fixed;
            top: 0px;
            right: 0px;
            left: 0px;
            bottom: 0px;
            background-color: rgba(0,0,0,0.6);
            z-index: 5;
        }
        #modle{
            position: fixed;
            width: 300px;
            height: 300px;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            background-color: #336699;
            z-index: 10;
        }
        .hide{
            display: none;
        }
        #form{
            margin-top: 50px;
            line-height: 50px;
            text-align: center;
            color: white;
        }
        #btn input[type='submit']{
            margin-right: 50px;
        }
        .edit{
            background-color: #b4b4b4;
            color: blueviolet;
        }
        .edit:hover{
            color: red;
        }
    </style>
</head>
<body>
    <table border="1px">
        <thead>
        <tr>
            <th>主机</th>
            <th>IP</th>
            <th>端口</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td target="host">www.baidu.com</td>
                <td target="ip">1.1.1.1</td>
                <td target="port">8000</td>
                <td class="edit">编辑</td>
            </tr>
            <tr>
                <td target="host">www.sina.com</td>
                <td target="ip">1.1.1.2</td>
                <td target="port">8080</td>
                <td class="edit">编辑</td>
            </tr>
             <tr>
                <td target="host">www.sogou.com</td>
                <td target="ip">1.1.1.3</td>
                <td target="port">800</td>
                <td class="edit">编辑</td>
            </tr>
        </tbody>
    </table>
    <div id="shadow" class="hide"></div>
    <div id="modle" class="hide">
        <form action="#" method="get" id="form">
            <div><label>主机：</label><input type="text" name="host" id="host"></div>
            <div><label>地址：</label><input type="text" name="ip" id="ip"></div>
            <div><label>端口：</label><input type="text" name="port" id="port"></div>
            <div id="btn"><input type="submit" value="修改" onclick="return mysubmit();"><input type="button" value="取消" onclick="m_cancel();"></div>
        </form>
    </div>
    <script>
        $('.edit').click(function () {
            $('#shadow,#modle').removeClass('hide');
            var con_list = $(this).prevAll();
            con_list.each(function () {
                var target = $(this).attr('target');
                var text = $(this).text();
                $("#"+target).val(text);

            });
        });
        function m_cancel() {
            $('#shadow,#modle').addClass('hide');
            $('#modle').find("input[type='text']").val("");
        }
        function mysubmit() {
            var flag = true;
             $('#modle').find("input[type='text']").each(function () {
                 if($(this).val().trim().length==0){
                     flag = false;
                     return;
                 }
             });
            console.log(flag);
            return flag;
        }

    </script>
</body>
</html>

View Code

3.2 CSS操作

3.2.1(样式) css("{color:'red',backgroud:'blue'}")

3.2.2(位置) offset() position() scrollTop() scrollLeft()

3.2.3(尺寸) height() width()

返回顶部实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        .div1{
            height: 500px;
            background-color: #339900;
        }
        .div2{
            height: 500px;
            background-color: #e59373;
        }
        .div3{
            width: 50px;
            height: 50px;
            background-color: red;
            line-height: 50px;
            color: white;
            position: fixed;
            right: 28px;
            bottom: 8px;
            cursor: pointer;
        }
        .div4{
            height: 100px;
            background-color: #2459a2;
            overflow: auto;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3 hide" onclick="backTop();">ToTop</div>
    <div class="div4">
        <div>111</div><div>111</div><div>111</div><div></div>
        <div>111</div><div>111</div><div>111</div><div>111</div>
        <div>111</div><div>111</div><div>111</div><div>111</div>
        <div>111</div><div>111</div><div>111</div><div>111</div>
        <div>111</div><div>111</div><div>111</div><div>111</div>
        <div>111</div><div>111</div>
        <div onclick="reTop();" style="cursor: pointer;color: white">返回顶部</div>
    </div>
    <script>
        // 给窗口增加滚动事件
        window.onscroll = function () {
            var num = $(window).scrollTop();
            if(num>100){
                $('.div3').removeClass('hide');
            }else {
                $('.div3').addClass('hide');
            }
        };
        // 窗口滚动条返回顶部
        function backTop() {
            $(window).scrollTop(0);
        }

        // 给div4 增加滚动事件不成功
//        $('.div4').onscroll = function () {
//             alert('sss')
//             var num = $('.div4').scrollTop();
//             console.log(num);
//        };
        // 给div4 增加滚动事件
        $('.div4').on('scroll',function () {
             var num = $('.div4').scrollTop();
             console.log(num);

        }) ;
        // div4 滚动条返回顶部
        function reTop() {
            $('.div4').scrollTop(0);
        }
    </script>
</body>
</html>

View Code

滚动菜单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        body{
            margin: 0px;
        }
        .pg-header{
            height: 50px;
            background-color: black;
        }
        .pg-body{
        }
        .pg-body .menu{
            position: absolute;
            top: 50px;
            left: 200px;
            width: 100px;
            height:65px;
            background-color: #2459a2;
            color: white;
            text-align: center;
        }
        .pg-body .content{
            position: absolute;
            top: 50px;
            right: 200px;
            width: 800px;
            background-color: #339900;
        }
        .pg-body .con{
            height: 500px;
            border: 1px solid red;
        }
        .pg-body .addcolor{
            color: yellow;
            background-color: #204982;
        }
        .pg-body .fixed{
            position: fixed;
            top: 0px;

        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="menu">
            <div class="item" abc="con1">第一章</div>
            <div class="item" abc="con2">第二章</div>
            <div class="item" abc="con3">第三章</div>
        </div>
        <div class="content">
            <div class="con" bcd="con1">第一章内容</div>
            <div class="con" bcd="con2">第二章内容</div>
            <div class="con" bcd="con3">第三章内容</div>
        </div>
    </div>
    <script>
        window.onscroll = function () {
            var scrollNum = $(window).scrollTop();
            if(scrollNum>50){
                $('.menu').addClass('fixed');
            }else {
                $('.menu').removeClass('fixed');
            }
            //整个HTML的高度
            var documentHeight = $(document).height()
            //可视窗口的高度
            var windowHeight = $(window).height();
//            console.log(scrollNum,windowHeight,documentHeight)
            //滚动条高度+可视窗口高度==文档高度
            if((scrollNum+windowHeight)==documentHeight){
                //菜单下最后一个添加，倒数第二个移除样式
                $('.menu').children().last().addClass('addcolor').prev().removeClass('addcolor');
                return
            }
            // 所有的孩子循环 执行这个函数
            $(".content").children().each(function () {
                //this 当前孩子标签, 标签头部距离顶部的高度
                var offset = $(this).offset().top;
                // 标签尾部距离顶部的高度
                var total = $(this).height() + offset;
                // 滚动条的高度在 标签的头与尾之间
                if(scrollNum>offset && scrollNum<total){
                    //获取当前标签属性bcd 的值
                    var index = $(this).attr('bcd');
                    // 字符串拼接
                    var str_index = '[abc="'+index+'"]';
                    //查到menu 菜单的abc = index 的标签，添加样式，兄弟标签移除样式
                    $(str_index).addClass('addcolor').siblings().removeClass('addcolor');
                }
            });
        };
    </script>

</body>
</html>

View Code

3.3 文档处理

内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")

prepend() prependTo()

外部插入 before() insertBefore() after insertAfter()

replaceWith() remove() empty() clone()

clone 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="outer">
        <div class="section">
            <button class="btn" onclick="add(this);" style="width: 23px;height: 23px">+</button>
            <input type="checkbox">
            <input type="text">
        </div>
    </div>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        function add(ths) {
            var section = $(ths).parent().clone();
            section.find('button').text('-');
            section.find('button').attr('onclick','del(this);');
            $('.outer').append(section);
        }
        function del(ths) {
            $(ths).parent().remove();
        }
    </script>
</body>
</html>

View Code

3.4 事件

3.4.1

$(document).ready(function(){}) -----------> $(function(){})

3.4.2

$("p").click(function(){})

$("p").bind("click",function(){})

$("ul").delegate("li","click",function(){})

拖动面板实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="js/jquery-3.2.1.js"></script>-->
    <!--<style>-->
        <!--*{-->
            <!--margin: 0px;-->
        <!--}-->
        <!--.window{-->
            <!--position: absolute; /*需要设置为绝对定位*/-->
            <!--width: 300px;-->
            <!--border: 1px solid black;-->
            <!--top: 200px;-->
            <!--left: 200px;-->
        <!--}-->
        <!--#title{-->
            <!--height: 50px;-->
            <!--background-color: black;-->
        <!--}-->
        <!--.content{-->
            <!--height: 200px;-->
            <!--background-color: white;-->
        <!--}-->
        <!--.-->
    <!--</style>-->
</head>
<body>
    <div class="window" style="width: 600px;border: 1px solid black;position: absolute">
        <div id="title" style="height: 50px;background-color: black"> </div>
        <div class="content" style="height: 200px"></div>
    </div>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        $(function () {
            $('#title').mouseover(function () {  //鼠标移在title上
                $(this).css('cursor','move');
            }).mousedown(function (e) { //鼠标按下
                var eve = e || window.event // 兼容浏览器
                //鼠标的原始位置
                var old_point_left = eve.clientX;
                var old_point_top = eve.clientY;
                //窗口的原始位置
                var old_window_left = $(this).parent().offset().left;
                var old_window_top = $(this).parent().offset().top
                // title绑定mousemover
                $(this).bind('mousemove',function (e) {
                    var new_eve = e || window.event;
                    // 获取新鼠标的位置
                    var new_point_left = new_eve.clientX;
                    var new_point_top = new_eve.clientY;
                    // 窗口改变的位置
                    var new_window_left = old_window_left + new_point_left - old_point_left;
                    var new_window_top = old_window_top + new_point_top - old_point_top;
                    //设置窗口位置
                    $(this).parent().css('left',new_window_left+'px');
                    $(this).parent().css('top',new_window_top+'px');
                });
            }).mouseup(function () { //鼠标释放
                $(this).unbind('mousemove');
            });
        });
    </script>
</body>
</html>

View Code

放大镜实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.js"></script>
    <style>
        .outer{
            position: relative;
        }
        .outer .small_box{
            position: absolute;
            top:0;
            left: 0;
            width: 400px;
            height: 400px;
            border: 2px solid red;
            z-index: 10;
        }
        .outer .panel{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgba(0,0,0,0.6);
            z-index: 20;
            display: none;
        }
        .outer .big_box{
            position: absolute;
            top: 0;
            left: 410px;
            width: 450px;
            height: 450px;
            overflow: hidden;
            border: 2px solid red;
            display: none;
            z-index: 10;
        }
        .outer .big_box img{
            position: absolute;
            z-index: 20;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="small_box">
            <div class="panel"></div>
            <img src="image/small.png">
        </div>
        <div class="big_box">
             <img src="image/big.png">
        </div>
    </div>
    <script>
        $(function () {
            makebig();
        })
        function makebig() {
            $('.small_box').mouseover(function () {
                $('.panel').css('display','block');
                $('.big_box').css('display','block');
            });
            $('.small_box').mouseout(function () {
                $('.big_box').css('display','none');
                $('.panel').css('display','none');
            });
            $('.small_box').bind('mousemove',function (e) {
                var _event = e|| window.event;
                //小盒子 大盒子长宽
                var small_box_height = $('.small_box').height();
                var small_box_width  = $('.small_box').width();
                var big_box_height = $('.big_box').height();
                var big_box_width  = $('.big_box').width();
                //面板的长宽
                var panel_height = $('.panel').height();
                var panel_width = $('.panel').width();
                //半个面板长度
                var panel_height_half = $('.panel').height()/2;
                var panel_width_half = $('.panel').width()/2;
                //鼠标的位置
                var point_x  = _event.clientX;
                var point_y = _event.clientY;
                // 面板位置 = 鼠标位置 - 半个面板的长度
                var move_x = point_x - panel_width_half;
                var move_y = point_y - panel_height_half;
                //左右边界限制
                if(move_x<0){
                    move_x=0;
                }else if(move_x>small_box_width-panel_width){
                    move_x = small_box_width-panel_width;
                }
                //上下边界限制
                if(move_y<0){
                    move_y=0;
                }else if(move_y>small_box_height-panel_height){
                    move_y = small_box_height-panel_height;
                }
                // 面板移动
                $('.panel').css({'left':move_x+'px','top':move_y+'px'});

                // 放大比例
                var big_rate_x = ($('.big_box img').width() -big_box_width)/(small_box_width - panel_width);
                var big_rate_y = ($('.big_box img').height() -big_box_height)/(small_box_height - panel_height);
                //图片偏移
                $('.big_box img').css('left',-big_rate_x*move_x +'px');
                $('.big_box img').css('top',-big_rate_y*move_y +'px');

            });

        }
    </script>
</body>
</html>

View Code

3.5 动画效果

隐藏与显示实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: #2459a2;
        }
        .d2{
            width: 100px;
            height: 100px;
            background-color: darkolivegreen;
        }
        .d3{
            width: 100px;
            height: 100px;
            background-color: crimson;
        }
    </style>
    <script>
        $(function () {
            $('#hide').click(function () {
                $('.d1').hide();
                $('.d2').hide(1000);
                $('.d3').hide(2000);
            });
            $('#show').bind('click',function () {
                $('.d1').show();
                $('.d2').show(1000);
                $('.d3').show(2000);
            });
            $('#show_hide').on('click',function () {
                $('.d1').toggle();
                $('.d2').toggle(1000);
                $('.d3').toggle(2000);
            })
        });
    </script>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <button id="hide">hide</button>
    <button id="show">show</button>
    <button id="show_hide">show/hide</button>
</body>
</html>

View Code

淡入淡出实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        #d1{
            width: 200px;
            height: 200px;
            background-color: #204982;
        }
        #d2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('.fadeout').click(function () {
                $('#d1').fadeOut();
                $('#d2').fadeOut(3000);
            });
            $('.fadein').click(function () {
                $('#d1').fadeIn();
                $('#d2').fadeIn(3000);
            });
            $('.fadein_out').click(function () {
                $('#d1').fadeToggle();
                $('#d2').fadeToggle(3000);
            });
            $('.fadeto').click(function () {
                $('#d1').fadeTo(0,0.3);
                $('#d2').fadeTo(3000,0.4);
            });
        });
    </script>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>

    <button class="fadeout">fadeout</button>
    <button class="fadein">fadein</button>
    <button class="fadein_out">fadein/out</button>
    <button class="fadeto">fadeto</button>
</body>
</html>

View Code

滑动实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        #d1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #d2{
            width: 100px;
            height: 100px;
            background-color: darkmagenta;
        }
        #d3{
            width: 100px;
            height: 100px;
            background-color: goldenrod;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('.slideup').click(function () {
                $('#d1').slideUp();
                $('#d2').slideUp(1000);
                $('#d3').slideUp(2000);
            });
            $('.slidedown').click(function () {
                $('#d1').slideDown();
                $('#d2').slideDown(1000);
                $('#d3').slideDown(2000);
            });
             $('.slidetoggle').click(function () {
                $('#d1').slideToggle();
                $('#d2').slideToggle(1000);
                $('#d3').slideToggle(2000);
            });
        });
    </script>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <button class="slideup">slideup</button>
    <button class="slidedown">slidedown</button>
    <button class="slidetoggle">slidetoggle</button>
</body>
</html>

View Code

回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: #2459a2;
        }
        .d2{
            width: 100px;
            height: 100px;
            background-color: darkolivegreen;
        }
        .d3{
            width: 100px;
            height: 100px;
            background-color: crimson;
        }
    </style>
    <script>
        $(function () {
            $('#hide').click(function () {
                // 隐藏第一个div 后 设置回调函数 
                $('.d1').hide(function () {
                    //隐藏第二div后 设置回调函数
                    $('.d2').hide(1000,function () {
                        //隐藏第三个div
                        $('.d3').hide(2000);
                    });
                });
            });
        });
    </script>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <button id="hide">hide</button>
</body>
</html>

View Code

3.6 扩展（插件机制）

jquery.extend({})
jquery.fn.extend({})

定义与使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: gainsboro;
        }
    </style>
    <script>
        $(function () {
            // jQuery.fn.extend定义方法
            jQuery.fn.extend({
                abc: function () {
                    this.css({'background-color': 'red', 'border': '1px solid black'});
                },
                bcd: function () {
                    alert('bcd');
                }
            });
            //调用方法
            $('#fn_extend').click(function () {
                $('.d1').abc();
            });
            //jQuery.extend定义方法
            jQuery.extend({
                cde:function (arg) {
                    $(arg).text('123456');
                },
                def:function () {
                    alert('def');
                }
            });
            //调用方法
            $('#extend').click(function () {
                 $.cde('.d1');
            });

        });
    </script>
</head>
<body>
    <div class="d1"></div>
    <button id="fn_extend">fn_extend</button>
    <button id="extend">extend</button>
</body>
</html>

View Code

四实例

京东：图片轮播实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .content{
            width: 790px;
            height: 340px;
            margin: 0 auto;
            position: relative;
        }
        .content:hover{
            cursor: pointer;
        }
        ul{
            list-style: none;
        }
        .img li{
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .num {
            position: absolute;
            font-size: 0px;
            left: 0px;
            bottom: 0px;
            width: 100%;
            text-align: center;
            /* 上面两行 让menu水平居中*/
        }
        .num li{
            display: inline-block; /* 让li标签竖 变横*/
            width: 20px;
            height: 20px;
            background-color: #b4b4b4;
            border-radius: 20px;  /* 圆的边框*/
            text-align: center;
            line-height: 20px;
            font-size: 14px;
            margin: 5px;
        }
        .btn{
            position: absolute;
            width: 30px;
            height: 60px;
            background-color: #b4b4b4;
            text-align: center;
            line-height: 60px;
            top: 50%;
            margin-top: -30px;
            opacity: 0.6;
            font-weight: bolder;
        }
        .content .btn_left{
            left: 0px;
        }
        .content .btn_right{
            right: 0px;
        }
        .content .current{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="content">
            <ul class="img">
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
            </ul>
            <ul class="num">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        <div class="btn_left btn"> < </div>
        <div class="btn_right btn"> > </div>
    </div>
    <script>
        $(function () {
            // 给 num li 的第一标签 添加背景色
            $('.num li').first().addClass('current');
            // 鼠标移动到 num li 标签上
            $('.num li').mouseover(function () {
                // 给当前li 标签 添加背景色
                $(this).addClass('current').siblings().removeClass('current');
                //获取当前li标签的索引
                var index = $(this).index();
                //对应的背景图淡入淡出
                $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000);
            });
            // 开启定时器 让图片轮换
            var time = setInterval(move,2000);
            i = 0;
            // 图片轮换函数
            function move() {
                // 索引加一
                i ++;
                //  i ++ ==8 时  第八张图切换到第一张图
                if(i==8){
                    i=0;
                }
                // i --2 ==-1   第一张图切换到第八张图
                if(i==-1){
                    i=7;
                }
                // 给当前li 标签 添加背景色
                $('.num li').eq(i).addClass('current').siblings().removeClass('current');
                //对应的背景图淡入淡出
                $('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000);
            }
            //鼠标移入 鼠标移除 事件hover ,参数为 移入，移除函数
            $('.content').hover(function () {
                // 鼠标移入content  定时器终止
                clearInterval(time)
            },function () {
                // 鼠标移出，开启定时器
                time = setInterval(move,2000);
            });
            // 按钮绑定点击事件
            $('.btn_left').click(function () {
                //索引减 2
                i -=2;
                // 图片轮换，索引+1  ， （-2+1 = -1 ）
                move();
            });
             $('.btn_right').click(function () {
                 // 图片轮换，索引+1 
                move();
            });
        });
    </script>
</body>
</html>

View Code

商城菜单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .pg_header{
            height: 50px;
            background-color: crimson;
        }
        .pg_header .goodsort{
            display: inline-block;
            width: 100px;
            height: 100%;
            color:white;
            line-height: 50px;
            text-align: center;
        }
        .pg_header .goodsort:hover{
            background: red;
            color: #b3b3b3;

        }
        .pg_body{
            height: 300px;
        }
        .pg_body .goodlist{
            width: 150px;
            height: 100%;
            background: green;
            float: left;
        }
         .pg_body .listcontent{
            float: left;
            width: 400px;
            height: 100%;
            background: blue;
        }
        .hide{
            display: none;
        }
        .pg_body .catagory{
            background-color: yellow;
            padding-left: 3px;
            width: 100%;
            height: 99px;
            border-bottom: 1px solid grey ;
        }
        .pg_body .catagory:hover{
            border-left: 3px solid red;
            padding-left: 0px;
        }
        .pg_body .listcontent dl{
            float: left;
            width: 400px;
            height: 300px;
        }
        .pg_body .listcontent dl a{
            color: white;
        }

    </style>
</head>
<body>
    <div class="pg_header">
        <div class="goodsort">
            全部商品分类
        </div>
    </div>
    <div class="pg_body">
        <div class="goodlist hide" id="goodlist">
            <div class="catagory" target="one">
                <div class="title">家用电器</div>
                <a href="#">空调</a>
            </div>
            <div class="catagory" target="two">
                <div class="title">休闲服饰</div>
                <a href="#">nike</a>
            </div>
            <div class="catagory" target="three">
                 <div class="title">户外运动</div>
                <a href="#">篮球</a>
            </div>
        </div>
        <div class="listcontent hide" id="listcontent">
            <div class="content hide" id="one">
                <dl>
                    <dt><a href="#">家用电器</a></dt>
                    <dd><span><a href="#">电视</a></span></dd>
                </dl>
            </div>
            <div class="content hide" id="two">
                <dl>
                    <dt><a href="#">休闲服饰</a></dt>
                    <dd><span><a href="#">童装</a></span></dd>
                </dl>
            </div>
            <div class="content hide" id="three">
               <dl>
                    <dt><a href="#">户外运动</a></dt>
                    <dd><span><a href="#">高尔夫</a></span></dd>
                </dl>
            </div>
        </div>
    </div>
    <script>
            $('.goodsort').bind('mouseover',function () {
                $('#goodlist').removeClass('hide');
            });
             $('.goodsort').bind('mouseout',function () {
                $('#goodlist').addClass('hide');
            });
             $('.goodlist').bind('mouseover',function () {
                $(this).removeClass('hide');
            });
             $('.goodlist').bind('mouseout',function () {
                $(this).addClass('hide');
            });
            $('.goodlist').children().bind('mouseover',function () {
                var index = $(this).attr('target');
                $('#'+index).removeClass('hide').siblings().addClass('hide');
                $('#'+index).parent().removeClass('hide');
            });
            $('.goodlist').children().bind('mouseout',function () {
                $(this).parent().next().addClass('hide');
            });
           $('#listcontent').bind('mouseover',function () {
               $('#goodlist').removeClass('hide');
               $(this).removeClass('hide')
           });
            $('#listcontent').bind('mouseout',function () {
                $('#goodlist').addClass('hide');
                $(this).addClass('hide')
            });

    </script>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <title>购物商城</title>
    <style>

*{
    margin: 0;
    padding: 0;
}
.hide{
    display:none;
}


.header-nav {
    height: 39px;
    background: #c9033b;
}
.header-nav .bg{
    background: #c9033b;
}

.header-nav .nav-allgoods .menuEvent {
    display: block;
    height: 39px;
    line-height: 39px;
    text-decoration: none;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-family: 微软雅黑;
    color: #fff;
    width: 100px;
}
.header-nav .nav-allgoods .menuEvent .catName {
    height: 39px;
    line-height: 39px;
    font-size: 15px;
}

.header-nav .nav-allmenu a {
    display: inline-block;
    height: 39px;
    vertical-align: top;
    padding: 0 15px;
    text-decoration: none;
    color: #fff;
    float: left;
}

.header-menu a{
    color:#656565;
}

.header-menu .menu-catagory{
    position: absolute;
    background-color: #fff;
    border-left:1px solid #fff;
    height: 316px;
    width: 230px;
     z-index: 4;
     float: left;
}
.header-menu .menu-catagory .catagory {
    border-left:4px solid #fff;
    height: 104px;
    border-bottom: solid 1px #eaeaea;
}
.header-menu .menu-catagory .catagory:hover {
    height: 102px;
    border-left:4px solid #c9033b;
    border-bottom: solid 1px #bcbcbc;
    border-top: solid 1px #bcbcbc;
}

.header-menu .menu-content .item{
    margin-left:230px;
    position:absolute;
    background-color:white;
    height:314px;
    width:500px;
    z-index:4;
    float:left;
    border: solid 1px #bcbcbc;
    border-left:0;
    box-shadow: 1px 1px 5px #999;
}

    </style>
</head>
<body>

<div class="pg-header">

    <div class="header-nav">
        <div class="container narrow bg">
            <div class="nav-allgoods left">
                <a id="all_menu_catagory" href="#" class="menuEvent">
                    <strong class="catName">全部商品分类</strong>
                    <span class="arrow" style="display: inline-block;vertical-align: top;"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="header-menu">
        <div class="container narrow hide">
            <div id="nav_all_menu" class="menu-catagory">
                <div class="catagory" float-content="one">
                    <div class="title">家电</div>
                    <div class="body">
                        <a href="#">空调</a>
                    </div>
                </div>
                <div class="catagory" float-content="two">
                    <div class="title">床上用品</div>
                    <div class="body">
                        <a href="http://www.baidu.com">床单</a>
                    </div>
                </div>
                <div class="catagory" float-content="three">
                    <div class="title">水果</div>
                    <div class="body">
                        <a href="#">橘子</a>
                    </div>
                </div>
            </div>

            <div id="nav_all_content" class="menu-content">
                <div class="item hide" float-id="one">

                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>

                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#">菜板</a> </span>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="碗">碗</a> </span>

                        </dd>
                    </dl>

                </div>
                <div class="item hide" float-id="two">
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="">角阀</a> </span>

                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>

                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">厨房用品</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>

                        </dd>
                    </dl>

                </div>
                <div class="item hide" float-id="three">
                    <dl>
                        <dt><a href="#" class="red">厨房用品3</a></dt>
                        <dd>
                            <span>| <a href="#" target="_blank" title="角阀">角阀3</a> </span>

                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#" class="red">厨房用品3</a></dt>
                        <dd>
                            <span>| <a href="http://www.meilele.com/category-jiaofa/" target="_blank" title="角阀">角阀3</a> </span>

                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

</div>


<script src="js/jquery-2.2.3.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        Change_Menu('#all_menu_catagory','#nav_all_menu', '#nav_all_content');

    });



    function Change_Menu(all_menu_catagory,menu, content) {
        $all_menu_catagory = $(all_menu_catagory);
        $menu = $(menu);
        $content = $(content);

        $all_menu_catagory.bind("mouseover", function () {
            $menu.parent().removeClass('hide');
        });
        $all_menu_catagory.bind("mouseout", function () {
            $menu.parent().addClass('hide');
        });

        $menu.children().bind("mouseover", function () {
            $menu.parent().removeClass('hide');
            $item_content = $content.find('div[float-id="' + $(this).attr("float-content") + '"]');
            $item_content.removeClass('hide').siblings().addClass('hide');
        });
        $menu.bind("mouseout", function () {
            $content.children().addClass('hide');
            $menu.parent().addClass('hide');
        });
        $content.children().bind("mouseover", function () {

            $menu.parent().removeClass('hide');
            $(this).removeClass('hide');
        });
        $content.children().bind("mouseout", function () {

            $(this).addClass('hide');
            $menu.parent().addClass('hide');
        });
    }
</script>


</body>
</html>

View Code

编辑框实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .edit-mode{
            background-color: #b3b3b3;
            padding: 8px;
            text-decoration: none;
            color: white;
        }
        .editing{
            background-color: #f0ad4e;
        }
    </style>
</head>
<body>

    <div style="padding: 20px">
        <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />
        <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />
        <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />

        <a id="edit_mode" class="edit-mode" href="javascript:void(0);"  onclick="EditMode(this, '#tb1');">进入编辑模式</a>

    </div>
    <table border="1">
        <thead>
        <tr>
            <th>选择</th>
            <th>主机名</th>
            <th>端口</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody id="tb1">
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下线</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script>
        /*
         监听是否已经按下control键
         */
        window.globalCtrlKeyPress = false;

        window.onkeydown = function(event){
            if(event && event.keyCode == 17){
                window.globalCtrlKeyPress = true;
            }
        };
        window.onkeyup = function(event){
            if(event && event.keyCode == 17){
                window.globalCtrlKeyPress = false;
            }
        };

        /*
         按下Control，联动表格中正在编辑的select
         */
        function MultiSelect(ths){
            if(window.globalCtrlKeyPress){
                var index = $(ths).parent().index();
                var value = $(ths).val();
                $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
                    $(this).parent().parent().children().eq(index).children().val(value);
                });
            }
        }
    </script>
    <script type="text/javascript">

$(function(){
    BindSingleCheck('#edit_mode', '#tb1');
});

function BindSingleCheck(mode, tb){

    $(tb).find(':checkbox').bind('click', function(){
        var $tr = $(this).parent().parent();
        if($(mode).hasClass('editing')){
            if($(this).prop('checked')){
                RowIntoEdit($tr);
            }else{
                RowOutEdit($tr);
            }
        }
    });
}

function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){
    var sel= document.createElement('select');
    $.each(attrs,function(k,v){
        $(sel).attr(k,v);
    });
    $.each(csses,function(k,v){
        $(sel).css(k,v);
    });
    $.each(option_dict,function(k,v){
        var opt1=document.createElement('option');
        var sel_text = v[item_value];
        var sel_value = v[item_key];

        if(sel_value==current_val){
            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));
        }else{
            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));
        }
    });
    return sel;
}

STATUS = [
    {'id': 1, 'value': "在线"},
    {'id': 2, 'value': "下线"}
];

BUSINESS = [
    {'id': 1, 'value': "车上会"},
    {'id': 2, 'value': "二手车"}
];

function RowIntoEdit($tr){
    $tr.children().each(function(){
        if($(this).attr('edit') == "true"){
            if($(this).attr('edit-type') == "select"){
                var select_val = $(this).attr('sel-val');
                var global_key = $(this).attr('global-key');
                var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);
                $(this).html(selelct_tag);
            }else{
                var orgin_value = $(this).text();
                var temp = "<input value='"+ orgin_value+"' />";
                $(this).html(temp);
            }

        }
    });
}

function RowOutEdit($tr){
    $tr.children().each(function(){
        if($(this).attr('edit') == "true"){
            if($(this).attr('edit-type') == "select"){
                var new_val = $(this).children(':first').val();
                var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();
                $(this).attr('sel-val', new_val);
                $(this).text(new_text);
            }else{
                var orgin_value = $(this).children().first().val();
                $(this).text(orgin_value);
            }

        }
    });
}

function CheckAll(mode, tb){
    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){

            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){

            }else{
                check_box.prop('checked',true);

                RowIntoEdit(tr);
            }
        });

    }else{

        $(tb).find(':checkbox').prop('checked', true);
    }
}

function CheckReverse(mode, tb){

    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                check_box.prop('checked',false);
                RowOutEdit(tr);
            }else{
                check_box.prop('checked',true);
                RowIntoEdit(tr);
            }
        });


    }else{
        //
        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                check_box.prop('checked',false);
            }else{
                check_box.prop('checked',true);
            }
        });
    }
}

function CheckCancel(mode, tb){
    if($(mode).hasClass('editing')){
        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                check_box.prop('checked',false);
                RowOutEdit(tr);

            }else{

            }
        });

    }else{
        $(tb).find(':checkbox').prop('checked', false);
    }
}

function EditMode(ths, tb){
    if($(ths).hasClass('editing')){
        $(ths).removeClass('editing');
        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                RowOutEdit(tr);
            }else{

            }
        });

    }else{

        $(ths).addClass('editing');
        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                RowIntoEdit(tr);
            }else{

            }
        });

    }
}


    </script>

</body>
</html>

View Code

posted @ 2017-05-22 14:40 1916 阅读(111) 评论(0) 收藏举报

刷新页面返回顶部

1916

jQuery 基础

公告