• jquery之实例应用


     

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

    http://www.php100.com/manual/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;
         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>
    

     加载

     

    .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="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> 

      左侧菜单

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>加载</title>
        <style type="text/css">
            .left{
                 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表横向表单

    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{
        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>
    

      拐角

    <!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{
                 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- 8px 0px 0px 18px;
                border-style: solid;
                border-color: #666666 transparent transparent transparent;
                margin-left: -18px;
                 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>
    

      弹出确定取消框

    <!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- 8px 8px 8px 8px;
                margin:0 0 0 0;
                border-style: solid;
                border-color: #3498db transparent transparent transparent;
                 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; 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; 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; 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>
    

      返回顶部

    <!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>
    

      全选、取消、反选

    <!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=" 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>

      

     滚动菜单 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .left{
                20%;
                height:2000px;
                float:left;
                position: fixed;
                top:10px;
                bottom: 0px;
                background-color: #fafafa;
            }
            .right{
                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>
    

      

  • 相关阅读:
    jenkins配置发送邮件
    inux下rz、sz的简单安装
    Linux系统信息查看命令
    selenium元素定位
    windows下 maven+selenium+testng项目搭建(七)
    eclipse testng插件安装
    window maven安装(六)
    linux下Apache+Svn环境搭建(五)
    Linux实战教学笔记38:企业级Nginx Web服务优化实战(下)
    Linux实战教学笔记37:企业级Nginx Web服务优化实战(上)
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6202052.html
Copyright © 2020-2023  润新知