写在前面

　　　　张国臂掖，以通西域；

  1. http://jquery.cuishifeng.cn/index.html
  2.  
  3. JQuery对象：   Jquery.方法   $.方法
  4. # Jquery和$是完全一样的
  5.  
  6. JQuery的方法只能JQuery对象调用
  7. JS的方法只能JS使用
  8.  
  9. 变量命名：
  10. JS      var $variable = jQuery 对象
  11. JQuery  var variable = DOM 对象
  12.  
  13. JQuery语法：$(selector).action()
  14.     selector  选择器
  15.     action    对标签的操作
  16.  
  17. JQuery的选择器(selector)
  18.     基本选择器
  19.     层级选择器
  20. 　　 ...
  21.  
  22. $(".p1").css("color","red");
  23. JQuery 选择器选到的是一个集合对象(一组标签)，后面的操作会循环加载；
  24.  
  25. 但是JS不支持，JS必须自己写循环处理；
  26.  
  27. JQuery支持链式操作
  28.  
  29. JQuery固有属性  --> prop
  30.     input type="checked"
  31.     selected=selected
  32. 自定义的属性     --> attr
  33.  
  34. clone

　　

参考：http://www.cnblogs.com/yuanchenqi/articles/6936986.html

一、JQuery对象

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

　　

  1. $("#test").html() 
  2.  
  3.          意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 
  4.  
  5.          这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 
  6.  
  7.          虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
  8.  
  9.          约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 
  10.  
  11. var $variable = jQuery 对象
  12. var variable = DOM 对象
  13.  
  14. $variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

　　

  1.  jquery的基础语法：$(selector).action()     
  2.  
  3.  参考：http://jquery.cuishifeng.cn/

　

二、JQuery查找元素

　　1.选择器

  1. 基本选择器
  2. $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")
  3.  
  4. 层级选择器
  5. $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")
  6.  
  7. 基本筛选器
  8. $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")
  9.  
  10. 属性选择器
  11. $('[id="div1"]')   $('["alex="sb"][id]')
  12.  
  13. 表单选择器
  14. $("[type='text']")     ---可简写成-->$(":text")
  15. // 注意只适用于input标签  : $("input:checked")
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <!--首先引入Jquery库-->
  8.     <script src="jquery-3.1.1.js"></script>
  9.  
  10. </head>
  11. <body>
  12.  
  13. <!--<span>span</span>-->
  14.  
  15. <!--<p>ppp</p>-->
  16. <!--<p class="p1">ppp</p>-->
  17. <!--<p class="p1">ppp</p>-->
  18.  
  19. <!--<div id="d1">DIV</div>-->
  20.  
  21. <!--++++++++++-->
  22.  
  23. <div class="outer">
  24.     <p>p1</p>
  25.     <div class="inner">
  26.         <p>p2</p>
  27.     </div>
  28. </div>
  29. <p>p3</p>
  30. <a href="">click</a>
  31. <p>p4</p>
  32.  
  33. <div egon="xialv">11</div>
  34. <div egon="xialv2">22</div>
  35.  
  36. <input type="checkbox">
  37. <input type="text">
  38.  
  39. <script>
  40. //基本选择器
  41. //    $("span")
  42. //    $("*")
  43. //    $(".p1").css("color","red");
  44. //    $("#d1").css("color","blue");
  45.  
  46. //    $(".class,p,div")  // 多元素选择器
  47.  
  48. //层级选择器
  49.     // 后代选择器
  50. //    $(".outer p").css("color","red");
  51.  
  52.     // 子代选择器
  53. //    $(".outer>p").css("color","red");
  54.  
  55.     // 毗邻选择器 (紧挨着的兄弟标签)
  56. //    $(".outer+p").css("color","red");
  57.  
  58.     // 兄弟选择器 (所有的兄弟标签)
  59. //    $(".outer~p").css("color","red");
  60.  
  61. //属性选择器
  62.     // 自定义属性
  63.     $("[egon]").css("color","green");
  64.  
  65.     $("[egon='xialv2']").css("color","green");
  66.  
  67. //表单选择器
  68.     $("[type='text']").css("border","1px solid red");
  69.     // 可以简写成如下形式，仅适用于input标签
  70.     $(":text").css("border","1px solid red");
  71.  
  72. </script>
  73. </body>
  74. </html>

　　2.表单属性选择器

  1.     :enabled
  2.     :disabled
  3.     :checked
  4.     :selected
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <form>
  9.     <!--<input type="checkbox" value="123">-->
  10.     <!--<input type="checkbox" value="456" checked>-->
  11.   <select id="sel">
  12.       <option value="1" selected="selected">Flowers</option>
  13.       <option value="2">Gardens</option>
  14.       <option value="3">Trees</option>
  15.       <option value="4">Fruits</option>
  16.   </select>
  17. </form>
  18. <script src="jquery-3.1.1.js"></script>
  19. <script>
  20. //    $("input:checked").each(function(){
  21. //        console.log($(this).val())
  22. //    })
  23. //     console.log($("input:checked").length);     // 1
  24.  
  25.     console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1
  26.     $("option:selected").each(function () {
  27.         console.log("--> " + $(this).val());
  28.     })
  29.     $("#sel").change(function () {
  30.         console.log($(this).val());
  31.     })
  32.  
  33. </script>
  34. </body>
  35. </html>

　　3.筛选器

  1. # 过滤筛选器
  2. $("li").eq(2)  $("li").first()  $("ul li").hasclass("test")
  3.  
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <title>Title</title>
  9.     <script src="jquery-3.1.1.js"></script>
  10. </head>
  11. <body>
  12. <ul class="outer">
  13.     <li class="item">11</li>
  14.     <li class="item">22</li>
  15.     <li class="item">33</li>
  16.     <li class="item">44</li>
  17.     <li class="item">55</li>
  18.     <li class="item">66</li>
  19.     <li class="item">77</li>
  20.     <li class="item">88</li>
  21.     <li class="item">99</li>
  22.     <li class="item">1010</li>
  23. </ul>
  24. <script>
  25.     // eq 索引
  26. //    $("ul li").eq(4).css("color","red");  // 推荐
  27. //    $("ul li:eq(4)").css("color","red");  // 需要自己拼接字符串，比较麻烦
  28.  
  29.     $("ul li").first().css("color","red");
  30.     $("ul li:lt(5)").css("color","red");
  31.     $("ul li:gt(5)").css("color","red");
  32.     $("ul li:even").css("color","red");     // 奇数
  33.     $("ul li:odd").css("color","red");      // 偶数
  34. </script>
  35. </body>
  36. </html>
  37.  
  38. # 导航查找(查找筛选器)
  39.  
  40.  查找子标签：         $("div").children(".test")      $("div").find(".test")  
  41.  
  42.  向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()
  43.                     $(".test").nextUntil() 
  44.  
  45.  向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()
  46.                     $("div").prevUntil()
  47.  查找所有兄弟标签：    $("div").siblings()  
  48.  
  49.  查找父标签：         $(".test").parent()              $(".test").parents()
  50.                     $(".test").parentUntil() 
  51.  
  52. <!DOCTYPE html>
  53. <html lang="en">
  54. <head>
  55.     <meta charset="UTF-8">
  56.     <title>Title</title>
  57.     <script src="jquery-3.1.1.js"></script>
  58. </head>
  59. <body>
  60.  
  61. <div class="item1">11</div>
  62. <div class="item2">22</div>
  63. <div class="item3">33</div>
  64. <div class="item4">44</div>
  65. <div class="item5">55</div>
  66.  
  67. <div class="outer">
  68.     <div class="inner">
  69.         <p id="p1">p1</p>
  70.     </div>
  71.     <p>p2</p>
  72. </div>
  73. <p>p3</p>
  74.  
  75. <script>
  76.     // 向下查找兄弟标签
  77. //    $(".item1").next().css("color","red");
  78. //    $(".item1").nextAll().css("color","red");
  79. //    $(".item1").nextUntil(".item5").css("color","red");
  80.  
  81.     // 查找所有兄弟标签
  82.     $(".item3").siblings().css("color","red");
  83.  
  84.     // 查找子代标签
  85. //    $(".outer").children().css("color","red");
  86.     $(".outer").children("p").css("color","red");
  87.     // 查找后代标签
  88.     $(".outer").find("p").css("color","red");
  89.  
  90.     // 查找父标签
  91.     $("#p1").parent().css("color","red");
  92.     $("#p1").parents().css("color","red");
  93.     $("#p1").parentsUntil(".outer").css("color","red");
  94.  
  95. </script>
  96. </body>
  97. </html>

三、JQuery操作元素

　　1.JQuery事件

  1. # 页面载入
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Title</title>
  8.     <script src="jquery-3.1.1.js"></script>
  9.     <script>
  10.         // 对应 JS 的onload事件
  11. //        $(document).ready(function () {
  12. //            $(".p1").css({"color":"red","font-size":"50px"});
  13. //        });
  14.         // 可以简写成如下形式：
  15.         $(function () {
  16.             $(".p1").css("color","blue");
  17.         })
  18.     </script>
  19. </head>
  20. <body>
  21.  
  22. <p class="p1">PPP</p>
  23.  
  24. </body>
  25. </html>
  26.  
  27. # 事件绑定
  28.  
  29. //JS事件绑定：     js的标签对象.on事件=函数
  30. //JQuery事件绑定： $().事件(函数)
  31.  
  32. <!DOCTYPE html>
  33. <html lang="en">
  34. <head>
  35.     <meta charset="UTF-8">
  36.     <title>Title</title>
  37.     <script src="jquery-3.1.1.js"></script>
  38. </head>
  39. <body>
  40. <ul>
  41.     <li>11</li>
  42.     <li>22</li>
  43.     <li>33</li>
  44.     <li>44</li>
  45.     <li>55</li>
  46. </ul>
  47.  
  48. <button>ADD</button>
  49. <script>
  50.     $("button").click(function () {
  51.         $("ul").append("<li>666</li>");
  52.     });
  53.  
  54.     //JS事件绑定：     js的标签对象.on事件=函数
  55.     //JQuery事件绑定： $().事件(函数)
  56.  
  57.     // 给 li 绑定点击事件(第一种绑定方式)，点击一次就执行相关操作
  58.     // 但是 button 增加的li点击不生效
  59.     $("ul li").click(function () {
  60.         console.log($(this).text());
  61.         alert(123);
  62.     });
  63.  
  64.     // 第二种绑定方式
  65.     // on方法实现事件绑定  (JQuery 3 里统一用on)
  66.     $("ul li").on("click",function () {
  67.         alert(456);
  68.     });
  69.  
  70.     // 事件委派 -> ul 把事件下发到子标签li
  71.     // 这样写会避免新添加的子标签无法响应事件的bug
  72.     $("ul").on("click","li",function () {
  73.         console.log($(this).text());  // 获取li标签里写好的值
  74.         alert(789);
  75.     })
  76.     // 要注意 on 前面是什么，以及on的参数
  77.  
  78. </script>
  79. </body>
  80. </html>
  81.  
  82. # 关于事件委派：
  83. $("").on(eve,[selector],[data],fn)
  84. 在选择元素上绑定一个或多个事件的事件处理函数。
  85.  
  86. # 事件切换
  87.  
  88. <!DOCTYPE html>
  89. <html lang="en">
  90. <head>
  91.     <meta charset="UTF-8">
  92.     <title>Title</title>
  93.     <style>
  94.         *{
  95.             margin: 0;
  96.             padding: 0;
  97.         }
  98.         .test{
  99.             width: 200px;
  100.             height: 200px;
  101.             background-color: wheat;
  102.         }
  103.     </style>
  104. </head>
  105. <body>
  106.  
  107. <div class="test"></div>
  108. </body>
  109. <script src="jquery-3.1.1.js"></script>
  110. <script>
  111.     // 第一种方式
  112.     function enter(){
  113.         console.log("enter")
  114.     }
  115.     function out(){
  116.         console.log("out")
  117.     }
  118.     $(".test").hover(enter,out)
  119.  
  120.     // 第二种方式
  121.     $(".test").mouseenter(function(){
  122.             console.log("enter")
  123.     });
  124.     $(".test").mouseleave(function(){
  125.         console.log("leave")
  126.     });
  127. </script>
  128. </html>

　　2.JQuery属性操作

  1. --------------------------CSS类
  2. $("").addClass(class|fn)
  3. $("").removeClass([class|fn])
  4.  
  5. --------------------------属性
  6. $("").attr();
  7. $("").removeAttr();
  8. $("").prop();
  9. $("").removeProp();
  10.  
  11. --------------------------HTML代码/文本/值
  12. $("").html([val|fn])
  13. $("").text([val|fn])
  14. $("").val([val|fn|arr])
  15.  
  16. ---------------------------
  17. $("#c1").css({"color":"red","fontSize":"35px"})

　　

  1. # attr 和 prop
  2.  
  3. <input id="chk1" type="checkbox" />是否可见
  4. <input id="chk2" type="checkbox" checked="checked" />是否可见
  5.  
  6. <script>
  7.  
  8. //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  9. //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
  10. //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
  11. //需要使用prop方法去操作才能获得正确的结果。
  12.  
  13. //    $("#chk1").attr("checked")
  14. //    undefined
  15. //    $("#chk1").prop("checked")
  16. //    false
  17.  
  18. //  ---------手动选中的时候attr()获得到没有意义的undefined-----------
  19. //    $("#chk1").attr("checked")
  20. //    undefined
  21. //    $("#chk1").prop("checked")
  22. //    true
  23.  
  24.     console.log($("#chk1").prop("checked"));//false
  25.     console.log($("#chk2").prop("checked"));//true
  26.     console.log($("#chk1").attr("checked"));//undefined
  27.     console.log($("#chk2").attr("checked"));//checked
  28. </script>

　　

  1. # 文本操作
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Title</title>
  8.     <script src="jquery-3.1.1.js"></script>
  9. </head>
  10. <body>
  11.  
  12. <div class="c1">
  13.     <p>DIV-PPP</p>
  14. </div>
  15.  
  16. <input type="text" id="inp" value="123">
  17.  
  18. <p class="p1" value="standby">PPP</p>
  19.  
  20. <script>
  21.     console.log($(".c1").html());   // <p>DIV-PPP</p>
  22.     console.log($(".c1").text());   // DIV-PPP
  23.  
  24.     $(".c1").html("<b>LIU</b>");    // LIU
  25.  
  26.     console.log($("#inp").val());   // 123
  27.     $("#inp").val(999);
  28.     console.log($("#inp").val());   // 999
  29.  
  30.     // p标签没有value属性，是自己加的属性，用val()是获取不到的；可以用attr
  31.     console.log($(".p1").val());
  32.  
  33.     // 设置CSS样式
  34.     $(".p1").css({"color":"red","fontSize":"35px"})
  35. </script>
  36.  
  37. </body>
  38. </html>

　　

  1. # JQuery重写 左侧菜单
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Title</title>
  8.     <script src="jquery-3.1.1.js"></script>
  9.     <style>
  10.         .item {
  11.             margin: 20px;/*上 下 左 右*/
  12.         }
  13.         .left_menu {
  14.             width: 20%;
  15.             height: 500px;
  16.             background-color: wheat;
  17.             float: left;
  18.         }
  19.         .title {
  20.             text-align: center;
  21.             background-color: #53e3a6;
  22.             line-height: 30px;
  23.             color: red;
  24.         }
  25.         .hidden {
  26.             display: none;
  27.         }
  28.         .content_menu {
  29.             width: 80%;
  30.             height: 500px;
  31.             background-color: green;
  32.             float: left;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div class="outer">
  38.         <div class="left_menu">
  39.             <div class="item">
  40.                 <div class="title">菜单一</div>
  41.                 <div class="con">
  42.                     <p>111</p>
  43.                     <p>112</p>
  44.                     <p>113</p>
  45.                 </div>
  46.             </div>
  47.             <div class="item">
  48.                 <div class="title">菜单二</div>
  49.                 <div class="con hidden">
  50.                     <p>211</p>
  51.                     <p>212</p>
  52.                     <p>213</p>
  53.                 </div>
  54.             </div>
  55.             <div class="item">
  56.                 <div class="title">菜单三</div>
  57.                 <div class="con hidden">
  58.                     <p>311</p>
  59.                     <p>312</p>
  60.                     <p>313</p>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.         <div class="content_menu"></div>
  65.     </div>
  66.  
  67. <script>
  68.     $(".title").click(function () {
  69. //        $(this).next().removeClass("hidden");
  70. //        $(this).parent().siblings().children(".con").addClass("hidden");
  71.  
  72.         // JQuery 支持链式操作，所以上面两句可以简写为下面一句：
  73.         $(this).next().removeClass("hidden").parent().siblings().children(".con").addClass("hidden");
  74.     })
  75. </script>
  76. </body>
  77. </html>

　　

  1. # JQuery 重写 表格全选、反选、取消
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Title</title>
  8.     <script src="jquery-3.1.1.js"></script>
  9. </head>
  10. <body>
  11.  
  12. <button>全选</button>
  13. <button>反选</button>
  14. <button>取消</button>
  15.  
  16. <table border="1">
  17.     <tr>
  18.         <th>   </th>
  19.         <th>姓名</th>
  20.         <th>年龄</th>
  21.         <th>性别</th>
  22.     </tr>
  23.     <tr>
  24.         <td><input type="checkbox"></td>
  25.         <td>111</td>
  26.         <td>111</td>
  27.         <td>111</td>
  28.     </tr>
  29.     <tr>
  30.         <td><input type="checkbox"></td>
  31.         <td>222</td>
  32.         <td>222</td>
  33.         <td>222</td>
  34.     </tr>
  35.     <tr>
  36.         <td><input type="checkbox"></td>
  37.         <td>333</td>
  38.         <td>333</td>
  39.         <td>333</td>
  40.     </tr>
  41. </table>
  42.  
  43. <script>
  44.     $("button").click(function () {
  45.         if ("全选" == $(this).text())
  46.         {
  47.             $("input").prop("checked",true);
  48.         }
  49.         else if ("取消" == $(this).text())
  50.         {
  51.             $("input").prop("checked",false);
  52.         }
  53.         else
  54.         {
  55.             $("input").each(function () {
  56.                 $(this).prop("checked",!$(this).prop("checked"));
  57.             })
  58.         }
  59.     })
  60. </script>
  61.  
  62. </body>
  63. </html>

　　

  1. # Jquery实现 tab切换
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Title</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .outer {
  14.             width: 60%;
  15.             height: 300px;
  16.             background-color: wheat;
  17.             margin: 100px auto;
  18.         }
  19.         .outer ul.title {
  20.             background: darkgrey;
  21.             padding: 10px;
  22.         }
  23.         .outer ul.title li {
  24.             display: inline-block;
  25.             list-style: none;
  26.             padding: 5px;
  27.         }
  28.         .hide {
  29.             display: none;
  30.         }
  31.         .outer .content {
  32.             padding: 20px;
  33.         }
  34.         .active {
  35.             background-color: red;
  36.             color: white;
  37.             border-top: 3px solid blue;
  38.         }
  39.     </style>
  40.     <script src="jquery-3.1.1.js"></script>
  41. </head>
  42. <body>
  43.     <div class="outer">
  44.         <ul class="title">
  45.             <li class="active" relation="c1">商品介绍</li>
  46.             <li relation="c2">商品规格</li>
  47.             <li relation="c3">售后保障</li>
  48.         </ul>
  49.         <div class="content">
  50.             <div class="item" id="c1">这里是商品介绍</div>
  51.             <div class="item hide" id="c2">这里是商品规格</div>
  52.             <div class="item hide" id="c3">售后服务在这里</div>
  53.         </div>
  54.     </div>
  55.  
  56.     <script src="jquery-3.1.1.js"></script>
  57.     <script>
  58.         $(".title li").click(function () {
  59.             // 更改 title 的背景色
  60.             $(this).addClass("active");
  61.             $(this).siblings().removeClass("active");
  62.  
  63.             // 更改title对应的content显示
  64.             // 通过在 li 标签里埋了一个自定义属性，对应到content里面id值
  65.             var $id_val = $(this).attr("relation");
  66.             var $sel = "#" + $id_val;    // 拼接字符串
  67.             $($sel).removeClass('hide');
  68.             $($sel).siblings().addClass('hide');
  69.         })
  70.     </script>
  71.  
  72. </body>
  73. </html>

　　3.JQuery each循环

  1. <!--循环方式1: $.each(obj,func(){})-->
  2. <script>
  3.     // JQuery遍历数组
  4.     var arr = [11,22,33,44];
  5.     $.each(arr,function (i,j) {
  6.         console.log(i); // 索引
  7.         console.log(j); // 值
  8. //        console.log(arr[i]);    // 值
  9.     });
  10.  
  11.     // JQuery遍历object
  12.     // 支持类似字典的数据类型，实际是object对象
  13.     var info = {"name":"egon","age":18,"gender":"male"};
  14.     $.each(info,function (i,j) {
  15.         console.log(i);
  16.         console.log(j);
  17.     })
  18.  
  19. </script>
  20.  
  21. <!--循环方式2: $("").each(func(){})-->
  22. <body>
  23.  
  24. <p class="item">P1</p>
  25. <p class="item">P2</p>
  26. <p class="item">P3</p>
  27. <p class="item">P4</p>
  28. <script>
  29.     // JQuery遍历标签
  30.     $(".item").each(function () {
  31.         if ($(this).text()=="P3")
  32.         {
  33.             console.log($(this).text());
  34.             console.log($(this).html());
  35.             $(this).css({"color":"red","font-size":"20px"})
  36.         }
  37.     })
  38. </script>
  39. </body>

　　

  1. # each循环扩展
  2.  
  3. # 示例1
  4. <script>
  5.     function f(){
  6.  
  7.         for(var i=0;i<4;i++){
  8.             if (i==2){
  9.                 return
  10.             }
  11.             console.log(i)
  12.         }
  13.     }
  14.     f(); // 输出 0 和 1
  15. </script>
  16.  
  17. # 示例2
  18. <script src="jquery-3.1.1.js"></script>
  19. <script>
  20.     li=[11,22,33,44];
  21.     $.each(li,function(i,v){
  22.         if (v==33){
  23. //            return ;      // 输出 11 22 44
  24. //            return true;  // 输出 11 22 44
  25.             return false    // 输出 11 22
  26.         }
  27.         console.log(v)
  28.     });
  29. </script>
  30.  
  31. function里的return只是结束了当前的函数,并不会影响后面函数的执行；
  32. 如果你想return后下面循环函数继续执行,那么就直接写return或return true
  33. 如果你不想return后下面循环函数继续执行,那么就直接写return false

　　4.文档节点处理

  1. //创建一个标签对象
  2.     $("<p>")
  3.  
  4. //内部插入
  5.  
  6.     $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
  7.     $("").appendTo(content)       ----->$("p").appendTo("div");
  8.     $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
  9.     $("").prependTo(content)      ----->$("p").prependTo("#foo");
  10.  
  11. //外部插入
  12.  
  13.     $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
  14.     $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
  15.     $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
  16.     $("").insertBefore(content)   ----->$("p").insertBefore("#foo");
  17.  
  18. //替换
  19.     $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
  20.  
  21. //删除
  22.  
  23.     $("").empty()
  24.     $("").remove([expr])
  25.  
  26. //复制
  27.  
  28.     $("").clone([Even[,deepEven]])

　　

  1. # 示例
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Title</title>
  8.     <style>
  9.         .outer {
  10.             width: 500px;
  11.             height: 300px;
  12.             background-color: wheat;
  13.             margin: 100px auto;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18. <div class="outer">
  19.     <h4>hello node</h4>
  20. </div>
  21.  
  22. <button class="add-node">ADD</button>
  23. <button class="del-node">DEL</button>
  24.  
  25. <div class="box">
  26.     <p class="p1">PPP</p>
  27. </div>
  28.  
  29. <div class="outerBox">
  30.     <div></div>
  31. </div>
  32.  
  33. <script src="../jquery-3.1.1.js"></script>
  34.  
  35. <script>
  36.     $(".add-node").click(function () {
  37.         var $ele_p = $("<p>");
  38.         $ele_p.text("--->ppp");
  39.         // 添加子标签
  40.         $(".outer").append($ele_p);
  41.         // 等价于下面这种写法:
  42. //        $ele_p.appendTo(".outer");
  43.  
  44. //        // 添加兄弟标签
  45. //        $(".outer").after($ele_p);
  46.         // 等价于下面这种写法:
  47. //        $ele_p.insertAfter(".outer");// 类似于appendTo()
  48. //
  49. //        // 清空标签
  50. //        $(".box").empty();
  51. //
  52. //        // 删除标签
  53. //        $(".box").remove();
  54. //
  55. //        // 复制标签
  56. //        var $p1_clone = $(".p1").clone();
  57. //        $(".box").append($p1_clone);
  58.  
  59.     })
  60. </script>
  61.  
  62. </body>
  63. </html>
  1. # 节点clone示例
  2.  
  3. <body>
  4. <div class="outer">
  5.     <div class="box">
  6.         <button class="add">+</button>
  7.         <input type="text" placeholder="请输入..." id="line">
  8.     </div>
  9. </div>
  10.  
  11. <script>
  12.     $(".add").click(function () {
  13. //        var $new_box = $(".box").clone();  // 错误
  14.         var $new_box = $(this).parent().clone();
  15. //        $new_box.children("button").attr("class","to_remove");
  16. //        $new_box.children("button").html("-");
  17.  
  18.         // 可以简写成下面这一句：
  19.         $new_box.children("button").html("-").attr("class","to_remove");
  20.  
  21.         $(".outer").append($new_box);
  22.     });
  23.     // 这样写是不生效的，需要改成事件委派的形式
  24. //    $(".to_remove").click(function () {
  25. //        var $ele_del = $(this).parent();
  26. //        console.log($ele_del);
  27. ////        $ele_del.remove();
  28. //    })
  29.  
  30.     // 事件委派 -> 解决新添加的标签事件绑定失败的问题
  31.     $(".outer").on("click",".to_remove",function () {
  32.         var $ele_del = $(this).parent();
  33.         console.log($ele_del);
  34.         $ele_del.remove();
  35.     })
  36. </script>
  37. </body>

　　5.动画效果

  1. # 显示和隐藏
  2.  
  3. <body>
  4. <p>hello egon</p>
  5. <button id="hide_btn">隐藏</button>
  6. <button id="show_btn">显示</button>
  7. <button id="toggle_btn">Toggle</button>
  8.  
  9. <script src="jquery-3.1.1.js"></script>
  10. <script>
  11.     $("#hide_btn").click(function () {
  12. //        $("p").hide();
  13. //        $("p").hide(1000);
  14.  
  15.         // 添加回调函数
  16.         $("p").hide(1000,function () {
  17.             alert(123);
  18.         });
  19.     });
  20.     $("#show_btn").click(function () {
  21. //        $("p").show();
  22.         $("p").show(1000);
  23.     });
  24.     $("#toggle_btn").click(function () {
  25. //        $("p").toggle();
  26.         $("p").toggle(1000);
  27.     });
  28. </script>
  29. </body>

　　

  1. # 滑动滑出
  2.  
  3. <body>
  4.  
  5. <img src="tsl.jpg" alt="" class="tsl">
  6. <button class="slide_out">滑出</button>
  7. <button class="slide_in">滑出</button>
  8. <button class="switch">切换</button>
  9.  
  10. <script src="jquery-3.1.1.js"></script>
  11. <script>
  12.     $(".slide_out").click(function () {
  13.         $(".tsl").slideDown(1000); // 1000 ms 完成
  14.     })
  15.     $(".slide_in").click(function () {
  16.         $(".tsl").slideUp(1000);
  17.     })
  18.     $(".switch").click(function () {
  19.         $(".tsl").slideToggle(1000);
  20.     })
  21. </script>
  22. </body>

　　

  1. # 淡入淡出
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Title</title>
  8.     <script src="jquery-3.1.1.js"></script>
  9.     <style>
  10.         .item {
  11.             width: 200px;
  12.             height: 200px;
  13.             background-color: blue;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.  
  19. <div class="item"></div>
  20. <button class="fade_in">淡入</button>
  21. <button class="fade_out">淡出</button>
  22. <button class="fade_switch">切换</button>
  23.  
  24. <script>
  25.     $(".fade_in").click(function () {
  26.         $(".item").fadeIn(3000);
  27.     });
  28.     $(".fade_out").click(function () {
  29.         $(".item").fadeOut(3000);
  30.     });
  31.     $(".fade_switch").click(function () {
  32.         $(".item").fadeToggle(3000);
  33.     });
  34. </script>
  35.  
  36. </body>
  37. </html>

　　

  1. # CSS位置操作
  2.  
  3. $("").offset([coordinates])
  4. $("").position()
  5. $("").scrollTop([val])
  6. $("").scrollLeft([val])
  7.  
  8. # CSS尺寸操作
  9.  
  10. $("").height([val|fn])
  11. $("").width([val|fn])
  12. $("").innerHeight()
  13. $("").innerWidth()
  14. $("").outerHeight([soptions])
  15. $("").outerWidth([options])

四、实用例子

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

五、练习

要求

  1. 用JQuery重写table表格增肌、修改、删除操作
  2. 并适当添加左侧菜单和tab切换等样式

代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7.  
  8. <style>
  9.     * {
  10.         margin: 0;
  11.         padding: 0;
  12.     }
  13.     .title {
  14.         text-align: center;
  15.         margin-top: 10px;
  16.         margin-bottom: 10px;
  17.     }
  18.     .header {
  19.         background-color: black;
  20.         height: 60px;
  21.         line-height: 60px;
  22.         overflow: hidden;
  23.         clear: both;
  24.     }
  25.     .nav-title {
  26.         border: 1px solid red;
  27.     }
  28.     .nav-title li{
  29.         display: inline-block;
  30.     }
  31.     .nav-title li a {
  32.         color: darkgray;
  33.         text-decoration: none;
  34.         display: block;
  35.         padding: 0 1.5em;
  36.         height: 60px;
  37.         font-family: '微软雅黑';
  38.         float: left;
  39.         font-size: 1.1em;
  40.         text-align: center;
  41.         transition-duration: 0.3s;
  42.         margin-left: 0;
  43.     }
  44.     .nav-title li a:hover {
  45.         color: white;
  46.         background-color: dimgrey;
  47.     }
  48.     .nav-title .active {
  49.             background-color: blue;
  50.             /*color: black;*/
  51.             border-top: 3px solid greenyellow;
  52.     }
  53.     .left-menu {
  54.         width: 12%;
  55.         height: 500px;
  56.         background-color: wheat;
  57.         float: left;
  58.     }
  59.     .left-menu .item .zone-name {
  60.         text-align: center;
  61.         background-color: #53e3a6;
  62.         line-height: 40px;
  63.         color: red;
  64.     }
  65.     .left-menu .item a {
  66.         text-decoration: none;
  67.     }
  68.     .left-menu .item a:hover {
  69.         text-decoration: underline;
  70.         font-size: 1.1em;
  71.     }
  72.     .left-menu .item .con {
  73.         text-align: center;
  74.     }
  75.     .left-menu .item .con p {
  76.         padding-top: 10px;
  77.     }
  78.     .detail {
  79.         width: 88%;
  80.         height: 500px;
  81.         background-color: white;
  82.         float: left;
  83.     }
  84.     .hidden {
  85.         display: none;
  86.     }
  87.     #table {
  88.         margin-top: 10px;
  89.         border: 1px solid blue;
  90.         margin-left: 300px;
  91.     }
  92.     .fade {
  93.         position: fixed;
  94.         top: 0; /*遮罩层占满屏*/
  95.         bottom: 0;
  96.         left: 0;
  97.         right: 0;
  98.         background-color: darkgrey;
  99.         opacity: 0.5;
  100.     }
  101.     .model {
  102.         width: 400px;
  103.         height: 200px;
  104.         background-color: white;
  105.         border-radius: 4%;
  106.         position: absolute;
  107.         top: 50%;
  108.         left: 50%;
  109.         margin-left: -200px; /* 让跳出框水平+垂直居中 */
  110.         margin-top: -100px;
  111.     }
  112.     .item-info {
  113.         margin-top: 20px;
  114.     }
  115.     .item-info label {
  116.         float: left;
  117.         width: 30%;
  118.         margin-left: 50px;
  119.     }
  120.     #add {
  121.         width: 100px;
  122.         height: 50px;
  123.         background-color: green;
  124.         border-radius: 10px;
  125.         font-size: 20px;
  126.         color: white;
  127.         margin-left: 500px;
  128.         margin-top: 30px;
  129.     }
  130.     .item-btn {
  131.         margin-top: 10px;
  132.         margin-left: 100px;
  133.     }
  134.     .item-btn #confirm,#cancel,#add_item{
  135.         background-color: darkblue;
  136.         border: none;
  137.         color: white;
  138.         text-align: center;
  139.         font-size: 20px;
  140.         border-radius: 4px;
  141.         margin-left: 30px;
  142.     }
  143. </style>
  144.  
  145. <body>
  146.  
  147. <div class="title">
  148.     <h1>ApacheTrafficServer</h1>
  149. </div>
  150.  
  151. <div class="header">
  152.  
  153.     <ul class="nav-title">
  154.         <li relation="index" class="active"><a href="#">LiveStat</a></li>
  155.         <li relation="bandwidth"><a href="#" >带宽统计</a></li>
  156.         <li relation="hit_ratio"><a href="#" >命中率统计</a></li>
  157.         <li relation="ret_code"><a href="#">响应码统计</a></li>
  158.         <li relation="connection"><a href="#">连接数统计</a></li>
  159.         <li relation="connection"><a href="#">回源链路检测</a></li>
  160.         <li relation="version"><a href="#">版本分布</a></li>
  161.         <li relation="server_status"><a href="#">服务器状态</a></li>
  162.     </ul>
  163.  
  164. </div>
  165.  
  166. <div class="content">
  167.  
  168.     <div class="item" id="index">
  169.         <div class="left-menu">
  170.             <div class="item">
  171.                 <div class="zone-name"><a href="#">北京电信</a></div>
  172.                 <div class="con">
  173.                     <a href="#"><p>beijing_ct</p></a>
  174.                     <a href="#"><p>beijing2_ct</p></a>
  175.                 </div>
  176.             </div>
  177.             <div class="item">
  178.                 <div class="zone-name"><a href="#">北京联通</a></div>
  179.                 <div class="con hidden">
  180.                     <a href="#"><p>beijing_cnc</p></a>
  181.                     <a href="#"><p>beijing2_cnc</p></a>
  182.                     <a href="#"><p>beijing3_cnc</p></a>
  183.                 </div>
  184.             </div>
  185.             <div class="item">
  186.                 <div class="zone-name"><a href="#">上海电信</a></div>
  187.                 <div class="con hidden">
  188.                     <a href="#"><p>shanghai_ct</p></a>
  189.                     <a href="#"><p>shanghai2_ct</p></a>
  190.                     <a href="#"><p>shanghai3_ct</p></a>
  191.                     <a href="#"><p>shanghai4_ct</p></a>
  192.                 </div>
  193.             </div>
  194.             <div class="item">
  195.                 <div class="zone-name"><a href="#">广州电信</a></div>
  196.                 <div class="con hidden">
  197.                     <a href="#"><p>guangzhou_ct</p></a>
  198.                     <a href="#"><p>guangzhou2_ct</p></a>
  199.                 </div>
  200.             </div>
  201.             <div class="item">
  202.                 <div class="zone-name"><a href="#">武汉联通</a></div>
  203.                 <div class="con hidden">
  204.                     <a href="#"><p>wuhan_cnc</p></a>
  205.                     <a href="#"><p>wuhan2_cnc</p></a>
  206.                     <a href="#"><p>wuhan3_cnc</p></a>
  207.                 </div>
  208.             </div>
  209.         </div>
  210.         <div class="detail"></div>
  211.     </div>
  212.     <div class="item hidden" id="bandwidth">
  213.         <div class="left-menu">
  214.             <div class="item">
  215.                 <div class="zone-name"><a href="#">北京大区</a></div>
  216.                 <div class="con">
  217.                     <a href="#"><p>联通</p></a>
  218.                     <a href="#"><p>电信</p></a>
  219.                     <a href="#"><p>移动</p></a>
  220.                     <a href="#"><p>长宽</p></a>
  221.                     <a href="#"><p>铁通</p></a>
  222.                     <a href="#"><p>广电</p></a>
  223.                     <a href="#"><p>其他</p></a>
  224.                 </div>
  225.             </div>
  226.             <div class="item">
  227.                 <div class="zone-name"><a href="#">上海大区</a></div>
  228.                 <div class="con hidden">
  229.                     <a href="#"><p>联通</p></a>
  230.                     <a href="#"><p>电信</p></a>
  231.                     <a href="#"><p>移动</p></a>
  232.                     <a href="#"><p>长宽</p></a>
  233.                     <a href="#"><p>铁通</p></a>
  234.                     <a href="#"><p>广电</p></a>
  235.                     <a href="#"><p>其他</p></a>
  236.                 </div>
  237.             </div>
  238.             <div class="item">
  239.                 <div class="zone-name"><a href="#">广州大区</a></div>
  240.                 <div class="con hidden">
  241.                     <a href="#"><p>联通</p></a>
  242.                     <a href="#"><p>电信</p></a>
  243.                     <a href="#"><p>移动</p></a>
  244.                     <a href="#"><p>长宽</p></a>
  245.                     <a href="#"><p>铁通</p></a>
  246.                     <a href="#"><p>广电</p></a>
  247.                     <a href="#"><p>其他</p></a>
  248.                 </div>
  249.             </div>
  250.         </div>
  251.         <div class="detail">
  252.             <div class="info">
  253.                 <button id="add">添加</button>
  254.                 <table border="1" id="table">
  255.                     <tr class="tr-header">
  256.                         <!--<th>   </th>-->
  257.                         <th>IP</th>
  258.                         <th>端口</th>
  259.                         <th>所属部门</th>
  260.                         <th>所属IDC</th>
  261.                         <th>在线状态</th>
  262.                         <th>服务</th>
  263.                         <th>操作</th>
  264.                     </tr>
  265.                     <tr class="tr-data">
  266.                         <!--<td><input type="checkbox"></td>-->
  267.                         <td class="ip">10.0.0.1</td>
  268.                         <td class="port">22</td>
  269.                         <td class="department">VCDN</td>
  270.                         <td class="vidc">beijing_cnc</td>
  271.                         <td class="status">在线</td>
  272.                         <td class="service">视频播放</td>
  273.                         <td>
  274.                             <button class="update">修改</button>
  275.                             <span>|</span>
  276.                             <button class="delete">删除</button>
  277.                         </td>
  278.                     </tr>
  279.                     <tr class="tr-data">
  280.                         <!--<td><input type="checkbox"></td>-->
  281.                         <td class="ip">10.0.0.2</td>
  282.                         <td class="port">33</td>
  283.                         <td class="department">Cloud-calculator</td>
  284.                         <td class="vidc">beijing_ct</td>
  285.                         <td class="status">在线</td>
  286.                         <td class="service">云计算</td>
  287.                         <td>
  288.                             <button class="update">修改</button>
  289.                             <span>|</span>
  290.                             <button class="delete">删除</button>
  291.                         </td>
  292.                     </tr>
  293.                     <tr class="tr-data">
  294.                         <!--<td><input type="checkbox"></td>-->
  295.                         <td class="ip">10.0.0.3</td>
  296.                         <td class="port">44</td>
  297.                         <td class="department">HCDN</td>
  298.                         <td class="vidc">shanghai_ct</td>
  299.                         <td class="status">在线</td>
  300.                         <td class="service">CDN+P2P</td>
  301.                         <td>
  302.                             <button class="update">修改</button>
  303.                             <span>|</span>
  304.                             <button class="delete">删除</button>
  305.                         </td>
  306.                     </tr>
  307.                 </table>
  308.  
  309.                 <div class="fade hidden">
  310.                 </div>
  311.                 <div class="model hidden">
  312.                     <div class="item-info">
  313.                         <label for="">IP:</label><input class="model_item item_ip" type="text"><br>
  314.                         <label for="">端口:</label><input class="model_item item_port" type="text"><br>
  315.                         <label for="">所属部门:</label><input class="model_item item_depart" type="text"><br>
  316.                         <label for="">所属IDC:</label><input class="model_item item_idc" type="text"><br>
  317.                         <label for="">在线状态:</label><input class="model_item item_online" type="text"><br>
  318.                         <label for="">服务:</label><input class="model_item item_service" type="text"><br>
  319.                     </div>
  320.                     <div class="item-btn">
  321.                         <input type="button" value="更新" id="confirm">
  322.                         <input type="button" value="取消" id="cancel">
  323.                     </div>
  324.                 </div>
  325.  
  326.             </div>
  327.         </div>
  328.     </div>
  329.     <div class="item hidden" id="hit_ratio">
  330.         <div class="left-menu">
  331.             <h1>hit_ratio</h1>
  332.         </div>
  333.         <div class="detail">
  334.             <h1>hit_ratio</h1>
  335.         </div>
  336.     </div>
  337.     <div class="item hidden" id="ret_code">
  338.         <div class="left-menu">
  339.             <h1>ret_code</h1>
  340.         </div>
  341.         <div class="detail">
  342.             <h1>ret_code</h1>
  343.         </div>
  344.     </div>
  345.     <div class="item hidden" id="connection">
  346.         <div class="left-menu">
  347.             <h1>connection</h1>
  348.         </div>
  349.         <div class="detail">
  350.             <h1>connection</h1>
  351.         </div>
  352.     </div>
  353.     <div class="item hidden" id="version">
  354.         <div class="left-menu">
  355.             <h1>version</h1>
  356.         </div>
  357.         <div class="detail">
  358.             <h1>version</h1>
  359.         </div>
  360.     </div>
  361.     <div class="item hidden" id="server_status">
  362.         <div class="left-menu">
  363.             <h1>server_status</h1>
  364.         </div>
  365.         <div class="detail">
  366.             <h1>server_status</h1>
  367.         </div>
  368.     </div>
  369.  
  370. </div>
  371.  
  372. <script src="jquery-3.2.1.min.js"></script>
  373. <script src="echarts-2.2.7/build/dist/echarts.js"></script>
  374. <script type="text/javascript">
  375.     // 路径配置
  376.     require.config({
  377.         paths: {
  378.             echarts: 'echarts-2.2.7/build/dist'
  379.         }
  380.     });
  381.     // 使用
  382.     require(
  383.         [
  384.             'echarts',
  385.             'echarts/chart/map' // 使用地图就加载map模块，按需加载
  386.         ],
  387.         function (ec) {
  388.             // 基于准备好的dom，初始化echarts图表
  389.             var myChart = ec.init(document.getElementById('index').lastElementChild);
  390.             var option = {
  391.                 title : {
  392.                     text: '全网卡顿情况',
  393.                     subtext: '纯属虚构',
  394.                     x:'center'
  395.                 },
  396.                 tooltip : {
  397.                     trigger: 'item'
  398.                 },
  399.                 legend: {
  400.                     orient: 'vertical',
  401.                     x:'left',
  402.                     data:['Great','Middle','Serious']
  403.                 },
  404.                 dataRange: {
  405.                     min: 0,
  406.                     max: 2500,
  407.                     x: 'left',
  408.                     y: 'bottom',
  409.                     text:['高','低'],           // 文本，默认为数值文本
  410.                     calculable : true
  411.                 },
  412.                 toolbox: {
  413.                     show: true,
  414.                     orient : 'vertical',
  415.                     x: 'right',
  416.                     y: 'center',
  417.                     feature : {
  418.                         mark : {show: true},
  419.                         dataView : {show: true, readOnly: false},
  420.                         restore : {show: true},
  421.                         saveAsImage : {show: true}
  422.                     }
  423.                 },
  424.                 roamController: {
  425.                     show: true,
  426.                     x: 'right',
  427.                     mapTypeControl: {
  428.                         'china': true
  429.                     }
  430.                 },
  431.                 series : [
  432.                     {
  433.                         name: 'Great',
  434.                         type: 'map',
  435.                         mapType: 'china',
  436.                         roam: false,
  437.                         itemStyle:{
  438.                             normal:{label:{show:true}},
  439.                             emphasis:{label:{show:true}}
  440.                         },
  441.                         data:[
  442.                             {name: '北京',value: Math.round(Math.random()*1000)},
  443.                             {name: '天津',value: Math.round(Math.random()*1000)},
  444.                             {name: '上海',value: Math.round(Math.random()*1000)},
  445.                             {name: '重庆',value: Math.round(Math.random()*1000)},
  446.                             {name: '河北',value: Math.round(Math.random()*1000)},
  447.                             {name: '河南',value: Math.round(Math.random()*1000)},
  448.                             {name: '云南',value: Math.round(Math.random()*1000)},
  449.                             {name: '辽宁',value: Math.round(Math.random()*1000)},
  450.                             {name: '黑龙江',value: Math.round(Math.random()*1000)},
  451.                             {name: '湖南',value: Math.round(Math.random()*1000)},
  452.                             {name: '安徽',value: Math.round(Math.random()*1000)},
  453.                             {name: '山东',value: Math.round(Math.random()*1000)},
  454.                             {name: '新疆',value: Math.round(Math.random()*1000)},
  455.                             {name: '江苏',value: Math.round(Math.random()*1000)},
  456.                             {name: '浙江',value: Math.round(Math.random()*1000)},
  457.                             {name: '江西',value: Math.round(Math.random()*1000)},
  458.                             {name: '湖北',value: Math.round(Math.random()*1000)},
  459.                             {name: '广西',value: Math.round(Math.random()*1000)},
  460.                             {name: '甘肃',value: Math.round(Math.random()*1000)},
  461.                             {name: '山西',value: Math.round(Math.random()*1000)},
  462.                             {name: '内蒙古',value: Math.round(Math.random()*1000)},
  463.                             {name: '陕西',value: Math.round(Math.random()*1000)},
  464.                             {name: '吉林',value: Math.round(Math.random()*1000)},
  465.                             {name: '福建',value: Math.round(Math.random()*1000)},
  466.                             {name: '贵州',value: Math.round(Math.random()*1000)},
  467.                             {name: '广东',value: Math.round(Math.random()*1000)},
  468.                             {name: '青海',value: Math.round(Math.random()*1000)},
  469.                             {name: '西藏',value: Math.round(Math.random()*1000)},
  470.                             {name: '四川',value: Math.round(Math.random()*1000)},
  471.                             {name: '宁夏',value: Math.round(Math.random()*1000)},
  472.                             {name: '海南',value: Math.round(Math.random()*1000)},
  473.                             {name: '台湾',value: Math.round(Math.random()*1000)},
  474.                             {name: '香港',value: Math.round(Math.random()*1000)},
  475.                             {name: '澳门',value: Math.round(Math.random()*1000)}
  476.                         ]
  477.                     },
  478.                     {
  479.                         name: 'Middle',
  480.                         type: 'map',
  481.                         mapType: 'china',
  482.                         itemStyle:{
  483.                             normal:{label:{show:true}},
  484.                             emphasis:{label:{show:true}}
  485.                         },
  486.                         data:[
  487.                             {name: '北京',value: Math.round(Math.random()*1000)},
  488.                             {name: '天津',value: Math.round(Math.random()*1000)},
  489.                             {name: '上海',value: Math.round(Math.random()*1000)},
  490.                             {name: '重庆',value: Math.round(Math.random()*1000)},
  491.                             {name: '河北',value: Math.round(Math.random()*1000)},
  492.                             {name: '安徽',value: Math.round(Math.random()*1000)},
  493.                             {name: '新疆',value: Math.round(Math.random()*1000)},
  494.                             {name: '浙江',value: Math.round(Math.random()*1000)},
  495.                             {name: '江西',value: Math.round(Math.random()*1000)},
  496.                             {name: '山西',value: Math.round(Math.random()*1000)},
  497.                             {name: '内蒙古',value: Math.round(Math.random()*1000)},
  498.                             {name: '吉林',value: Math.round(Math.random()*1000)},
  499.                             {name: '福建',value: Math.round(Math.random()*1000)},
  500.                             {name: '广东',value: Math.round(Math.random()*1000)},
  501.                             {name: '西藏',value: Math.round(Math.random()*1000)},
  502.                             {name: '四川',value: Math.round(Math.random()*1000)},
  503.                             {name: '宁夏',value: Math.round(Math.random()*1000)},
  504.                             {name: '香港',value: Math.round(Math.random()*1000)},
  505.                             {name: '澳门',value: Math.round(Math.random()*1000)}
  506.                         ]
  507.                     },
  508.                     {
  509.                         name: 'Serious',
  510.                         type: 'map',
  511.                         mapType: 'china',
  512.                         itemStyle:{
  513.                             normal:{label:{show:true}},
  514.                             emphasis:{label:{show:true}}
  515.                         },
  516.                         data:[
  517.                             {name: '北京',value: Math.round(Math.random()*1000)},
  518.                             {name: '天津',value: Math.round(Math.random()*1000)},
  519.                             {name: '上海',value: Math.round(Math.random()*1000)},
  520.                             {name: '广东',value: Math.round(Math.random()*1000)},
  521.                             {name: '台湾',value: Math.round(Math.random()*1000)},
  522.                             {name: '香港',value: Math.round(Math.random()*1000)},
  523.                             {name: '澳门',value: Math.round(Math.random()*1000)}
  524.                         ]
  525.                     }
  526.                 ]
  527.             };
  528.             myChart.setOption(option);
  529.         }
  530.     );
  531. </script>
  532. <script>
  533.  
  534.     // 左侧菜单栏点击事件
  535.     $(".zone-name").click(function () {
  536.         $(this).next().removeClass("hidden");
  537.         $(this).parent().siblings().children(".con").addClass("hidden");
  538.     });
  539.     // 点击左侧菜单的子标签事件
  540.     $(".con a p").click(function () {
  541.         alert($(this).text());
  542.     });
  543.     // tab切换
  544.     $(".nav-title li").click(function () {
  545.         // 更改 title 的背景色
  546.         $(this).addClass("active");
  547.         $(this).siblings().removeClass("active");
  548.  
  549.         // 更改title对应的content显示
  550.         // 通过在 li 标签里埋了一个自定义属性，对应到content里面id值
  551.         var $id_val = $(this).attr("relation");
  552.         var $sel = "#" + $id_val;    // 拼接字符串
  553.         $($sel).removeClass('hidden');
  554.         $($sel).siblings().addClass('hidden');
  555.     });
  556.     // 删除数据
  557.     $(".delete").click(function () {
  558.         $(this).parent().parent().remove();
  559.     });
  560.     // 取消
  561.     $("#cancel").click(function () {
  562.         $(this).parent().parent().addClass("hidden");
  563.         $(this).parent().parent().prev().addClass("hidden");
  564.     });
  565.     function empty_run() {
  566.         // 清空model里面的数据
  567.         $(".model_item").each(function(i,ele){
  568.             $(this).val("")
  569.         })
  570.     }
  571.     // 判断是否有空值
  572.     function is_Empty() {
  573.         var flag = 0;
  574.         $(".model_item").each(function (i) {
  575.             if($(this).val()){
  576.                 flag++;
  577.             }
  578.         });
  579.         if (6 == flag){
  580.             return true;
  581.         }
  582.         else {
  583.             return false;
  584.         }
  585.     }
  586.     // 修改数据
  587.     $(".update").click(function () {
  588.         var confirm_option = $(this).parent().parent();
  589.         remove_hidden();
  590.         confirm_run(confirm_option);
  591.     });
  592.     // 添加一条数据
  593.     $("#add").click(function () {
  594.         empty_run();
  595.         $("#confirm").prop("value","添加");
  596.         $("#confirm").val("添加");
  597.         remove_hidden();
  598.         confirm_run();
  599.         $("#confirm").prop("value","更新");
  600.         $("#confirm").val("更新");
  601.     });
  602.     function confirm_run(option_obj) {
  603.         if($("#confirm").val() == "更新"){
  604.             // 获取当前数据并显示到修改框里
  605.             $(".model_item").each(function (k) {
  606.                 $(this).val(option_obj.children().eq(k).text());
  607.             });
  608.             console.log(123);
  609.             // 这一步解绑定非常重要，不然会导致连续操作时候发生点击一次，执行多次的bug
  610.             $("#confirm").off("click");
  611.             $("#confirm").click(function () {
  612. //                alert(999);
  613.                 if(option_obj){
  614. //                    alert("ERR");
  615.                     $(".model_item").each(function (k) {
  616.                         option_obj.children().eq(k).text($(this).val());
  617.                     });
  618.                     add_hidden();
  619.                 }
  620.             });
  621.         }
  622.         else if ($("#confirm").val() == "添加"){
  623.             console.log('11111');
  624.             // clone
  625.             var $new_item = $(".tr-data:first").clone();
  626.             // 这一步解绑定非常重要，不然会导致连续操作时候发生点击一次，执行多次的bug
  627.             $("#confirm").off("click");
  628.             $("#confirm").click(function () {
  629.                 if (is_Empty()){
  630.                     if ($new_item){
  631. //                        alert('添加');
  632.                         //获取填写标签对应的四个value
  633.                         $(".model_item").each(function(i){
  634.                             $new_item.find("td").eq(i).text($(this).val())
  635.                         });
  636.                         // 追加
  637.                         $("#table").append($new_item);
  638.                         add_hidden();
  639.                         // 事件委派 -> 解决新添加的标签事件绑定失败的问题
  640.                         $("#table").on("click", ".delete", function () {
  641.                             $(this).parent().parent().remove();
  642.                         });
  643.                         // 事件委派 -> 解决新添加的标签事件绑定失败的问题
  644.                         $("#table").on("click", ".update", function () {
  645.                             $(".update").click(function () {
  646.                                 var confirm_option = $(this).parent().parent();
  647.                                 remove_hidden();
  648.                                 confirm_run(confirm_option);
  649.                             });
  650.                         })
  651.                     }
  652.                 }
  653.                 else {
  654.                     alert("不能存在空值！！！");
  655.                     add_hidden();
  656.                 }
  657.             });
  658.         }
  659.         else {
  660.             alert($("#confirm").val())
  661.         }
  662.     }
  663.     function remove_hidden() {
  664.         // 显示遮罩层
  665.         $(".fade").removeClass("hidden");
  666.         // 显示修改框
  667.         $(".model").removeClass("hidden");
  668.     }
  669.     function add_hidden() {
  670.         // 显示遮罩层
  671.         $(".fade").addClass("hidden");
  672.         // 显示修改框
  673.         $(".model").addClass("hidden");
  674.     }
  675.  
  676. </script>
  677.  
  678. </body>
  679. </html>

　　

前端基础之JQuery - day15的更多相关文章

  1. 前端基础之:JQuery(可编辑版)

     前端基础之jquery   一 jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   ...

  2. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  3. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

  4. Python学习（二十三）—— 前端基础之jQuery

    转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...

  5. 前端基础 之 jQuery

    浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容 一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...

  6. 四丶前端基础之jquery

    知识预览 一 jQuery是什么? 二 什么是jQuery对象? 三 寻找元素(选择器和筛选器) 四 操作元素(属性,css,文档处理) 扩展方法 (插件机制) 回到顶部 一 jQuery是什么? ［ ...

  7. 前端基础之jQuery

    JavaScript和jQuery的区别 JavaScript是一门编程语言,我们用它来编写客户端浏览器脚本 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化java ...

  8. 前端基础（jQuery）

    jquery: JS Bootstrap jquery: write less do more jquery对象: Jquery.方法 ======= $.方法 jquery的基础语法:$(selec ...

  9. 前端基础之jQuery（Day55）

    阅读目录 一 jQuery是什么? 二 什么是jQuery对象? 三 寻找元素(选择器和筛选器) 四 操作元素(属性,css,文档处理) 扩展方法 (插件机制) 一. jQuery是什么? ［1］   ...

随机推荐

  1. Shell 流程控制－if 语句

    单分支if条件语句 if [ 条件判断式 ] ; then程序fi 例子:判断分区使用率 #!/bin/bash # Author: huangrui (Email:mycheryhr@gmail.c ...

  2. jsp model1

    一.model1(纯jsp技术): 1.dao:data access object,数据访问对象,即专门对数据库进行操作的类,一般说dao不含业务逻辑. 2.当进行跳转时候,需要用servlet来实 ...

  3. 通过jpa getResultList 获取查询到的内容

    String sql = "select * from spatial_event "; Query query = em.createNativeQuery(sql); // q ...

  4. 以太坊、Hyperledger Fabric和Corda，哪个更好？

    原创: Philipp Sandner 区块链前哨 昨天 编译|盖磊编辑|前哨小兵甲区块链前哨导语: 我们分析了 Hyperledger Fabric,R3 Corda 和以太坊这三种分布式账本技术间 ...

  5. [luogu4860][Roy&October之取石子II]

    题目链接 思路 这个题和上个题类似,仔细推一下就知道这个题是判断是否是4的倍数 代码 #include<cstdio> #include<iostream> #define f ...

  6. Django 异步化库celery和定时任务

    首先要了解Django其实是个同步框架,那么多个用户发送请求时就会发生排队的情况上一个用户的请求完成后在进行下一个,这样会对影响用户体验,所有就要用到异步方法来解决. 首先我们要安装celery库 p ...

  7. Linux 系统设置sh文件开机自启动

    工作中有一个linux下的服务需要启动,但是机器总是断电,导致需要反复启动,找了一下开机自启动的方法,解决了这个问题.Linux设置开机自启动非常简单,只要找到rc.local文件,将你需要自启动的文 ...

  8. PMP项目管理的49个过程，一张图让你全部了解

    项目管理的49个过程,看表格显得比较单调,印象也不是很深,所以今天小编就给大家发一张图片,可以用一张图就能生动又详细的了解PMP项目管理的49个过程.   大家看完是不是觉得一目了然了呢,图片上传后不 ...

  9. Git学习笔记——搭建远程仓库

    有空再把笔记移上来 注意点:git remote add origin不是相对于所有git仓库,只相对于当前git仓库 心得:远程建立裸仓库,意味着我不应该直接操作远程仓库.如果我是管理员,我应该先p ...

  10. appium desktop 1.7 byName不能用,重写

    @Override public WebElement findElementByName(String name){ String string="new UiSelector().tex ...