Python全栈开发之16、jquery

一、查找元素

1、选择器

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

1.2层级选择器 $(".outer div")(所有的后代) $(".outer>div")(所有的子代) $(".outer+div")(匹配所有跟在.outer后面的div)

　　　　　　　　　　 $(".outer~div")(.outer后面的所有div)

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

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

1.5 表单选择器 $("[type='text']") 简写成 $(":text") 注意只适用于input标签

2 筛选器

2.1 过滤筛选器

$("li").eq(2) $("li").first() $("ul li").hasclass("test") (检测li中的是否含有某个特定的类，有的话返回true)

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() (同辈元素不包括自己)

二、操作元素

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")

2 CSS操作

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

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

(尺寸) innerHeight()不包含边框， outerHeight()包含边框，两个都包含padding height()不包含边框

3 文档处理

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

prepend() prependTo()

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

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

4 事件

4.1

$(document).ready(function(){}) -----------> $(function(){}) 最好都加上这一句(所有文档执行完，但是图片没加载)

4.2

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

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

$("ul").delegate("li","click",function(){})　　// 事件委托，这里需要重点注意下

三、jquery所有示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>leftMenu</title>
    <script src="../jquery-1.12.4.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .outer {
        }

        .menu {
            width: 20%;
            background-color: blueviolet;
            float: left;
        }

        .content {
            width: 80%;
            height: 500px;
            background-color: blue;
            float: left;
        }

        .active {
            background-color: chartreuse;
            color: white;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <div class="item">
            <div itemcon="1" class="title active" >菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div itemcon="2" class="title" >菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div itemcon="3" class="title" >菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>
    </div>
    <div class="content">
        <div id="1">content1</div>
        <div id="2" class="hide">content2</div>
        <div id="3" class="hide">content3</div>
    </div>
</div>

<script>
    $(function () {
        $(".item .title").click(function () {       //绑定事件
            $(this).addClass('active').siblings().removeClass('hide');
            $(this).parent().siblings().find('.con').addClass('hide');
            $(this).parent().siblings().find('.title').removeClass('active');

            //下面操作对应点击哪项菜单显示相应内容
            var con = $(this).attr('itemcon');
            $("#" + con).removeClass('hide').siblings().addClass('hide'); //为什么要拼接
        })
    });

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

菜单内容隐藏以及相应菜单显示相应文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <button id="selectAll">全选</button>
    <button id="reverseAll">反选</button>
    <button id="cancleAll">取消</button>
    <table>
        <tr>
            <td><input type="checkbox"></td>
            <td>1111</td>
        </tr>
         <tr>
            <td><input type="checkbox"></td>
            <td>1111</td>
        </tr>
         <tr>
            <td><input type="checkbox"></td>
            <td>1111</td>
        </tr>
    </table>
    <script>
        $(function () {
           $("#selectAll").click(function () {
               $("table :checkbox").prop('checked',true)
           });

           $("#cancleAll").click(function () {
              $("table :checkbox").prop('checked',false)
           });

           $("#reverseAll").click(function () {
               $("table :checkbox").each(function () {
                if($(this).prop('checked')){
                    $(this).prop('checked',false);
                }else {
                    $(this).prop('checked',true);
                }
            });
           })
        });

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

全选反选取消事例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            background-color: cornflowerblue;
            width: 100%;
        }
        .content{
            background-color: aqua;
            min-height: 1000px;
            width: 800px;
            margin: 0 auto;
        }
        .retTop{
            width: 35px;
            height: 35px;
            position: fixed;
            right: 0;
            bottom: 0;
            background-color: chartreuse;
        }
        .hide{
            display: none;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    
</head>
<body>
    <div class="container">
        <div class="content"></div>
        <div class="retTop">
            返回顶部
        </div>
    </div>

    <script>

        $(function () {
            window.onscroll = function () {
                var scrollHeight = $(window).scrollTop();
                if(scrollHeight<100){
                    $(".retTop").addClass('hide');
                }else {
                    $(".retTop").removeClass('hide')
                }
            };

            $(".retTop").click(function () {
                $(window).scrollTop(0);
            })
        })
    </script>
</body>
</html>

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        *{
            margin: 0;
            border: 0;
        }
        .header{
            width: 100%;
            height: 50px;
            background-color: black;
        }
        .container{
            width: 960px;
            margin: 0 auto;
            /*position: relative;*/
        }
        .leftmenu{
            width: 250px;
            min-height: 400px;
            background-color: chartreuse;
            position: absolute;             // 想下为什么不能用relative
            left: 200px;
            top: 50px;
        }
        .content{
            width: 600px;
            min-height: 900px;
            background-color: cornflowerblue;
            position: absolute;
            left: 382px;
            top:50px;
        }
        ul{
            list-style: none;
        }
        .content div{
            height: 800px;
            border: 1px solid black;
        }
        .fixed{
            position: fixed;
            top:0;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="container">
        <div class="leftmenu">
            <ul>
                <li id="item1">第一章</li>
                <li id="item2">第二章</li>
                <li id="item3">第三章</li>
            </ul>
        </div>
        <div class="content">
            <div class="item1">111</div>
            <div class="item2">222</div>
            <div class="item3" style="height: 100px">333</div>
        </div>
    </div>

    <script>
        $(function () {
            window.onscroll = function () {
                var scrollHeight = $(window).scrollTop();


                if(scrollHeight>50){
                    $(".leftmenu").addClass('fixed');
                }else {
                    $(".leftmenu").removeClass('fixed');
                }

                $('.content').children().each(function () {
                    if(scrollHeight>$(this).offset().top){
                        var iditem = $(this).attr("class");
                        console.log($(this));
                        $("#"+iditem).css("fontSize","40px").siblings().css("fontSize","12px");
                    }
                    console.log(scrollHeight,$(this).offset().top,$(this).outerHeight(),$(window).height());
                });

                if(scrollHeight+$(window).height() ==$(".content div:last-child").offset().top +$(".content div:last-child").outerHeight()){
                        $("ul li:last-child").css("fontSize","40px").siblings().css("fontSize","12px");
                    }
            };


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

随着滚动条的移动相应的内容对应相应的菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .outer{
            position: relative;
            width: 310px;
            height: 310px;
            margin: 20px auto;
        }
        .image{
            position: relative;
        }
        .image img{
            height: 310px;
            width: 310px;
            position: absolute;
            border: dashed blue 1px;
            top: 0;
            left: 0;
        }
        .num{
            position: absolute;
            bottom:0;
            left:100px;
        }
        .num li{
            display: inline-block;
            height: 20px;
            width: 20px;
            /*background-color: #3c763d;*/
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;

        }

        .position{
            width: 310px;
            position: absolute;
            top:50%;
            margin-top: -15px;
            left: 0;
        }

        .position button{
            display: block;
            width: 30px;
            height: 30px;
            background-color:burlywood ;
            opacity: 0.6;
            border: 0;

            display: none;
        }

        .outer:hover .position button{
            display: block;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .active{
            background-color: black;
        }
    </style>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(".num li").first().addClass("active");
            console.log( $(".num li"));
            $(".num li").mouseover(function () {
                console.log(this);
                $(this).addClass("active").siblings().removeClass("active");
                var index = $(this).index();
                i = index;
                $(".image img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
            });

            var i = 0;
            function autoMove() {
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");
                $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                i++;
                if(i==5){
                    i = 0;
                }
            }

            var t1 = setInterval(autoMove,1000);

            $(".outer").hover(function () {
                clearInterval(t1);
            },function () {
                t1 = setInterval(autoMove,1000);
            });
            
            $(".right").click(function () {
                autoMove();
            });

            $(".left").click(function () {
                i--;
                if(i==-1){
                    i = 4;
                }
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");
                $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
            })
        })
    </script>
</head>
<body>
    <div class="outer">
        <div class="image">
            <img src="pic/a.png">
            <img src="pic/1.jpeg">
            <img src="pic/2.jpeg">
            <img src="pic/3.jpeg">
            <img src="pic/4.jpeg">
        </div>
        <div class="num">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="position">
            <button class="left"> < </button>
            <button class="right"> > </button>
        </div>
    </div>
</body>
</html>

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .outer{
            position: relative;
            width: 310px;
            height: 310px;
            margin: 20px auto;
        }
        .image{
            position: relative;
        }
        .image img{
            height: 310px;
            width: 310px;
            position: absolute;
            border: dashed blue 1px;
            top: 0;
            left: 0;
        }
        .num{
            position: absolute;
            bottom:0;
            left:100px;
        }
        .num li{
            display: inline-block;
            height: 20px;
            width: 20px;
            /*background-color: #3c763d;*/
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;

        }

        .position{
            width: 310px;
            position: absolute;
            top:50%;
            margin-top: -15px;
            left: 0;
        }

        .position button{
            display: block;
            width: 30px;
            height: 30px;
            background-color:burlywood ;
            opacity: 0.6;
            border: 0;

            display: none;
        }

        .outer:hover .position button{
            display: block;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .active{
            background-color: black;
        }
    </style>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(".num li").first().addClass("active");
            console.log( $(".num li"));
            $(".num li").mouseover(function () {
                console.log(this);
                $(this).addClass("active").siblings().removeClass("active");
                var index = $(this).index();
                i = index;
                $(".image img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
            });

            var i = 0;
            function autoMove() {
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");
                $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
                i++;
                if(i==5){
                    i = 0;
                }
            }

            var t1 = setInterval(autoMove,1000);

            $(".outer").hover(function () {
                clearInterval(t1);
            },function () {
                t1 = setInterval(autoMove,1000);
            });
            
            $(".right").click(function () {
                autoMove();
            });

            $(".left").click(function () {
                i--;
                if(i==-1){
                    i = 4;
                }
                $(".num li").eq(i).addClass("active").siblings().removeClass("active");
                $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
            })
        })
    </script>
</head>
<body>
    <div class="outer">
        <div class="image">
            <img src="pic/a.png">
            <img src="pic/1.jpeg">
            <img src="pic/2.jpeg">
            <img src="pic/3.jpeg">
            <img src="pic/4.jpeg">
        </div>
        <div class="num">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="position">
            <button class="left"> < </button>
            <button class="right"> > </button>
        </div>
    </div>
</body>
</html>

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>

<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">全部商品分类<>
                        <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>
                            <dt><a href="#" class="red">厨房用品</a></dt>
                            <dd>
                                <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>

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

                                    </dd>
                                    <>

                </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>
                            <dt><a href="#" class="red">厨房用品</a></dt>
                            <dd>
                                <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>

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

                                </dd>
                                <>

                </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>
                            <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>
                            <>
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            init("#all_menu_catagory","#nav_all_menu","#nav_all_content");
        });

        function init(mFirst,mSecond,mThird) {
            $(mFirst).mouseover(function () {
                $(mSecond).parent().removeClass('hide');
            });
            $(mFirst).mouseout(function () {
                $(mSecond).parent().addClass('hide');
            });

            $(mSecond).children().mouseover(function () {
                $(mSecond).parent().removeClass('hide');
                var floatvar = $(this).attr("float-content");
                var floatstr = "[float-id=" + floatvar + "]";
                $(mThird).find(floatstr).removeClass('hide').siblings().addClass('hide')
            });

            $(mSecond).mouseout(function () {
                $(this).parent().addClass('hide');
                $(mThird).children().addClass('hide');
            });

            $(mThird).children().mouseover(function () {
//                $(mSecond).parent().removeClass('hide');
                $(this).removeClass('hide')
            });

            $(mThird).children().mouseout(function () {
//                $(mSecond).parent().addClass('hide');
                $(this).addClass('hide')
            })
        }
    </script>
</body>
</html>

商城三层菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        table {
            margin-top: 40px;
        }

        table, td {
            border: 1px solid black;
        }

        a {
            display: inline-block;
            background-color: #bce8f1;
            width: 100px;
            height: 21px;
            text-decoration: none;
            cursor: pointer;
        }

        .red {
            background-color: red;
        }

    </style>
</head>
<body>
<button id="checkAll">全选</button>
<button id="checkReverse">反选</button>
<button id="checkCancle">取消</button>
<a id="edit_mode">进入编辑模式</a>

<table >
    <thead>
        <tr>
            <th>选择</th>
            <th>主机名</th>
            <th>端口</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody id="tb">
        <tr>
            <td><input type="checkbox"></td>
            <td edit="true">v1</td>

            <td>88</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>88</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>88</td>
            <td edit="true" edit_type="select" sel-val="1" global-key="STATUS">在线</td>
        </tr>
    </tbody>
</table>
<script>
    $(function () {
        main('#edit_mode','#tb');
    });

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

    window.globalCtrlKeyPress = false;

    function main(edit,tb) {
        bindSingleCheck(edit,tb);
        bindEditMode(edit,tb);
        bindCheckAll(edit,tb);
        bindCheckCancle(edit,tb);
        bindCheckReverse(edit,tb);
    }

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

    function bindEditMode(edit,tb) {
        $(edit).click(function () {
            if($(this).hasClass('editing')){
                $(this).removeClass('editing red');
                $(tb).children().each(function () {
                    var check_box = $(this).children().find(":checkbox");
                    if(check_box.prop('checked')){
                        RowOutEdit($(this));
                    }else {

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

                    }
                })
            }
        });
    }

    function bindCheckAll(edit,tb) {
        $("#checkAll").click(function () {
            if($(edit).hasClass("editing")){
                $(tb).children().each(function () {
                    var check_box = $(this).children().find(":checkbox");
                    if(check_box.prop('checked')){

                    }else {
                        check_box.prop('checked',true);
                        RowIntoEdit($(this));
                    }
                })
            }else {
                $(tb).find(':checkbox').prop('checked', true);
            }
        });
    }

    function bindCheckReverse(edit,tb) {
        $("#checkReverse").click(function () {
            if($(edit).hasClass("editing")){
                $(tb).children().each(function () {
                    var check_box = $(this).children().find(":checkbox");
                    if(check_box.prop('checked')){
                        check_box.prop('checked',false);
                        RowOutEdit($(this));
                    }else {
                        check_box.prop('checked',true);
                        RowIntoEdit($(this));
                    }
                })
            }else {
                $(tb).children().each(function(){
                    var check_box = $(this).children().find(':checkbox');
                    if(check_box.prop('checked')){
                        check_box.prop('checked',false);
                    }else{
                        check_box.prop('checked',true);
                    }
                });
            }
        });
    }

    function bindCheckCancle(edit,tb) {
        $("#checkCancle").click(function () {
            if($(edit).hasClass("editing")){
                $(tb).children().each(function () {
                    var check_box = $(this).children().find(":checkbox");
                    if(check_box.prop('checked')){
                        check_box.prop('checked',false);
                        RowOutEdit($(this));
                    }else {

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

    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).text(new_text);
                }else {
                    var orgin_value = $(this).children().first().val();
                    $(this).text(orgin_value);
                }
            }
        })
    }
    
    function CreateSelect(attrs, csss, option_dict, item_key, item_value, current_val) {
        var sel = document.createElement('select');

        //设置属性
        $.each(attrs,function (k,v) {
            $(sel).attr(k,v);
        });

        //设置样式 这里为空，以后可以设置
        $.each(csss,function (k,v) {
            $(sel).css(k,v);
        });

        $.each(option_dict,function (k,v) {
            var opt = document.createElement('option');
            var sel_text = v[item_value];
            var sel_value = v[item_key];

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

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

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

    function MultiSelect(ths) {
        if(window.globalCtrlKeyPress == true){
            var index = $(ths).parent().index();
            var value = $(ths).val();
            console.log(value,index);
            $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
                $(this).parent().parent().children().eq(index).children().val(value);
            });
        }
    }

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

编辑框(需要重点掌握)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .inline {
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="section">
        <div class="button inline">
            <a id="origin">
                <button>+</button>
            </a>
            <div class="input inline">
                <input type="checkbox">
                <input type="text" value="IP">
            </div>
        </div>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#origin").click(function () {
            var origin = $(this).parent().parent().clone();
            origin.find('a').removeAttr('id').attr("onclick", "myremove(this);").children().text('-');
            $(".container").append(origin);
        });
    })

     function myremove(self) {
            console.log(11);
            $(self).parent().parent().remove();
        }
</script>
</body>
</html>

内容clone添加删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
        }
        .small-box{
            border: 5px solid red;
            height: 350px;
            width: 350px;
            position: relative;
        }
        .big-box{
            position: absolute;
            width: 400px;
            height: 400px;
            left:360px;
            top:0;
            border: 5px solid black;
            overflow: hidden;
        }
        .hide{
            display: none;
        }
        .small-box .float{
            width: 175px;
            height: 175px;
            background-color: grey;
            position: absolute;
            opacity: 0.8;
        }
        .big-box img{
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="small-box">
            <div class="float hide"></div>
            <img src="pic/small.jpg">
        </div>

        <div class="big-box hide">
            <img src="pic/big.jpg">
        </div>
    </div>

<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $(".small-box").mouseover(function () {
            $(this).children('.float').removeClass('hide').parent().next().removeClass('hide');
        });

        $(".small-box").mouseout(function () {
            $(this).children('.float').addClass('hide').parent().next().addClass('hide');
        });

        $(".float").mousemove( function (e) {
            var _event = e || window.event;

            var small_box_width = $(".small-box").width();
            var small_box_height = $(".small-box").height();

            var float_height = $('.float').height();
            var float_width = $(".float").width();

            var float_height_half = float_height/2;
            var float_width_half = float_width/2;

            var float_right = _event.clientX- float_width_half;
            var float_top = _event.clientY - float_height_half;

            if(float_right<0){
                float_right = 0;
            }else if(float_right>small_box_width-float_width){
                float_right=small_box_width-float_width
            }
            if(float_top<0){
                float_top=0;
            }else if(float_top>small_box_height-float_height){
                float_top=small_box_height-float_height
            }

            $(".float").css({"left":float_right+"px","top":float_top+"px"});

            var percentX=($(".big-box img").width()-$(".big-box").width())/ (small_box_width-float_width);
            var percentY=($(".big-box img").height()-$(".big-box").height())/(small_box_height-float_height);
            
            $(".big-box img").css({"left":-percentX*float_right+"px","top":-percentY*float_top+"px"});
        })

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

放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#title").mouseover(function () {
            $(this).css('cursor','move');
        }).mousedown(function (e) {
            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;
            
            $(this).mousemove(function (e) {
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = new_x - old_x + parent_left;
                var y = new_y - old_y + parent_top;

                $(this).parent().css({"left":x+"px","top":y+"px"})
            }).mouseup(function () {
                $(this).unbind('mousemove');
            })
        })
    </script>
</body>
</html>

拖动面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            jQuery.fn.extend({
                show1:function () {
                    var ret = this.text();
                    return ret+ "sb";
                },
            });

            jQuery.extend({
                show2:function (arg) {
                   return $(arg).text()+"sb"
                }
            });

            ret = $(".title").show1();
            console.log(ret);
//            alert(ret);

            ret2 = $.show2(".title");
            console.log(ret2);
        });
    </script>
</head>
<body>
    <div class="title">
        111
    </div>
    <div class="title">
        2222
    </div>
</body>
</html>

extend以及fn.extend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <script>

        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide(1000,call_back());

            })
        });
        function call_back() {
            alert('sss')
        }
    </script>
</head>
<body>
<button>隐藏</button>
<p>hello</p>

</body>
</html>

回掉函数

posted @ 2016-07-18 21:45 赤木晴子梦阅读(654) 评论(0) 编辑收藏举报

刷新页面返回顶部

1000-7