zoukankan      html  css  js  c++  java
  • jQuery

    1、jQuery 简介

    1.1 jQuery

    --->jQuery是一个优秀的JavaScript框架,其宗旨是——WRITE LESS,DO MORE,写更少的代 码,做更多的事情。

    --->jQuery是一个快速的,简洁的JavaScript库使用户能更方便地处理HTML documentsevents、实现动画效果,并且方便地为网站提供AJAX交互。

    --->jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

    --->jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

    1.2 jQuery 对象

    • jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
    • jQuery 对象是 jQuery 独有的如果一个对象是 jQuery 对象那么它就可以使用 jQuery 里的方法: $(“#test”).html();

    比如: 

          $("#test").html()   意思是指:获取IDtest的元素内的html代码。其中html()jQuery里的方法 

          这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; 

    虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错

    约定:如果获取的是 jQuery 对象那么要在变量前面加上$. 

    var $variable = jQuery 对象

    var variable = DOM 对象

    基本语法:$(selector).action()

    2、寻找元素(选择器和筛选器)

    2.1 选择器

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

        2.1.2层级选择器       $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

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

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

        2.1.5 表单选择器      $("[type='text']")----->$(":text")                    注意只适用于input标签

                                     $("input:checked")

    2.2 筛选器

         2.2.1  过滤筛选器

                                         $("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

         2.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 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>left_menu</title>
     6 
     7     <script src="js/jquery-2.2.3.js"></script>
     8     <script>
     9           function show(self){
    10 //              console.log($(self).text())
    11               $(self).next().removeClass("hide")
    12               $(self).parent().siblings().children(".con").addClass("hide")
    13 
    14           }
    15     </script>
    16     <style>
    17           .menu{
    18               height: 500px;
    19                30%;
    20               background-color: gainsboro;
    21               float: left;
    22           }
    23           .content{
    24               height: 500px;
    25                70%;
    26               background-color: rebeccapurple;
    27               float: left;
    28           }
    29          .title{
    30              line-height: 50px;
    31              background-color: #425a66;
    32              color: forestgreen;}
    33 
    34 
    35          .hide{
    36              display: none;
    37          }
    38 
    39 
    40     </style>
    41 </head>
    42 <body>
    43 
    44 <div class="outer">
    45     <div class="menu">
    46         <div class="item">
    47             <div class="title" onclick="show(this);">菜单一</div>
    48             <div class="con">
    49                 <div>111</div>
    50                 <div>111</div>
    51                 <div>111</div>
    52             </div>
    53         </div>
    54         <div class="item">
    55             <div class="title" onclick="show(this);">菜单二</div>
    56             <div class="con hide">
    57                 <div>111</div>
    58                 <div>111</div>
    59                 <div>111</div>
    60             </div>
    61         </div>
    62         <div class="item">
    63             <div class="title" onclick="show(this);">菜单三</div>
    64             <div class="con hide">
    65                 <div>111</div>
    66                 <div>111</div>
    67                 <div>111</div>
    68             </div>
    69         </div>
    70 
    71     </div>
    72     <div class="content"></div>
    73 
    74 </div>
    75 
    76 </body>
    77 </html>
    View Code

    实例 tab切换

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>tab</title>
     6     <script src="js/jquery-2.2.3.js"></script>
     7     <script>
     8            function tab(self){
     9                var index=$(self).attr("xxx")
    10                $("#"+index).removeClass("hide").siblings().addClass("hide")
    11                $(self).addClass("current").siblings().removeClass("current")
    12 
    13            }
    14     </script>
    15     <style>
    16         *{
    17             margin: 0px;
    18             padding: 0px;
    19         }
    20         .tab_outer{
    21             margin: 0px auto;
    22              60%;
    23         }
    24         .menu{
    25             background-color: #cccccc;
    26             /*border: 1px solid red;*/
    27             line-height: 40px;
    28         }
    29         .menu li{
    30             display: inline-block;
    31         }
    32         .menu a{
    33             border-right: 1px solid red;
    34             padding: 11px;
    35         }
    36         .content{
    37             background-color: tan;
    38             border: 1px solid green;
    39             height: 300px;
    40         }
    41         .hide{
    42             display: none;
    43         }
    44 
    45         .current{
    46             background-color: darkgray;
    47             color: yellow;
    48             border-top: solid 2px rebeccapurple;
    49         }
    50     </style>
    51 </head>
    52 <body>
    53       <div class="tab_outer">
    54           <ul class="menu">
    55               <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
    56               <li xxx="c2" onclick="tab(this);">菜单二</li>
    57               <li xxx="c3" onclick="tab(this);">菜单三</li>
    58           </ul>
    59           <div class="content">
    60               <div id="c1">内容一</div>
    61               <div id="c2" class="hide">内容二</div>
    62               <div id="c3" class="hide">内容三</div>
    63           </div>
    64 
    65       </div>
    66 </body>
    67 </html>
    View Code

    3、操作元素(属性CSS和文档处理)

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

    实例 编辑框正反选

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="js/jquery-2.2.3.js"></script>
     7     <script>
     8 
     9              function selectall(){
    10 
    11                  $("table :checkbox").prop("checked",true)
    12              }
    13              function che(){
    14 
    15                  $("table :checkbox").prop("checked",false)
    16              }
    17 
    18              function reverse(){
    19 
    20 
    21 //                 var idlist=$("table :checkbox")
    22 //                 for(var i=0;i<idlist.length;i++){
    23 //                     var element=idlist[i];
    24 //
    25 //                     var ischecked=$(element).prop("checked")
    26 //                     if (ischecked){
    27 //                         $(element).prop("checked",false)
    28 //                     }
    29 //                     else {
    30 //                         $(element).prop("checked",true)
    31 //                     }
    32 //
    33 //                 }
    34 
    35 
    36 
    37                  $("table :checkbox").each(function(){
    38                      if ($(this).prop("checked")){
    39                          $(this).prop("checked",false)
    40                      }
    41                      else {
    42                          $(this).prop("checked",true)
    43                      }
    44 
    45                  });
    46 
    47 
    48 
    49 //                 li=[10,20,30,40]
    50 ////                 dic={name:"yuan",sex:"male"}
    51 //                 $.each(li,function(i,x){
    52 //                     console.log(i,x)
    53 //                 })
    54 
    55              }
    56 
    57     </script>
    58 </head>
    59 <body>
    60 
    61      <button onclick="selectall();">全选</button>
    62      <button onclick="che();">取消</button>
    63      <button onclick="reverse();">反选</button>
    64 
    65      <table border="1">
    66          <tr>
    67              <td><input type="checkbox"></td>
    68              <td>111</td>
    69          </tr>
    70          <tr>
    71              <td><input type="checkbox"></td>
    72              <td>222</td>
    73          </tr>
    74          <tr>
    75              <td><input type="checkbox"></td>
    76              <td>333</td>
    77          </tr>
    78          <tr>
    79              <td><input type="checkbox"></td>
    80              <td>444</td>
    81          </tr>
    82      </table>
    83 
    84 
    85 
    86 </body>
    87 </html>
    View Code

    实例 模态对话框

      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <meta charset="utf-8" />
      5         <title>批量编辑</title>
      6         <!--<link rel="stylesheet" href="css/mycss.css" />-->
      7         <style>
      8             *{
      9     margin: 0;
     10     padding: 0;
     11 }
     12 body {
     13   font-family: 'Open Sans', sans-serif;
     14   font-weight: 300;
     15   line-height: 1.42em;
     16   color:rebeccapurple;
     17   background-color:goldenrod;
     18 }
     19 
     20 h1 {
     21   font-size:3em;
     22   font-weight: 300;
     23   line-height:1em;
     24   text-align: center;
     25   color: #4DC3FA;
     26 }
     27 .blue {
     28     color: #185875;
     29 }
     30 .yellow {
     31     color: #FFF842;
     32     }
     33 
     34 /*!*弹出层罩子*!*/
     35 #full {
     36     background-color:gray;
     37     left:0;
     38     opacity:0.7;
     39     position:absolute;
     40     top:0;
     41     filter:alpha(opacity=30);
     42 }
     43 
     44 .modified {
     45     background-color: #1F2739;
     46     border:3px solid whitesmoke;
     47     height:400px;
     48     left:50%;
     49     margin:-200px 0 0 -200px;
     50     padding:1px;
     51     position:fixed;
     52     /*position:absolute;*/
     53     top:50%;
     54     400px;
     55     display:none;
     56 }
     57 li {
     58     list-style: none;
     59     margin: 20px 0 0 50px;
     60     color: #FB667A;
     61 }
     62 input[type="text"] {
     63   padding: 10px;
     64   border: solid 1px #dcdcdc;
     65   /*transition: box-shadow 3s, border 3s;*/
     66 
     67 }
     68 
     69 .iputbutton {
     70     margin: 60px 0 0 50px;
     71     color: whitesmoke;
     72     background-color: #FB667A;
     73     height: 30px;
     74      100px;
     75     border: 1px dashed;
     76 
     77 }
     78 
     79 
     80 
     81 
     82 .container th h1 {
     83     font-weight: bold;
     84     font-size: 1em;
     85       text-align: left;
     86       color: #185875;
     87 }
     88 
     89 .container td {
     90     font-weight: normal;
     91     font-size: 1em;
     92 }
     93 
     94 .container {
     95 
     96      80%;
     97     margin: 0 auto;
     98 
     99 }
    100 
    101 .container td, .container th {
    102     padding-bottom: 2%;
    103     padding-top: 2%;
    104       padding-left:2%;
    105 }
    106 
    107 /*单数行*/
    108 .container tr:first-child {
    109     background-color: red;
    110 }
    111 
    112 /*偶数行*/
    113 .container tr:not(first-child){
    114       background-color: cyan;
    115 }
    116 
    117 .container th {
    118     background-color: #1F2739;
    119 }
    120 
    121 .container td:last-child {
    122     color: #FB667A;
    123 }
    124 /*鼠标进过行*/
    125 .container tr:hover {
    126    background-color: #464A52;
    127 }
    128 /*鼠标进过列*/
    129 .container td:hover {
    130   background-color: #FB667A;
    131   color: #403E10;
    132   font-weight: bold;
    133   transform: translate3d(5px, -5px, 0);
    134 }
    135 
    136 
    137 
    138 
    139 
    140         </style>
    141         <script src="jquery-2.2.3.js"></script>
    142         <script>
    143             //点击【编辑】显示
    144 
    145 $(function () {
    146 
    147 
    148     $("table[name=host] tr:gt(0) td:last-child").click(function (event) {
    149 
    150         alert("234");
    151 //        $("#full").css({height:"100%","100%"});
    152 
    153         $(".modified").data('current-edit-obj', $(this));
    154 
    155         $(".modified,#full").show();
    156 
    157         var hostname = $(this).siblings("td[name=hostname]").text();
    158         $(".modified #hostname").val(hostname);
    159         var ip = $(this).siblings("td[name=ip]").text();
    160         $(".modified #ip").val(ip);
    161         var port = $(this).siblings("td[name=port]").text();
    162         $(".modified #port").val(port);
    163     });
    164     //取消编辑
    165     $(".modified #cancel").bind("click", function () {
    166         $(".modified,#full").hide();
    167     });
    168 
    169 //    确定修改
    170     $(".modified #ok").bind("click", function (event) {
    171         var check_status = true;
    172         var ths = $(".modified").data('current-edit-obj');
    173         var hostname = $(".modified #hostname").val().trim();
    174         var ip = $(".modified #ip").val().trim();
    175         var port = $(".modified #port").val().trim();
    176         var port = parseInt(port);
    177         console.log(port);
    178         //        端口为空设置为22
    179         if (isNaN(port)) {
    180             alert("您没有设置正常的SSH端口号,将采用默认22号端口");
    181             var port = 22;
    182         }else if ( port > 65535) {
    183         //            如果端口不是一个数字 或者端口大于65535
    184             var check_status = false;
    185             $(".modified #port").css("border-color","red");
    186             alert("端口号超过范围!")
    187         };
    188         // 主机和ip不能是空
    189         if ( hostname == ""){
    190             var check_status = false;
    191             $(".modified #hostname").css("border-color","red");
    192         }else if (ip == "") {
    193             var check_status = false;
    194             $(".modified #ip").css("border-color","red");
    195         };
    196         if (check_status == false){
    197             return false;
    198         }else{
    199             //$(this).css("height","60px")   为什么不用$(this),而用$()
    200             $(ths).siblings("td[name=hostname]").text(hostname);
    201             $(ths).siblings("td[name=ip]").text(ip);
    202             $(ths).siblings("td[name=port]").text(port);
    203             $(".modified,#full").hide();
    204         };
    205 
    206     });
    207 
    208 });
    209             
    210         </script>
    211     </head>
    212     <body>
    213         <h1>
    214             <span class="blue">&lt;</span>Homework1<span class="blue">&gt;</span> <span class="yellow">HostList</span>
    215         </h1>
    216         <div id="full">
    217             <div class="modified">
    218                 <li>主机名:<input id="hostname" type="text" value="" />*</li>
    219                 <li>ip地址:<input id="ip" type="text" value="" />*</li>
    220                 <li>端口号:<input id="port" type="text" value="" />[0-65535]</li>
    221                     <div id="useraction">
    222                      <input class="iputbutton" type="button" name="确定" id="ok" value="确定"/>
    223                     <input class="iputbutton" type="button" name="取消" id="cancel" value="取消"/>
    224                     </div>
    225             </div>
    226         </div>
    227         <table class="container" name="host">
    228             <tr>
    229                 <th><h1>主机名</h1></th>
    230                 <th><h1>IP地址</h1></th>
    231                 <th><h1>端口</h1></th>
    232                 <th><h1>操作</h1></th>
    233 
    234             </tr>
    235             <tr>
    236                 <td name="hostname">web01</td>
    237                 <td name="ip">192.168.2.1</td>
    238                 <td name="port">22</td>
    239                 <td>编辑 </td>
    240             </tr>
    241             <tr>
    242                 <td name="hostname">web02</td>
    243                 <td name="ip">192.168.2.2</td>
    244                 <td name="port">223</td>
    245                 <td>编辑 </td>
    246             </tr>
    247             <tr>
    248                 <td name="hostname">web03</td>
    249                 <td name="ip">192.168.2.3</td>
    250                 <td name="port">232</td>
    251                 <td>编辑 </td>
    252             </tr>
    253             <tr>
    254                 <td name="hostname">web04</td>
    255                 <td name="ip">192.168.2.4</td>
    256                 <td name="port">232</td>
    257                 <td>编辑 </td>
    258             </tr>
    259         </table>
    260 
    261 
    262     </body>
    263 </html>
    View Code

    3.2 CSS操作

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

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

            3.2.3(尺寸)   height()  width()  

    实例 返回顶部

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="js/jquery-2.2.3.js"></script>
     7     <script>
     8 
     9 
    10           window.onscroll=function(){
    11 
    12               var current=$(window).scrollTop();
    13               console.log(current)
    14               if (current>100){
    15 
    16                   $(".returnTop").removeClass("hide")
    17               }
    18               else {
    19               $(".returnTop").addClass("hide")
    20           }
    21           }
    22 
    23 
    24            function returnTop(){
    25 //               $(".div1").scrollTop(0);
    26 
    27                $(window).scrollTop(0)
    28            }
    29 
    30 
    31 
    32 
    33     </script>
    34     <style>
    35         body{
    36             margin: 0px;
    37         }
    38         .returnTop{
    39             height: 60px;
    40              100px;
    41             background-color: darkgray;
    42             position: fixed;
    43             right: 0;
    44             bottom: 0;
    45             color: greenyellow;
    46             line-height: 60px;
    47             text-align: center;
    48         }
    49         .div1{
    50             background-color: orchid;
    51             font-size: 5px;
    52             overflow: auto;
    53              500px;
    54         }
    55         .div2{
    56             background-color: darkcyan;
    57         }
    58         .div3{
    59             background-color: aqua;
    60         }
    61         .div{
    62             height: 300px;
    63         }
    64         .hide{
    65             display: none;
    66         }
    67     </style>
    68 </head>
    69 <body>
    70      <div class="div1 div">
    71          <p>hello</p>
    72          <p>hello</p>
    73          <p>hello</p>
    74          <p>hello</p>
    75          <p>hello</p>
    76          <p>hello</p>
    77          <p>hello</p>
    78          <p>hello</p>
    79          <p>hello</p>
    80          <p>hello</p>
    81          <p>hello</p>
    82          <p>hello</p>
    83          <p>hello</p>
    84          <p>hello</p>
    85          <p>hello</p>
    86          <p>hello</p>
    87          <p>hello</p>
    88          <p>hello</p>
    89 
    90      </div>
    91      <div class="div2 div"></div>
    92      <div class="div3 div"></div>
    93      <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
    94 </body>
    95 </html>
    View Code

    实例 滚动菜单 

      1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4     <meta charset="UTF-8">
      5     <title></title>
      6     <style>
      7 
      8         body{
      9             margin: 0px;
     10         }
     11         img {
     12             border: 0;
     13         }
     14         ul{
     15             padding: 0;
     16             margin: 0;
     17             list-style: none;
     18         }
     19         .clearfix:after {
     20             content: ".";
     21             display: block;
     22             height: 0;
     23             clear: both;
     24             visibility: hidden;
     25         }
     26 
     27         .wrap{
     28              980px;
     29             margin: 0 auto;
     30         }
     31 
     32         .pg-header{
     33             background-color: #303a40;
     34             -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
     35             -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
     36             box-shadow: 0 2px 5px rgba(0,0,0,.2);
     37         }
     38         .pg-header .logo{
     39             float: left;
     40             padding:5px 10px 5px 0px;
     41         }
     42         .pg-header .logo img{
     43             vertical-align: middle;
     44              110px;
     45             height: 40px;
     46 
     47         }
     48         .pg-header .nav{
     49             line-height: 50px;
     50         }
     51         .pg-header .nav ul li{
     52             float: left;
     53         }
     54         .pg-header .nav ul li a{
     55             display: block;
     56             color: #ccc;
     57             padding: 0 20px;
     58             text-decoration: none;
     59             font-size: 14px;
     60         }
     61         .pg-header .nav ul li a:hover{
     62             color: #fff;
     63             background-color: #425a66;
     64         }
     65         .pg-body{
     66 
     67         }
     68         .pg-body .catalog{
     69             position: absolute;
     70             top:60px;
     71              200px;
     72             background-color: #fafafa;
     73             bottom: 0px;
     74         }
     75         .pg-body .catalog.fixed{
     76             position: fixed;
     77             top:10px;
     78         }
     79 
     80         .pg-body .catalog .catalog-item.active{
     81             color: #fff;
     82             background-color: #425a66;
     83         }
     84 
     85         .pg-body .content{
     86             position: absolute;
     87             top:60px;
     88              700px;
     89             margin-left: 210px;
     90             background-color: #fafafa;
     91             overflow: auto;
     92         }
     93         .pg-body .content .section{
     94             height: 500px;
     95         }
     96     </style>
     97 </head>
     98 <body>
     99 
    100     <div class="pg-header">
    101         <div class="wrap clearfix">
    102             <div class="logo">
    103                 <a href="#">
    104                     <img src="images/3.jpg">
    105                 </a>
    106             </div>
    107             <div class="nav">
    108                 <ul>
    109                     <li>
    110                         <a  href="#">首页</a>
    111                     </li>
    112                     <li>
    113                         <a  href="#">功能一</a>
    114                     </li>
    115                     <li>
    116                         <a  href="#">功能二</a>
    117                     </li>
    118                 </ul>
    119             </div>
    120 
    121         </div>
    122     </div>
    123     <div class="pg-body">
    124         <div class="wrap">
    125             <div class="catalog">
    126                 <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
    127                 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
    128                 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
    129             </div>
    130             <div class="content">
    131 
    132                 <div menu="function1" class="section">
    133                     <h1>第一章</h1>
    134                 </div>
    135                 <div menu="function2" class="section">
    136                     <h1>第二章</h1>
    137                 </div>
    138                 <div menu="function3" class="section">
    139                     <h1>第三章</h1>
    140                 </div>
    141             </div>
    142         </div>
    143     </div>
    144 
    145     <script type="text/javascript" src="js/jquery-2.2.3.js"></script>
    146     <script type="text/javascript">
    147 
    148 
    149      window.onscroll=function(){
    150          var ws=$(window).scrollTop()
    151          if (ws>50){
    152              $(".catalog").addClass("fixed")
    153          }
    154          else {
    155              $(".catalog").removeClass("fixed")
    156          }
    157          $(".content").children("").each(function(){
    158 
    159           var offtop=$(this).offset().top;
    160 //             console.log(offtop)
    161              var total=$(this).height()+offtop;
    162 
    163              if (ws>offtop && ws<total){
    164 
    165                  if($(window).height()+$(window).scrollTop()==$(document).height()){
    166                      var index=$(".catalog").children(" :last").css("fontSize","40px").siblings().css("fontSize","12px")
    167                      console.log(index)
    168                  target='div[auto-to="'+index+'"]';
    169                  $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
    170 
    171                  }
    172                  else{
    173                       var index=$(this).attr("menu");
    174                  target='div[auto-to="'+index+'"]';
    175                  $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
    176                  }
    177 
    178 
    179              }
    180 
    181          })
    182 
    183      }
    184 
    185     </script>
    186 
    187 
    188 </body>
    189 </html>
    View Code

    3.3 文档处理

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

                       prepend()    prependTo()

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

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

    实例 clone方法的应用

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 
     7 </head>
     8 <body>
     9             <div class="outer">
    10                 <div class="condition">
    11 
    12                         <div class="icons" style="display:inline-block">
    13                             <a onclick="add(this);"><button>+</button></a>
    14                         </div>
    15 
    16                         <div class="input" style="display:inline-block">
    17                             <input type="checkbox">
    18                             <input type="text" value="alex">
    19                         </div>
    20                 </div>
    21             </div>
    22 
    23 <script src="js/jquery-2.2.3.js"></script>
    24     <script>
    25 
    26             function add(self){
    27                 var $duplicate = $(self).parent().parent().clone();
    28                 $duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-");
    29                 $duplicate.appendTo($(self).parent().parent().parent());
    30 
    31             }
    32            function removed(self){
    33 
    34                $(self).parent().parent().remove()
    35 
    36            }
    37 
    38     </script>
    39 </body>
    40 </html>
    View Code

    3.4 事件

          3.4.1

                   $(document).ready(function(){}) -----------> $(function(){})

          3.4.2

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

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

                   $("ul").delegate("li","click",function(){})

    实例 拖动面板

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8     <div style="border: 1px solid #ddd; 600px;position: absolute;">
     9         <div id="title" style="background-color: black;height: 40px;color: white;">
    10             标题
    11         </div>
    12         <div style="height: 300px;">
    13             内容
    14         </div>
    15     </div>
    16 <script type="text/javascript" src="jquery-2.2.3.js"></script>
    17 <script>
    18     $(function(){
    19         // 页面加载完成之后自动执行
    20         $('#title').mouseover(function(){
    21             $(this).css('cursor','move');
    22         }).mousedown(function(e){
    23             //console.log($(this).offset());
    24             var _event = e || window.event;
    25             // 原始鼠标横纵坐标位置
    26             var ord_x = _event.clientX;
    27             var ord_y = _event.clientY;
    28 
    29             var parent_left = $(this).parent().offset().left;
    30             var parent_top = $(this).parent().offset().top;
    31 
    32             $(this).bind('mousemove', function(e){
    33                 var _new_event = e || window.event;
    34                 var new_x = _new_event.clientX;
    35                 var new_y = _new_event.clientY;
    36 
    37                 var x = parent_left + (new_x - ord_x);
    38                 var y = parent_top + (new_y - ord_y);
    39 
    40                 $(this).parent().css('left',x+'px');
    41                 $(this).parent().css('top',y+'px');
    42 
    43             })
    44         }).mouseup(function(){
    45             $(this).unbind('mousemove');
    46         });
    47     })
    48 </script>
    49 </body>
    50 </html>
    View Code

    放大镜 

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>bigger</title>
      6     <style>
      7         *{
      8             margin: 0;
      9             padding:0;
     10         }
     11         .outer{
     12             height: 350px;
     13              350px;
     14             border: dashed 5px cornflowerblue;
     15         }
     16         .outer .small_box{
     17             position: relative;
     18         }
     19         .outer .small_box .float{
     20             height: 175px;
     21              175px;
     22             background-color: darkgray;
     23             opacity: 0.4;
     24             fill-opacity: 0.4;
     25             position: absolute;
     26             display: none;
     27 
     28         }
     29 
     30         .outer .big_box{
     31             height: 400px;
     32              400px;
     33             overflow: hidden;
     34             position:absolute;
     35             left: 360px;
     36             top: 0px;
     37             z-index: 1;
     38             border: 5px solid rebeccapurple;
     39             display: none;
     40 
     41 
     42         }
     43         .outer .big_box img{
     44             position: absolute;
     45             z-index: 5;
     46         }
     47 
     48 
     49     </style>
     50 </head>
     51 <body>
     52 
     53 
     54         <div class="outer">
     55             <div class="small_box">
     56                 <div class="float"></div>
     57                 <img src="small.jpg">
     58 
     59             </div>
     60             <div class="big_box">
     61                 <img src="big.jpg">
     62             </div>
     63 
     64         </div>
     65 
     66 
     67 <script src="js/jquery-2.2.3.js"></script>
     68 <script>
     69 
     70     $(function(){
     71 
     72           $(".small_box").mouseover(function(){
     73 
     74               $(".float").css("display","block");
     75               $(".big_box").css("display","block")
     76 
     77           })
     78           $(".small_box").mouseout(function(){
     79 
     80               $(".float").css("display","none");
     81               $(".big_box").css("display","none")
     82 
     83           })
     84 
     85 
     86 
     87           $(".small_box").mousemove(function(e){
     88 
     89               var _event=e || window.event;
     90 
     91               var float_width=$(".float").width();
     92               var float_height=$(".float").height();
     93 
     94               console.log(float_height,float_width);
     95 
     96               var float_height_half=float_height/2;
     97               var float_width_half=float_width/2;
     98               console.log(float_height_half,float_width_half);
     99 
    100 
    101                var small_box_width=$(".small_box").height();
    102                var small_box_height=$(".small_box").width();
    103 
    104 
    105 
    106 //  鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
    107               var mouse_left=_event.clientX-float_width_half;
    108               var mouse_top=_event.clientY-float_height_half;
    109 
    110               if(mouse_left<0){
    111                   mouse_left=0
    112               }else if (mouse_left>small_box_width-float_width){
    113                   mouse_left=small_box_width-float_width
    114               }
    115 
    116 
    117               if(mouse_top<0){
    118                   mouse_top=0
    119               }else if (mouse_top>small_box_height-float_height){
    120                   mouse_top=small_box_height-float_height
    121               }
    122 
    123                $(".float").css("left",mouse_left+"px");
    124                $(".float").css("top",mouse_top+"px")
    125 
    126                var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
    127                var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
    128 
    129               console.log(percentX,percentY)
    130 
    131                $(".big_box img").css("left", -percentX*mouse_left+"px")
    132                $(".big_box img").css("top", -percentY*mouse_top+"px")
    133 
    134 
    135           })
    136 
    137 
    138     })
    139 
    140 
    141 </script>
    142 </body>
    143 </html>
    View Code

    3.5 动画效果

    实例  隐藏与显示

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="js/jquery-2.2.3.js"></script>
     7     <script>
     8     /**
     9  * Created by yuan on 16/5/5.
    10  */
    11 
    12 $(document).ready(function(){
    13     $("#hide").click(function(){
    14         $("p").hide(1000);
    15     });
    16     $("#show").click(function(){
    17         $("p").show(1000);
    18     });
    19 
    20 //用于切换被选元素的 hide() 与 show() 方法。
    21     $("#toggle").click(function(){
    22         $("p").toggle();
    23     })
    24 
    25  for (var i= 0;i<7;i++){
    26 //            颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
    27             $("<div>").appendTo(document.body);
    28         }
    29         $("div").click(function(){
    30           $(this).hide(2000);
    31         });
    32 });
    33 
    34     </script>
    35     <link type="text/css" rel="stylesheet" href="style.css">
    36 </head>
    37 <body>
    38     <!--1 隐藏与显示-->
    39     <!--2 淡入淡出-->
    40     <!--3 滑动-->
    41     <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->
    42 
    43 
    44     <p>hello</p>
    45     <button id="hide">隐藏</button>
    46     <button id="show">显示</button>
    47     <button id="toggle">隐藏/显示</button>
    48 
    49 </body>
    50 </html>
    View Code

    实例  淡入淡出

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="js/jquery-2.2.3.js"></script>
     7     <script>
     8     $(document).ready(function(){
     9    $("#in").click(function(){
    10        $("#id1").fadeIn(1000);
    11        $("#id2").fadeIn(1000);
    12        $("#id3").fadeIn(1000);
    13 
    14    });
    15     $("#out").click(function(){
    16        $("#id1").fadeOut(1000);
    17        $("#id2").fadeOut(1000);
    18        $("#id3").fadeOut(1000);
    19 
    20    });
    21     $("#toggle").click(function(){
    22        $("#id1").fadeToggle(1000);
    23        $("#id2").fadeToggle(1000);
    24        $("#id3").fadeToggle(1000);
    25 
    26    });
    27     $("#fadeto").click(function(){
    28        $("#id1").fadeTo(1000,0.4);
    29        $("#id2").fadeTo(1000,0.5);
    30        $("#id3").fadeTo(1000,0);
    31 
    32    });
    33 });
    34 
    35     
    36     
    37     </script>
    38 
    39 </head>
    40 <body>
    41       <button id="in">fadein</button>
    42       <button id="out">fadeout</button>
    43       <button id="toggle">fadetoggle</button>
    44       <button id="fadeto">fadeto</button>
    45 
    46       <div id="id1" style="display:none;  80px;height: 80px;background-color: blueviolet"></div>
    47       <div id="id2" style="display:none;  80px;height: 80px;background-color: orangered "></div>
    48       <div id="id3" style="display:none;  80px;height: 80px;background-color: darkgreen "></div>
    49 
    50 </body>
    51 </html>
    View Code

    3.6 扩展(插件机制)   

    •  jquery.extend({})  
    •  jquery.fn.extend({})

    实例 商城菜单

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      5     <meta name="viewport" content="width=device-width">
      6     <meta http-equiv="X-UA-Compatible" content="IE=8">
      7     <title>购物商城</title>
      8     <style>
      9 
     10 *{
     11     margin: 0;
     12     padding: 0;
     13 }
     14 .hide{
     15     display:none;
     16 }
     17 
     18 
     19 .header-nav {
     20     height: 39px;
     21     background: #c9033b;
     22 }
     23 .header-nav .bg{
     24     background: #c9033b;
     25 }
     26 
     27 .header-nav .nav-allgoods .menuEvent {
     28     display: block;
     29     height: 39px;
     30     line-height: 39px;
     31     text-decoration: none;
     32     color: #fff;
     33     text-align: center;
     34     font-weight: bold;
     35     font-family: 微软雅黑;
     36     color: #fff;
     37      100px;
     38 }
     39 .header-nav .nav-allgoods .menuEvent .catName {
     40     height: 39px;
     41     line-height: 39px;
     42     font-size: 15px;
     43 }
     44 
     45 .header-nav .nav-allmenu a {
     46     display: inline-block;
     47     height: 39px;
     48     vertical-align: top;
     49     padding: 0 15px;
     50     text-decoration: none;
     51     color: #fff;
     52     float: left;
     53 }
     54 
     55 .header-menu a{
     56     color:#656565;
     57 }
     58 
     59 .header-menu .menu-catagory{
     60     position: absolute;
     61     background-color: #fff;
     62     border-left:1px solid #fff;
     63     height: 316px;
     64      230px;
     65      z-index: 4;
     66      float: left;
     67 }
     68 .header-menu .menu-catagory .catagory {
     69     border-left:4px solid #fff;
     70     height: 104px;
     71     border-bottom: solid 1px #eaeaea;
     72 }
     73 .header-menu .menu-catagory .catagory:hover {
     74     height: 102px;
     75     border-left:4px solid #c9033b;
     76     border-bottom: solid 1px #bcbcbc;
     77     border-top: solid 1px #bcbcbc;
     78 }
     79 
     80 .header-menu .menu-content .item{
     81     margin-left:230px;
     82     position:absolute;
     83     background-color:white;
     84     height:314px;
     85     500px;
     86     z-index:4;
     87     float:left;
     88     border: solid 1px #bcbcbc;
     89     border-left:0;
     90     box-shadow: 1px 1px 5px #999;
     91 }
     92 
     93     </style>
     94 </head>
     95 <body>
     96 
     97 <div class="pg-header">
     98 
     99     <div class="header-nav">
    100         <div class="container narrow bg">
    101             <div class="nav-allgoods left">
    102                 <a id="all_menu_catagory" href="#" class="menuEvent">
    103                     <strong class="catName">全部商品分类</strong>
    104                     <span class="arrow" style="display: inline-block;vertical-align: top;"></span>
    105                 </a>
    106             </div>
    107         </div>
    108     </div>
    109     <div class="header-menu">
    110         <div class="container narrow hide">
    111             <div id="nav_all_menu" class="menu-catagory">
    112                 <div class="catagory" float-content="one">
    113                     <div class="title">家电</div>
    114                     <div class="body">
    115                         <a href="#">空调</a>
    116                     </div>
    117                 </div>
    118                 <div class="catagory" float-content="two">
    119                     <div class="title">床上用品</div>
    120                     <div class="body">
    121                         <a href="http://www.baidu.com">床单</a>
    122                     </div>
    123                 </div>
    124                 <div class="catagory" float-content="three">
    125                     <div class="title">水果</div>
    126                     <div class="body">
    127                         <a href="#">橘子</a>
    128                     </div>
    129                 </div>
    130             </div>
    131 
    132             <div id="nav_all_content" class="menu-content">
    133                 <div class="item hide" float-id="one">
    134 
    135                     <dl>
    136                         <dt><a href="#" class="red">厨房用品</a></dt>
    137                         <dd>
    138                             <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>
    139                         </dd>
    140                     </dl>
    141                     <dl>
    142                         <dt><a href="#" class="red">厨房用品</a></dt>
    143                         <dd>
    144                             <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>
    145 
    146                         </dd>
    147                     </dl>
    148                     <dl>
    149                         <dt><a href="#" class="red">厨房用品</a></dt>
    150                         <dd>
    151                             <span>| <a href="#">菜板</a> </span>
    152                         </dd>
    153                     </dl>
    154                     <dl>
    155                         <dt><a href="#" class="red">厨房用品</a></dt>
    156                         <dd>
    157                             <span>| <a href="#" target="_blank" title="">碗</a> </span>
    158 
    159                         </dd>
    160                     </dl>
    161 
    162                 </div>
    163                 <div class="item hide" float-id="two">
    164                     <dl>
    165                         <dt><a href="#" class="red">厨房用品</a></dt>
    166                         <dd>
    167                             <span>| <a href="#" target="_blank" title="">角阀</a> </span>
    168 
    169                         </dd>
    170                     </dl>
    171                     <dl>
    172                         <dt><a href="#" class="red">厨房用品</a></dt>
    173                         <dd>
    174                             <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>
    175 
    176                         </dd>
    177                     </dl>
    178                     <dl>
    179                         <dt><a href="#" class="red">厨房用品</a></dt>
    180                         <dd>
    181                             <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>
    182 
    183                         </dd>
    184                     </dl>
    185 
    186                 </div>
    187                 <div class="item hide" float-id="three">
    188                     <dl>
    189                         <dt><a href="#" class="red">厨房用品3</a></dt>
    190                         <dd>
    191                             <span>| <a href="#" target="_blank" title="角阀">角阀3</a> </span>
    192 
    193                         </dd>
    194                     </dl>
    195                     <dl>
    196                         <dt><a href="#" class="red">厨房用品3</a></dt>
    197                         <dd>
    198                             <span>| <a href="http://www.meilele.com/category-jiaofa/" target="_blank" title="角阀">角阀3</a> </span>
    199 
    200                         </dd>
    201                     </dl>
    202                 </div>
    203             </div>
    204         </div>
    205     </div>
    206 
    207 </div>
    208 
    209 
    210 <script src="js/jquery-2.2.3.js"></script>
    211 
    212 <script type="text/javascript">
    213     $(document).ready(function () {
    214 
    215         Change_Menu('#all_menu_catagory','#nav_all_menu', '#nav_all_content');
    216 
    217     });
    218 
    219 
    220 
    221     function Change_Menu(all_menu_catagory,menu, content) {
    222         $all_menu_catagory = $(all_menu_catagory);
    223         $menu = $(menu);
    224         $content = $(content);
    225 
    226         $all_menu_catagory.bind("mouseover", function () {
    227             $menu.parent().removeClass('hide');
    228         });
    229         $all_menu_catagory.bind("mouseout", function () {
    230             $menu.parent().addClass('hide');
    231         });
    232 
    233         $menu.children().bind("mouseover", function () {
    234             $menu.parent().removeClass('hide');
    235             $item_content = $content.find('div[float-id="' + $(this).attr("float-content") + '"]');
    236             $item_content.removeClass('hide').siblings().addClass('hide');
    237         });
    238         $menu.bind("mouseout", function () {
    239             $content.children().addClass('hide');
    240             $menu.parent().addClass('hide');
    241         });
    242         $content.children().bind("mouseover", function () {
    243 
    244             $menu.parent().removeClass('hide');
    245             $(this).removeClass('hide');
    246         });
    247         $content.children().bind("mouseout", function () {
    248 
    249             $(this).addClass('hide');
    250             $menu.parent().addClass('hide');
    251         });
    252     }
    253 </script>
    254 
    255 
    256 </body>
    257 </html>
    View Code

    实例 编辑框

      1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4     <meta charset="UTF-8">
      5     <title></title>
      6     <style>
      7         .edit-mode{
      8             background-color: #b3b3b3;
      9             padding: 8px;
     10             text-decoration: none;
     11             color: white;
     12         }
     13         .editing{
     14             background-color: #f0ad4e;
     15         }
     16     </style>
     17 </head>
     18 <body>
     19 
     20     <div style="padding: 20px">
     21         <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />
     22         <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />
     23         <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />
     24 
     25         <a id="edit_mode" class="edit-mode" href="javascript:void(0);"  onclick="EditMode(this, '#tb1');">进入编辑模式</a>
     26 
     27     </div>
     28     <table border="1">
     29         <thead>
     30         <tr>
     31             <th>选择</th>
     32             <th>主机名</th>
     33             <th>端口</th>
     34             <th>状态</th>
     35         </tr>
     36         </thead>
     37         <tbody id="tb1">
     38             <tr>
     39                 <td><input type="checkbox" /></td>
     40                 <td edit="true">v1</td>
     41                 <td>v11</td>
     42                 <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
     43             </tr>
     44             <tr>
     45                 <td><input type="checkbox" /></td>
     46                 <td edit="true">v1</td>
     47                 <td>v11</td>
     48                 <td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下线</td>
     49             </tr>
     50             <tr>
     51                 <td><input type="checkbox" /></td>
     52                 <td edit="true">v1</td>
     53                 <td>v11</td>
     54                 <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
     55             </tr>
     56         </tbody>
     57     </table>
     58 
     59     <script type="text/javascript" src="js/jquery-2.2.3.js"></script>
     60     <script>
     61         /*
     62          监听是否已经按下control键
     63          */
     64         window.globalCtrlKeyPress = false;
     65 
     66         window.onkeydown = function(event){
     67             if(event && event.keyCode == 17){
     68                 window.globalCtrlKeyPress = true;
     69             }
     70         };
     71         window.onkeyup = function(event){
     72             if(event && event.keyCode == 17){
     73                 window.globalCtrlKeyPress = false;
     74             }
     75         };
     76 
     77         /*
     78          按下Control,联动表格中正在编辑的select
     79          */
     80         function MultiSelect(ths){
     81             if(window.globalCtrlKeyPress){
     82                 var index = $(ths).parent().index();
     83                 var value = $(ths).val();
     84                 $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
     85                     $(this).parent().parent().children().eq(index).children().val(value);
     86                 });
     87             }
     88         }
     89     </script>
     90     <script type="text/javascript">
     91 
     92 $(function(){
     93     BindSingleCheck('#edit_mode', '#tb1');
     94 });
     95 
     96 function BindSingleCheck(mode, tb){
     97 
     98     $(tb).find(':checkbox').bind('click', function(){
     99         var $tr = $(this).parent().parent();
    100         if($(mode).hasClass('editing')){
    101             if($(this).prop('checked')){
    102                 RowIntoEdit($tr);
    103             }else{
    104                 RowOutEdit($tr);
    105             }
    106         }
    107     });
    108 }
    109 
    110 function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){
    111     var sel= document.createElement('select');
    112     $.each(attrs,function(k,v){
    113         $(sel).attr(k,v);
    114     });
    115     $.each(csses,function(k,v){
    116         $(sel).css(k,v);
    117     });
    118     $.each(option_dict,function(k,v){
    119         var opt1=document.createElement('option');
    120         var sel_text = v[item_value];
    121         var sel_value = v[item_key];
    122 
    123         if(sel_value==current_val){
    124             $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));
    125         }else{
    126             $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));
    127         }
    128     });
    129     return sel;
    130 }
    131 
    132 STATUS = [
    133     {'id': 1, 'value': "在线"},
    134     {'id': 2, 'value': "下线"}
    135 ];
    136 
    137 BUSINESS = [
    138     {'id': 1, 'value': "车上会"},
    139     {'id': 2, 'value': "二手车"}
    140 ];
    141 
    142 function RowIntoEdit($tr){
    143     $tr.children().each(function(){
    144         if($(this).attr('edit') == "true"){
    145             if($(this).attr('edit-type') == "select"){
    146                 var select_val = $(this).attr('sel-val');
    147                 var global_key = $(this).attr('global-key');
    148                 var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);
    149                 $(this).html(selelct_tag);
    150             }else{
    151                 var orgin_value = $(this).text();
    152                 var temp = "<input value='"+ orgin_value+"' />";
    153                 $(this).html(temp);
    154             }
    155 
    156         }
    157     });
    158 }
    159 
    160 function RowOutEdit($tr){
    161     $tr.children().each(function(){
    162         if($(this).attr('edit') == "true"){
    163             if($(this).attr('edit-type') == "select"){
    164                 var new_val = $(this).children(':first').val();
    165                 var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();
    166                 $(this).attr('sel-val', new_val);
    167                 $(this).text(new_text);
    168             }else{
    169                 var orgin_value = $(this).children().first().val();
    170                 $(this).text(orgin_value);
    171             }
    172 
    173         }
    174     });
    175 }
    176 
    177 function CheckAll(mode, tb){
    178     if($(mode).hasClass('editing')){
    179 
    180         $(tb).children().each(function(){
    181 
    182             var tr = $(this);
    183             var check_box = tr.children().first().find(':checkbox');
    184             if(check_box.prop('checked')){
    185 
    186             }else{
    187                 check_box.prop('checked',true);
    188 
    189                 RowIntoEdit(tr);
    190             }
    191         });
    192 
    193     }else{
    194 
    195         $(tb).find(':checkbox').prop('checked', true);
    196     }
    197 }
    198 
    199 function CheckReverse(mode, tb){
    200 
    201     if($(mode).hasClass('editing')){
    202 
    203         $(tb).children().each(function(){
    204             var tr = $(this);
    205             var check_box = tr.children().first().find(':checkbox');
    206             if(check_box.prop('checked')){
    207                 check_box.prop('checked',false);
    208                 RowOutEdit(tr);
    209             }else{
    210                 check_box.prop('checked',true);
    211                 RowIntoEdit(tr);
    212             }
    213         });
    214 
    215 
    216     }else{
    217         //
    218         $(tb).children().each(function(){
    219             var tr = $(this);
    220             var check_box = tr.children().first().find(':checkbox');
    221             if(check_box.prop('checked')){
    222                 check_box.prop('checked',false);
    223             }else{
    224                 check_box.prop('checked',true);
    225             }
    226         });
    227     }
    228 }
    229 
    230 function CheckCancel(mode, tb){
    231     if($(mode).hasClass('editing')){
    232         $(tb).children().each(function(){
    233             var tr = $(this);
    234             var check_box = tr.children().first().find(':checkbox');
    235             if(check_box.prop('checked')){
    236                 check_box.prop('checked',false);
    237                 RowOutEdit(tr);
    238 
    239             }else{
    240 
    241             }
    242         });
    243 
    244     }else{
    245         $(tb).find(':checkbox').prop('checked', false);
    246     }
    247 }
    248 
    249 function EditMode(ths, tb){
    250     if($(ths).hasClass('editing')){
    251         $(ths).removeClass('editing');
    252         $(tb).children().each(function(){
    253             var tr = $(this);
    254             var check_box = tr.children().first().find(':checkbox');
    255             if(check_box.prop('checked')){
    256                 RowOutEdit(tr);
    257             }else{
    258 
    259             }
    260         });
    261 
    262     }else{
    263 
    264         $(ths).addClass('editing');
    265         $(tb).children().each(function(){
    266             var tr = $(this);
    267             var check_box = tr.children().first().find(':checkbox');
    268             if(check_box.prop('checked')){
    269                 RowIntoEdit(tr);
    270             }else{
    271 
    272             }
    273         });
    274 
    275     }
    276 }
    277 
    278 
    279     </script>
    280 
    281 </body>
    282 </html>
    View Code
  • 相关阅读:
    一致性哈希算法
    Discourse 的标签(Tag)只能是小写的原因
    JIRA 链接 bitbucket 提示错误 Invalid OAuth credentials
    JIRA 如何连接到云平台的 bitbucket
    Apache Druid 能够支持即席查询
    如何在 Discourse 中配置使用 GitHub 登录和创建用户
    Apache Druid 是什么
    Xshell 如何导入 PuTTYgen 生成的 key
    windows下配置Nginx支持php
    laravel连接数据库提示mysql_connect() :Connection refused...
  • 原文地址:https://www.cnblogs.com/horror/p/9379400.html
Copyright © 2011-2022 走看看