　　jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

一、查找元素

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标签中第一个标签

$("li:last")    // 所有li标签中最后一个标签

$("li:even")    // 所有li标签中偶数标签

$("li:odd")     // 所有li标签中奇数标签

$("li:eq(2)")   // 所有li标签中，索引是2的那个标签

$("li:gt(1)")   // 所有li标签中，索引大于1的标签

1.4 属性选择器

$('[id="div1"]')

$('[alex="sb"]')

$("input[type='text']") 可以缩写:text

2、常用筛选器

2.1 过滤筛选器

$("li").eq(2)    // 和:eq是一样的

$("li").first()    // 和:first是一样的

$("li").last()    // 和:last是一样的

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

2.2 查找筛选器

$("div").children()    // div中的子标签,只找儿子辈  $("div").children(".div").css("color","red")

$("div").find()          // div中的子标签,后代都找  $("form").find(:text,:password)   // form标签中找到:text,:password标签

$("div").next()        // div标签下一个标签

$("div").nextAll()       // div标签下一个同级所有标签

$("div").nextUntil()    // div标签下一个同级区间内所有标签

$("div").prev()           // div标签上一个标签

$("div").prevAll()       // div标签上一个同级所有标签

$("div").prevUntil()    // div标签上一个同级区间内所有标签

$("div").parent()           // div标签的父标签

$("div").parents()          // div标签的爷爷标签集合

$("div").parentsUntil()   // div标签的爷爷标签区间内

$("input").siblings()   // input的同辈标签

二、操作元素

1、属性操作

$(":text").val()                  // text输入的内容

$(".test").attr("name")       // test类中name属性对应的值

$(".test").attr("name","sb")  //  设置test类中name属性对应的值

$(".test").attr("checked","checked")  // 设置test类中checked属性对应的值为checked

$(":checkbox").removeAttr("checked")  // 删除checkbox标签中的checked属性

$(".test").prop("checked",true)   // 设置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()

标签内容处理

         remove()

         empty()

         clone()

4、事件

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

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

$("ul").delegate("li","click",function(){})　　// 事件委托，延迟绑定事件的一种方式

更过多参考　

三、jquery所有示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>左侧菜单</title>

    <style>

        .hide{

            display: none;

        }

        .menu{

            width:200px;

            height:600px;

            border:1px solid #dddddd;

            overflow: auto;

        }

        .menu .item .title {

            height:40px;

            line-height:40px;

            background-color: #2459a2;

            color:white;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div class="menu">

        <div class="item">

            <div class="title" onclick="ShowMenu(this)">菜单一</div>

            <div class="body hide">

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

            </div>

        </div>

        <div class="item">

            <div class="title" onclick="ShowMenu(this)">菜单二</div>

            <div class="body hide">

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

            </div>

        </div>

        <div class="item">

            <div class="title" onclick="ShowMenu(this)">菜单三</div>

            <div class="body hide">

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

            </div>

        </div>

    </div>

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

    <script>

        function ShowMenu(ths) {

            // console.log(ths); //Dom中的标签对象

            //$(ths)             // Dom标签对象转换成jQuery标签对象(便利)

            //$(ths)[0]          // jQuery标签对象转成Dom标签对象

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

            $(ths).parent().siblings().find('.body').addClass('hide');

        }

    </script>

</body>

</html>

左侧菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>checkbox全选取消反选</title>

</head>

<body>

    <input type="button" value="全选" onclick="CheckAll()"/>

    <input type="button" value="取消" onclick="CancleAll()"/>

    <input type="button" value="反选" onclick="ReverseAll()"/>

    <table border="1">

        <thead>

            <tr>

                <th>序号</th>

                <th>IP</th>

                <th>Port</th>

            </tr>

        </thead>

        <tbody id="tb">

            <tr>

                <td><input type="checkbox"/></td>

                <td>1.1.1.1</td>

                <td>22</td>

            </tr>

            <tr>

                <td><input type="checkbox"/></td>

                <td>1.1.1.2</td>

                <td>22</td>

            </tr>

            <tr>

                <td><input type="checkbox"/></td>

                <td>1.1.1.3</td>

                <td>22</td>

            </tr>

        </tbody>

    </table>

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

    <script>

        function CheckAll() {

            $('#tb input[type="checkbox"]').prop('checked',true);

        }

        function CancleAll() {

            $('#tb input[type="checkbox"]').prop('checked',false);

        }

        function ReverseAll() {

             $('#tb input[type="checkbox"]').each(function () {

                 if($(this).prop('checked')){

                    $(this).prop('checked',false);

                 }else{

                    $(this).prop('checked',true);

                 }

             });

        }

    </script>

</body>

</html>

checkbox全选取消反选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery clone</title>

</head>

<body>

    <div>

        <p>

            <a onclick="Add(this)">+</a>

            <input type="text"/>

        </p>

    </div>

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

    <script>

        function Add(ths) {

            var p = $(ths).parent().clone();

            p.find('a').text('-');

            p.find('a').attr('onclick','Remove(this)');

            $(ths).parent().parent().append(p);

        }

        function Remove(ths) {

            $(ths).parent().remove();

        }

    </script>

</body>

</html>

jquery clone

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>左侧菜单</title>

    <style>

        .hide{

            display: none;

        }

        .menu{

            width:200px;

            height:600px;

            border:1px solid #dddddd;

            overflow: auto;

        }

        .menu .item .title {

            height:40px;

            line-height:40px;

            background-color: #2459a2;

            color:white;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div class="menu">

        <div class="item">

            <div class="title">菜单一</div>

            <div class="body hide">

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

                <p>内容一</p>

            </div>

        </div>

        <div class="item">

            <div class="title">菜单二</div>

            <div class="body hide">

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

                <p>内容二</p>

            </div>

        </div>

        <div class="item">

            <div class="title">菜单三</div>

            <div class="body hide">

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

                <p>内容三</p>

            </div>

        </div>

    </div>

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

    <script>

        $('.item .title').click(function () {

            $(this).next().removeClass('hide');

            $(this).parent().siblings().find('.body').addClass('hide');

        });

    </script>

</body>

</html>

左侧菜单(jquery)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>延迟绑定事件</title>

    <style>

        ul li{

            cursor: pointer;

        }

    </style>

</head>

<body>

    <input type="button" value="点我" onclick="Add();"/>

    <ul>

        <li>123</li>

        <li>456</li>

        <li>789</li>

        <li>123</li>

    </ul>

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

    <script>

        $(function () {

//            $('li').click(function () {

//                alert($(this).text());

//            });

            $('ul').delegate('li','click',function () {

                alert($(this).text());

            });

        })

        function Add() {

            var tag = document.createElement('li');

            tag.innerText = '666';

            $('ul').append(tag);

        }

    </script>

</body>

</html>

延迟绑定事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>form表单验证</title>

    <style>

        .item{

            width:250px;

            height:60px;

            position: relative;

        }

        .item input{

            width: 200px;

        }

        .item span{

            position: absolute;

            top:22px;

            left:0;

            font-size:10px;

            background-color: indianred;

            color: white;

            display: inline-block;

            width:200px;

        }

    </style>

</head>

<body>

    <div>

        <form>

            <div class="item">

                <input class="c1" type="text" name="username" label="用户名"/>

            </div>

            <div class="item">

                <input class="c1" type="password" name="pwd" label="密码"/>

            </div>

            <!--<input type="submit" value="提交" onclick="return CheckValid();"/>-->

            <input type="submit" value="提交"/>

        </form>

    </div>

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

    <script>

//        第一种方式：DOM方式绑定

//        function CheckValid() {

//             找到form标签下的所有需要验证的标签

//             $('form .c1')

//             $('form input[type="text"],input[type="password"])

//             循环所有需要验证的标签，获取内容

//            $('form .item span').remove();

//            var flag = true;

//

//            $('form .c1').each(function () {

//                // 每一个元素执行匿名函数

//                // this

//                console.log(this,$(this)[0]);

//                var val = $(this).val();

//                if(val.length == 0){

//                    var laber = $(this).attr('label');

//                    var tag = document.createElement('span');

//                    tag.innerText = laber + "不能为空";

//                    $(this).after(tag);

//                    flag = false;

//                }

//            });

//            return flag;

//        }

//        第二种：JQuery绑定(一般使用这种)

        $(function () {

            BindCheckValid();

        });

        function BindCheckValid() {

            $('form :submit').click(function () {

                var flag = true;

                $('form .item span').remove();

                $('form .c1').each(function () {

                    // 每一个元素执行匿名函数

                    // this

                    console.log(this,$(this));

                    var val = $(this).val();

                    if(val.length == 0){

                        var laber = $(this).attr('label');

                        var tag = document.createElement('span');

                        tag.innerText = laber + "不能为空";

                        $(this).after(tag);

                        flag = false;

                        return false;

                    }

                });

                return flag;

            });

        }

    </script>

</body>

</html>

form表单验证(dom|jquery)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery 循环</title>

</head>

<body>

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

    <script>

        function BindCheckValid(){

            $.each([11,22,33,44],function (k, v) {

                if(y == 22){

                    // return; //相当于continue

                    // return false; //相当于break

                    return false;

                }

                console.log(v);

            })

        }

    </script>

</body>

</html>

jquery 循环

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

        *{

            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>

拖动面板

四、jquery扩展

extend以及fn.extend

实例：

/**

 * Created by alex on 2016/8/28.

 */

(function(jq){

    function ErrorMessage(inp,message){

        var tag = document.createElement('span');

        tag.innerText = message;

        inp.after(tag);

    }

    jq.extend({

        valid:function(form){

            // #form1 $('#form1')

            jq(form).find(':submit').click(function(){

                jq(form).find('.item span').remove();

                var flag = true;

                jq(form).find(':text,:password').each(function(){

                    var require = $(this).attr('require');

                    if(require){

                        var val = $(this).val();

                        if(val.length<=0){

                            var label = $(this).attr('label');

                            ErrorMessage($(this),label + "不能为空");

                            flag = false;

                            return false;

                        }

                        var minLen = $(this).attr('min-len');

                        if(minLen){

                            var minLenInt = parseInt(minLen);

                            if(val.length<minLenInt){

                                var label = $(this).attr('label');

                                ErrorMessage($(this),label + "长度最小为"+ minLen);

                                flag = false;

                                return false;

                            }

                            //json.stringify()

                            //JSON.parse()

                        }

                        var phone = $(this).attr('phone');

                        if(phone){

                            // 用户输入内容是否是手机格式

                            var phoneReg = /^1[3|5|8]\d{9}$/;

                            if(!phoneReg.test(val)){

                                var label = $(this).attr('label');

                                ErrorMessage($(this),label + "格式错误");

                                flag = false;

                                return false;

                            }

                        }

                        // 1、html自定义标签属性

                        // 增加验证规则+错误提示

                    }

                    // 每一个元素执行次匿名函数

                    // this

                    //console.log(this,$(this));

                    /*

                    var val = $(this).val();

                    if(val.length<=0){

                        var label = $(this).attr('label');

                        var tag = document.createElement('span');

                        tag.innerText = label + "不能为空";

                        $(this).after(tag);

                        flag = false;

                        return false;

                    }

                    */

                });

                return flag;

            });

        }

    });

})(jQuery);

将自己写的js封装到jquery中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery扩展 form验证</title>

    <style>

        .item{

            width: 250px;

            height: 60px;

            position: relative;

        }

        .item input{

            width: 200px;

        }

        .item span{

            position: absolute;

            top: 20px;

            left: 0px;

            font-size: 8px;

            background-color: indianred;

            color: white;

            display: inline-block;

            width: 200px;

        }

    </style>

</head>

<body>

    <div>

        <form id="form1">

            <div class="item">

                <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/>

            </div>

            <div class="item">

                <input  class="c1" type="password" name="pwd" label="密码" require="true"/>

            </div>

            <div class="item">

                <input  class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>

            </div>

            <input type="submit" value="提交" />

        </form>

    </div>

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

    <script src="commons.js"></script>

    <script>

        $(function(){

            $.valid('#form1');

        });

    </script>

</body>

</html>

jquery扩展 form验证

五、jquery回调函数

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

回调函数

图像插件：http://fontawesome.io/

jquery插件：http://www.jeasyui.net/

jquery插件：http://jqueryui.com/

bootstrap：http://www.bootcss.com/

轮播插件：http://bxslider.com/

延迟加载插件：http://www.w3cways.com/1765.html 实例

AngularJs：https://angular.cn/

秒客网

Python自动化运维之24、JQuery