zoukankan html css js c++ java

Python全栈开发【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 {
             20%;
            background-color: blueviolet;
            float: left;
        }
 
        .content {
             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>

View Code

<!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;
             100%;
        }
        .content{
            background-color: aqua;
            min-height: 1000px;
             800px;
            margin: 0 auto;
        }
        .retTop{
             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{
             100%;
            height: 50px;
            background-color: black;
        }
        .container{
             960px;
            margin: 0 auto;
            /*position: relative;*/
        }
        .leftmenu{
             250px;
            min-height: 400px;
            background-color: chartreuse;
            position: absolute;             // 想下为什么不能用relative
            left: 200px;
            top: 50px;
        }
        .content{
             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>

View Code

@charset "utf-8";
/* CSS Document */
.center_area{
    100%;
    height:500px; 
    margin:0 auto;
}


/*中间区域*/
.center_area .center{
    100%;
    height:500px;
    background:#ccc;
    float: left;
}
.common_da{  800px; height: 100px;}
.center_area .center .center_top{
    100%;
    height:440px;
    /*background: orange;*/
}
/*<==================================================>*/

/*中间轮播图区域*/
 
.content_middle{
    height:500px;
    margin:0 auto;
    position:relative;
    /*border: 1px solid #ccc;*/
}
.content_middle:hover .common{
    display: block;
}
/*左右切换图标*/
.content_middle .common{
    display: block;
    50px;
    height: 100px;
    position: absolute;
    z-index:10;
    top:60%;
    margin-top: -50px;
    display: none;
}
.content_middle .btnLeft{
    opacity: 0.2;
    left:0;
    background: url(../images/sprite.png) no-repeat;
}
.content_middle .btnRight{
    opacity: 0.2;
    right:0;
    background: url(../images/sprite.png) no-repeat -60px 0;
}
.content_middle .btnLeft:hover,.content_middle .btnRight:hover{
    opacity: 0.5;
}
/*左右切换图标*/
.content_middle ul li{
    100%;
    height:440px; 
    opacity: 0;
    /*filter: alpha(opacity=0);*/
    position: absolute;
    margin:0 auto;
}

/*切换小图标*/

.content_middle .table{
    260px;
    line-height:40px;
    position: absolute;
    bottom:30px;
    left:50%;
    margin-left:-130px;
}
.content_middle .table a{
    20px;
    height:20px;
    background:#E3DEE1;
    opacity: 0.8;
    margin-left:20px;
    display: block;
    float:left;
    border-radius: 50%;
}

.content_middle .table a.small_active{
    background:red;
    color: #fff;
     
}

轮播图css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8" >
    <title>jQuery轮播</title>

    <!-- 页面css样式 -->
    <link rel="stylesheet" href="css/index.css" />

    <!-- js文件 -->
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/index.js"></script>
    <style>
        *{margin: 0;padding: 0}
        ul{list-style: none;}
    </style>

</head>

<body>


<div class="center">
     <div class="center_top">
           <div class="content_middle">
              <div class="common_da">
                    <a class="common btnLeft"></a>
                    <a class="common btnRight"></a>
              </div>
                                   
                               
               <ul>
                  <li style="background:url(images/1.jpg) no-repeat center center;opacity: 1"></li>
                  <li style="background:url(images/2.jpg) no-repeat center center;"></li>
                  <li style="background:url(images/3.jpg) no-repeat center center;"></li>
                  <li style="background:url(images/4.jpg) no-repeat center center;"></li>
                  <li style="background:url(images/5.jpg) no-repeat center center;"></li>
                  <li style="background:url(images/6.jpg) no-repeat center center;"></li>
               </ul>
                <div class="table">
                    <a class="small_active"href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                     
                </div>
           </div>          
     </div>    
</div>

</body>
</html>

轮播图html

$(function(){
     // 轮播图开始
     var left = $('.content_middle .btnLeft');//获取左点击
     var right = $('.content_middle .btnRight');//获取右点击
     var aSmall = $('.content_middle .table a');
     var aLi = $('.content_middle ul li');
     var iNow = 0;
      // 左点击  
     left.click(function(){
         iNow--;
         if(iNow<0){
              iNow=5;
         }
         move()
     });
       // 右点击切换
       right.click(function(){
         iNow++;
         if(iNow>5){
              iNow=0;
         }
         move()

     });

       //手动切换
     aSmall.mouseover(function(){
        var n = $(this).index();
       // var iNow = $(this).index();
       // alert(iNow);
        iNow = n;
        move()

     });
  // 封装函数体
 function move(){
      aLi.eq(iNow).siblings().stop().animate({
          opacity:0
         
        },1000);
        aLi.eq(iNow).stop().animate({
          opacity:1
        },1000);
      
        aSmall.eq(iNow).addClass('small_active').siblings().removeClass('small_active');
 }
 
 // 定个定时器的初始值

function run(){
      iNow++;
       if(iNow>5){
              iNow=0;
         }
       move();
}
 
// 定时器
 timer = setInterval(run,2000);

//当鼠标划入，停止轮播图切换
$(".content_middle").hover(function(){
    clearInterval(timer);
 },function(){
    timer = setInterval(run,2000);
 }) 
});

轮播图jquery

<!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;
             310px;
            height: 310px;
            margin: 20px auto;
        }
        .image{
            position: relative;
        }
        .image img{
            height: 310px;
             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;
             20px;
            /*background-color: #3c763d;*/
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
 
        }
 
        .position{
             310px;
            position: absolute;
            top:50%;
            margin-top: -15px;
            left: 0;
        }
 
        .position button{
            display: block;
             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;
         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;
         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;
         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;
             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;
             350px;
            position: relative;
        }
        .big-box{
            position: absolute;
             400px;
            height: 400px;
            left:360px;
            top:0;
            border: 5px solid black;
            overflow: hidden;
        }
        .hide{
            display: none;
        }
        .small-box .float{
             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; 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>
</head>
<body>



<p>111</p>
<p>222</p>
<p>333</p>

<script src="jquery-3.1.1.js"></script>
<script>
    //方式一
//    $.extend({
//        print:function(){
//            console.log('hello  extend')
//        }
//    });
//    $.print()

    //方式二
    $.fn.extend({
        print:function(){
            $(this).each(function () {
               console.log($(this).html())
            });
//            console.log($(this).html())
        }
    });

    $('p').print();
</script>
</body>
</html>

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>

回调函数

http://www.cnblogs.com/yuanchenqi/articles/6070667.html

查看全文

相关阅读:
Chrome 无法登录 GitHub，响应时间过长，可行解决办法
 npm install报错 npm ERR! cb() never called! 检查镜像源！
Win10 移动文件的时候“卡”在“正在暂停/取消”解决办法
 VS code 彻底关闭插件自动更新功能
 箭头函数函数中的this指向
 ES6 ES6变量的声明
 范围内的拖拽事件
 div拖拽移动事件
 事件对象的属性 div点击移动事件
 tab切换之循环遍历

原文地址：https://www.cnblogs.com/mocean/p/6406811.html