jquery之实例应用

Query是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

http://www.php100.com/manual/jquery/

选择器与筛选器系列

　模态框

jquery之实例应用

a{

    text-decoration: none;

    color: #428bca;

}

.modal-backdrop{

    position: fixed;

    top:0;

    right:0;

    bottom:0;

    left:0;

    z-index: 1040;

    background-color: #000000;

    opacity:0.8

}

.modal{

    position: fixed;

    top:50%;

    left:50%;

    z-index: 1050;

    max-height: 500px;

    overflow: auto;

    width: 560px;

    margin: -250px 0 0 -280px;

    background-color: #ffffff;

    border: solid 1px #999;

    border: 1px solid rgba(0, 0, 0, 0.3);

    *border: 1px solid #999;

}

.modal-header{

    padding: 9px 15px;

    border-bottom: solid 1px #eeeeee;

}

.modal-header .close{

    margin-top: 2px;

}

.modal-body{

    padding: 10px;

}

.modal-footer{

    padding: 14px 15px 15px;

    margin-top: 0;

    background-color: #f5f5f5;

    border-top: solid 1px #dddddd;

    -webkit-border-radius: 0 0 6px 6px

     -moz-border-radius: 0 0 6px 6px;

    border-radius: 0 0 6px 6px;

    box-shadow: inset 0 1px 0 #ffffff;

    *zoom: 1;

}

.modal-footer .btn{

    float: right;

    margin-left: 5px;

    margin-bottom: 0px;

}

.btn {

    display: inline-block;

    padding: 6px 12px;

    margin-top:0;

    font-size: 14px;

    font-weight: normal;

    line-height: 1.428571429;

    text-align: center;

    cursor: pointer;

    vertical-align: middle;

    border: solid 1px transparent;

    border-radius: 4px;

}

.btn-sucess{

    color: #ffffff;

    background-color: #5cb85c;

    border:solid 1px #4cae4c;

}

.btn:hover,.bth:focus{

    color: #333333;

    text-decoration: none;

}

.hide{

    display: none;

}

/*modal.css*/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模态</title>

    <link rel="stylesheet" href="css/modal.css">

    <style type="text/css">

    </style>

</head>

<body>

    <div>

        <input type="button" onclick="fadeIn()" value="模态对话框">

    </div>

    <div id="formTable" class="modal hide">

        <form id="form0" method="post" action="">

            <div class="modal-header" style="height: 40px;">

                <div style="float: left">This is a Modal Heading</div>

                <div style="float: right"><a class="close" id="close" onclick="fadeOut()" style="cursor: pointer">x</a></div>

            </div>

            <div class="modal-body">

                <h4>Text in a modal</h4>

                <p>You can add some text here.</p>

            </div>

            <div class="modal-footer">

                <a class="btn btn-sucess" onclick="fadeOut()">提交</a>

                <a class="btn" data-dismiss="modal" onclick="fadeOut()">关闭</a>

                <a class="btn" data-dismiss="modal" onclick="fadeOut()">关闭</a>

            </div>

        </form>

    </div>

    <div id="shade" class="modal-backdrop hide"></div>

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

    <script>

        function fadeIn(){

            $("#formTable").removeClass('hide');

            $("#shade").removeClass('hide')

        }

        function fadeOut(){

            $("#formTable").addClass('hide');

            $("#shade").addClass('hide')

        }

    </script>

</body>

</html>

　加载

　 jquery之实例应用

.modal-backdrop{

    position: fixed;

    top:0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 1050;

    background-color: white;

    opacity: 0.8;

}

.modal{

    position: fixed;

    top:30%;

    left:50%;

    z-index: 1030;

}

.hide{

    display: none;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>load</title>

    <link rel="stylesheet" href="css/load.css">

</head>

<body>

    <div>

        <input type="button" value="模态对话框" onclick="fadeIn();">

    </div>

    <div id="shade" class="modal-backdrop hide">

        <div class="modal">

            <img src="data:images/loading_32.gif">

        </div>

    </div>

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

    <script type="text/javascript">

        function fadeIn(){

            $("#shade").removeClass('hide')

        }

    </script>

</body>

</html>

　　左侧菜单

jquery之实例应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>加载</title>

    <style type="text/css">

        .left{

            width: 20%;

            height: 500px;

            float: left;

            background-color: darkslategrey;

        }

        li{

            list-style-type: none;

            color: white;

            font-size: 20px;

        }

        .hide{

            display: none;

        }

        .title{

            font-size: 25px;

            color:red;

        }

    </style>

</head>

<body>

    <div class="left">

        <ul>

            <li class="title" onclick="Func_Menu(this);">家用电器

                <ul class="hide">

                    <li>电视</li>

                    <li>空调</li>

                    <li>洗衣机</li>

                </ul>

            </li>

            <li class="title" onclick="Func_Menu(this);">电脑办公

                <ul class="hide">

                    <li>电脑设备</li>

                    <li>游戏设备</li>

                    <li>网络设备</li>

                </ul>

            </li>

            <li class="title" onclick="Func_Menu(this);">医药保健

                <ul class="hide">

                    <li>中西药品</li>

                    <li>营养健康</li>

                    <li>保健器械</li>

                </ul>

            </li>

        </ul>

    </div>

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

    <script type="application/javascript">

        function Func_Menu(ths){

            $(ths).children().removeClass('hide');

            $(ths).siblings().children().addClass('hide');

        }

    </script>

</body>

</html>

　　Tab表横向表单

jquery之实例应用

body{

    margin: 0 auto;

    font-family: Arial;

    font-size: 12px;

}

body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div {

    margin: 0;

    padding: 0;

}

ol,ul,li{

    list-style-type: none;

}

.container{

    width:1190px;

    margin-left: auto;

    margin-right: auto;

}

.tab-menu-box1{

    border: solid 1px #dddddd;

    margin-top:20px;

}

.tab-menu-box1 .menu{

    line-height: 33px;

    height: 33px;

    background-color: #f5f5f5;

}

.tab-menu-box1 .content{

    min-height: 100px;

    border-top: solid 1px #dddddd;

    background-color: white;

}

.tab-menu-box1 .menu ul li{

    position: relative;

    float: left;

    font-size: 14px;

    font-family: 'Microsoft Yahei','SimHei';

    text-align: center;

    font-weight: bold;

    border-right: solid 1px #dddddd;

    padding: 0 18px;

    cursor: pointer;

}

.tab-menu-box1 .menu ul li:hover{

    color: #c9033b;

}

.tab-menu-box1 .menu .current{

    margin-top:-1px;

    color: #c9033b;

    background: #ffffff;

    height: 33px;

    border-top: solid 2px #c9033b;

    z-index: 10;

}

.hide{

    display: none;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>tab</title>

    <link rel="stylesheet" href="css/tab.css">

</head>

<body>

    <div class="container">

        <div class="tab-menu-box1">

            <div class="menu">

                <ul id="tab-menu-title">

                    <li class="current" content-to="1">价格趋势</li>

                    <li content-to="2">市场分布</li>

                    <li content-to="3">其它</li>

                </ul>

            </div>

            <div id="tab-menu-body" class="content">

                <div content="1">content1</div>

                <div content="2" class="hide">content2</div>

                <div content="3" class="hide">content3</div>

            </div>

        </div>

    </div>

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

    <script type="text/javascript">

        $(function(){

            ChangeTab('#tab-menu-title','#tab-menu-body');

        })

        function ChangeTab(title,body){

            $(title).children().bind('click',function(){

                $menu = $(this);

                $content = $(body).find('div[content="'+ $(this).attr("content-to") + '"]');

                $menu.addClass('current').siblings().removeClass('current');

                $content.removeClass('hide').siblings().addClass('hide');

            });

        }

    </script>

</body>

</html>

　　拐角

jquery之实例应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>拐角</title>

    <style type="text/css">

        a{

            background-color: #ffffff;

            border-top: solid 10px red;

            border-right: solid 0px;

            border-bottom: solid 0px gray;

            border-left: solid 20px transparent;

        }

        .container{

            width: 800px;

            height: 900px;

            background-color: #999999;

            margin-left: auto;

            margin-right: auto;

        }

        .top{

            height: 20px;

        }

        .middle{

            height: 40px;

            background-color: #333333;

            margin-left: -18px;

        }

        h3{

            line-height: 40px;

            margin-left: 25px;

            color: #ffffff;

        }

        .coner{

            border-width: 8px 0px 0px 18px;

            border-style: solid;

            border-color: #666666 transparent transparent transparent;

            margin-left: -18px;

            width: 0px;

        }

    </style>

</head>

<body>

    <a></a>

    <div class="container">

        <div class="top"></div>

        <div class="middle">

            <h3>汔车之家</h3>

        </div>

        <div class="left coner"></div>

    </div>

</body>

</html>

　　弹出确定取消框

jquery之实例应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style type="text/css">

        .h{

            position: absolute;

            margin-top: -55px;

            display: none;

        }

        table td{

            height: 25px;

        }

        .artItLaCorner{

            border-width: 8px 8px 8px 8px;

            margin:0 0 0 0;

            border-style: solid;

            border-color: #3498db transparent transparent transparent;

            width: 0px;

        }

        .show{

            display: table;

        }

    </style>

</head>

<body>

    <div id="main" style="height: 400px">

        <table>

            <tr>

                <td>第一行</td>

                <td>第一行</td>

                <td>

                    <div style="background-color: red">

                        <div onclick="show(this);">father</div>

                        <div class="h">

                            <div style="background-color: #3498db;width: 100px;">

                                <button>确定</button>

                                <button onclick="hide(this);">取消</button>

                            </div>

                            <div class="artItLaCorner" style="margin-left: 17px;"></div>

                        </div>

                    </div>

                </td>

            </tr>

            <tr>

                <td>第二行</td>

                <td>第二行</td>

                <td>

                    <div style="background-color: red">

                        <div onclick="show(this);">father</div>

                        <div class="h">

                            <div style="background-color: #3498db;width: 100px;">

                                <button>确定</button>

                                <button onclick="hide(this);">取消</button>

                            </div>

                            <div class="artItLaCorner" style="margin-left: 17px;"></div>

                        </div>

                    </div>

                </td>

            </tr>

            <tr>

                <td>第三行</td>

                <td>第三行</td>

                <td>

                    <div style="background-color: red">

                        <div onclick="show(this);">father</div>

                        <div class="h">

                            <div style="background-color: #3498db;width: 100px;">

                                <button>确定</button>

                                <button onclick="hide(this);">取消</button>

                            </div>

                            <div class="artItLaCorner" style="margin-left: 17px;"></div>

                        </div>

                    </div>

                </td>

            </tr>

        </table>

    </div>

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

    <script type="text/javascript">

        function show(arg){

            $(arg).siblings().addClass('show')

        }

        function hide(arg){

            $(arg).parent().parent().removeClass('show')

        }

    </script>

</body>

</html>

　　返回顶部

jquery之实例应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>返回顶部</title>

    <style>

        .container{

            height: 2000px;;

        }

        .back{

            position: fixed;

            right: 0px;

            bottom: 0px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div class="container"></div>

    <div onclick="back_top(this);" class="back hide">返回顶部</div>

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

    <script type="text/javascript">

        function back_top(){

            $(window).scrollTop(0)

        }

//        html加载完成，自动执行函数

        $(function (){

//            监听鼠标滚轮

            $(window).scroll(function(){

                var top = $(window).scrollTop();

                if(top < 100){

                    $('.back').addClass('hide')

                }else{

                    $('.back').removeClass('hide')

                }

            })

        })

    </script>

</body>

</html>

　　全选、取消、反选

jquery之实例应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>多选全选反选</title>

</head>

<body>

    <div id = "checklist">

        <input type="checkbox">足球

        <input type="checkbox">蓝球

        <input type="checkbox">羽毛球

    </div>

    <input type="button" value="全选" id="selectAll">

    <input type="button" value="取消" id="unselectA">

    <input type="button" value="反选" id="reverseAll">

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

    <script type="text/javascript">

        $(function(){

            $("#selectAll").click(function () {

                $("#checklist :checkbox").prop("checked",true)

            });

            $("#unselectA").click(function(){

                $("#checklist :checkbox").prop("checked",false)

            });

            $("#reverseAll").click(function(){

                $("#checklist :checkbox").each(function () {

                    $(this).prop("checked",!$(this).prop("checked"))

                })

            })

        })

    </script>

</body>

</html>

　　移动面板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>移动面板</title>

</head>

<body>
//position很重要，没有它，移动会失败

    <div style="width: 600px;position: absolute">

        <div id="title" style="background-color: black;height: 40px;"></div>

        <div style="background-color: #00415e;border: solid 1px red;height: 300px;"></div>

    </div>

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

    <script type="text/javascript">

        $(function(){

            $("#title").mouseover(function () {

//                鼠标指针变为move

                $(this).css('cursor','move');

            }).mousedown(function(e){

//                监听鼠标按下时的x,y坐标

                var _event = e||window.event;

                var old_x = _event.clientX;

                var old_y = _event.clientY;

//                其父标签的位置

                var parent_left = $(this).parent().offset().left;

                var parent_top = $(this).parent().offset().top;

//                鼠标移动后的x,y坐标

                $(this).bind("mousemove",function (e) {

                    var _new_event = e||window.event;

                    var new_x = _new_event.clientX;

                    var new_y = _new_event.clientY;

//                    鼠标移动后父标签的真正位置

                    var x = parent_left + (new_x - old_x);

                    var y = parent_top + (new_y - old_y);

                    $(this).parent().css("left",x +'px');

                    $(this).parent().css("top",y +'px');

                })

            }).mouseup(function(){

                $(this).unbind('mousemove')

            })

        })

    </script>

</body>

</html>

滚动菜单

jquery之实例应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .left{

            width:20%;

            height:2000px;

            float:left;

            position: fixed;

            top:10px;

            bottom: 0px;

            background-color: #fafafa;

        }

        .right{

            width:80%;

            float:right;

            position: relative;

        }

        .current{

            background-color:gray;

            color:white;

        }

        .r_top{

            height:100px;

            background-color:red;

        }

        .c1{

            height:1000px;

        }

        .c2{

            height:700px;

        }

        .c3{

            height:300px;

        }

    </style>

</head>

<body>

    <div class="left">

        <div class="go-f1">第一章</div>

        <div class="go-f2">第二章</div>

        <div class="go-f3">第三章</div>

    </div>

    <div class="right">

        <div menu="f1" class="c1">第一章内容</div>

        <div menu="f2" class="c2">第二章内容</div>

        <div menu="f3" class="c3">第三章内容</div>

    </div>

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

    <script>

        $(function(){

            <!--监控滚轮事件-->

            $(window).scroll(function(){

                <!--滚轮滚动的高度-->

                var h_scroll = $(window).scrollTop();

                <!--窗口的高度-->

                var h_window = $(window).height();

                <!--整个文档的高度-->

                var h_doc = $(document).height();

                <!--已经到了文档的底部-->

                if (h_scroll + h_window == h_doc ){

                    $(".left div:last").addClass("current").siblings().removeClass("current")

                }else{

                    $(".right").children().each(function(){

                        <!--当前章节相对顶部的高度-->

                        var off_ths = $(this).offset().top;

                        <!--当前章节的高度-->

                        var h_ths = $(this).height();

                        var total = off_ths + h_ths;

                        <!--滚动的高度在此章节内-->

                        if (h_scroll >off_ths && h_scroll < total){

                            var tmp = '.left .go-' + $(this).attr("menu");

                            $(tmp).addClass("current").siblings().removeClass("current")

                        }

                    })

                }

            })

        })

    </script>

</body>

</html>

　　ajax跨域

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Ajax跨域请求</title>

</head>

<body>

    <input type="button" value="跨域" onclick="ajax_fun();">

    <!--在此处添加Ajax请求返回的节目清单-->

    <div class="container"></div>

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

    <script>

        function ajax_fun(){

            $.ajax({

//                电视节目清单地址

                url:'http://www.jxntv.cn/data/jmd-jxtv2.html',

//                请求类型默认GET，可以不写

                type:'GET',

//                数据类型，jsonp，跨域数据类型,必填

                dataType:'jsonp',

//                此处可以不填

                jsonp:'callback',

//                jsonp数据以列表形式返回

                jsonpCallback:'list',

//                传入返回后的数据，以及包含成功代码的字符串

                success:function(data){

                    $.each(data.data,function(i){

                        var item = data.data[i];

//                        添加p标签，内容为日期，如周日

                        $(".container").append("<p>"+ item.week +"</p>")

                        var all_data = item.list

                        $.each(all_data,function(i){

//                        添加a标签及换行标签

                            $(".container").append("<a href="+ all_data[i].link + ">" + all_data[i].name + " </a>")

                            $(".container").append("<br>")

                        })

                    })

//                    错误后的返回数据处理

                },error:function(data){

                    console.log("error..")

                }

            })

        }

    </script>

</body>

</html>

秒客网

jquery之实例应用

相关文章