一、查找元素

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>

回掉函数

秒客网

Python全栈开发之16、jquery