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

一、查找元素

1、常用选择器

1.1 基本选择器

  1. $("*")
  2. $("#id")
  3. $(".class")
  4. $("element")
  5. $(".class,p,div")

1.2层级选择器

  1. $(".outer div")    // 所有的后代
  2. $(".outer>div")    // 所有的子代
  3. $(".outer+div")    // 匹配所有跟在.outer后面的div
  4. $(".outer~div")    // .outer后面的所有div

1.3 基本筛选器

  1. $("li:first")   // 所有li标签中第一个标签
  2. $("li:last")    // 所有li标签中最后一个标签
  3. $("li:even")    // 所有li标签中偶数标签
  4. $("li:odd")     // 所有li标签中奇数标签
  5. $("li:eq(2)")   // 所有li标签中，索引是2的那个标签
  6. $("li:gt(1)")   // 所有li标签中，索引大于1的标签

1.4 属性选择器

  1. $('[id="div1"]')
  2. $('[alex="sb"]')
  3. $("input[type='text']") 可以缩写:text

2、常用筛选器

2.1  过滤筛选器

  1. $("li").eq(2)    // 和:eq是一样的
  2. $("li").first()    // 和:first是一样的
  3. $("li").last()    // 和:last是一样的
  4. $("ul li").hasclass("test")   // 检测li中的是否含有某个特定的类名，有的话返回true

2.2  查找筛选器

  1. $("div").children()    // div中的子标签,只找儿子辈  $("div").children(".div").css("color","red")
  2. $("div").find()          // div中的子标签,后代都找  $("form").find(:text,:password)   // form标签中找到:text,:password标签
  3.  
  4. $("div").next()        // div标签下一个标签
  5. $("div").nextAll()       // div标签下一个同级所有标签
  6. $("div").nextUntil()    // div标签下一个同级区间内所有标签
  7.  
  8. $("div").prev()           // div标签上一个标签
  9. $("div").prevAll()       // div标签上一个同级所有标签
  10. $("div").prevUntil()    // div标签上一个同级区间内所有标签
  11.  
  12. $("div").parent()           // div标签的父标签
  13. $("div").parents()          // div标签的爷爷标签集合
  14. $("div").parentsUntil()   // div标签的爷爷标签区间内
  15.  
  16. $("input").siblings()   // input的同辈标签

二、操作元素

1、属性操作

  1. $(":text").val()                  // text输入的内容
  2. $(".test").attr("name")       // test类中name属性对应的值
  3. $(".test").attr("name","sb")  //  设置test类中name属性对应的值
  4. $(".test").attr("checked","checked")  // 设置test类中checked属性对应的值为checked
  5. $(":checkbox").removeAttr("checked")  // 删除checkbox标签中的checked属性
  6. $(".test").prop("checked",true)   // 设置checked为true
  7. $(".test").addClass("hide")    // 增加样式

2、CSS操作

  1. (样式)   css("{color:'red',backgroud:'blue'}")
  2. (位置)   offset()    position()  scrollTop()  scrollLeft()
  3.  (尺寸)  innerHeight()不包含边框， outerHeight()包含边框， 两个都包含padding height()不包含边框

3、文档处理

  1. 内部插入  $("#c1").append("<b>hello</b>")
  2.          $("p").appendTo("div")
  3.          prepend()
  4.          prependTo()
  5.  
  6. 外部插入   before()
  7.          insertBefore()
  8.          after()
  9.          insertAfter()
  10.  
  11. 标签内容处理
  12.          remove()
  13.          empty()
  14.          clone()

4、事件

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

更过多参考　

三、jquery所有示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>左侧菜单</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .menu{
  11.             width:200px;
  12.             height:600px;
  13.             border:1px solid #dddddd;
  14.             overflow: auto;
  15.         }
  16.         .menu .item .title {
  17.             height:40px;
  18.             line-height:40px;
  19.             background-color: #2459a2;
  20.             color:white;
  21.             cursor: pointer;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="menu">
  27.         <div class="item">
  28.             <div class="title" onclick="ShowMenu(this)">菜单一</div>
  29.             <div class="body hide">
  30.                 <p>内容一</p>
  31.                 <p>内容一</p>
  32.                 <p>内容一</p>
  33.                 <p>内容一</p>
  34.                 <p>内容一</p>
  35.                 <p>内容一</p>
  36.             </div>
  37.         </div>
  38.         <div class="item">
  39.             <div class="title" onclick="ShowMenu(this)">菜单二</div>
  40.             <div class="body hide">
  41.                 <p>内容二</p>
  42.                 <p>内容二</p>
  43.                 <p>内容二</p>
  44.                 <p>内容二</p>
  45.                 <p>内容二</p>
  46.                 <p>内容二</p>
  47.                 <p>内容二</p>
  48.                 <p>内容二</p>
  49.                 <p>内容二</p>
  50.             </div>
  51.         </div>
  52.         <div class="item">
  53.             <div class="title" onclick="ShowMenu(this)">菜单三</div>
  54.             <div class="body hide">
  55.                 <p>内容三</p>
  56.                 <p>内容三</p>
  57.                 <p>内容三</p>
  58.                 <p>内容三</p>
  59.                 <p>内容三</p>
  60.                 <p>内容三</p>
  61.                 <p>内容三</p>
  62.                 <p>内容三</p>
  63.             </div>
  64.         </div>
  65.     </div>
  66.  
  67.     <script src="jquery-1.12.4.js"></script>
  68.     <script>
  69.         function ShowMenu(ths) {
  70.             // console.log(ths); //Dom中的标签对象
  71.             //$(ths)             // Dom标签对象转换成jQuery标签对象(便利)
  72.             //$(ths)[0]          // jQuery标签对象转成Dom标签对象
  73.  
  74.             $(ths).next().removeClass('hide');
  75.             $(ths).parent().siblings().find('.body').addClass('hide');
  76.         }
  77.     </script>
  78.  
  79. </body>
  80. </html>

左侧菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>checkbox全选取消反选</title>
  6. </head>
  7. <body>
  8.     <input type="button" value="全选" onclick="CheckAll()"/>
  9.     <input type="button" value="取消" onclick="CancleAll()"/>
  10.     <input type="button" value="反选" onclick="ReverseAll()"/>
  11.  
  12.     <table border="1">
  13.         <thead>
  14.             <tr>
  15.                 <th>序号</th>
  16.                 <th>IP</th>
  17.                 <th>Port</th>
  18.             </tr>
  19.         </thead>
  20.         <tbody id="tb">
  21.             <tr>
  22.                 <td><input type="checkbox"/></td>
  23.                 <td>1.1.1.1</td>
  24.                 <td>22</td>
  25.             </tr>
  26.             <tr>
  27.                 <td><input type="checkbox"/></td>
  28.                 <td>1.1.1.2</td>
  29.                 <td>22</td>
  30.             </tr>
  31.             <tr>
  32.                 <td><input type="checkbox"/></td>
  33.                 <td>1.1.1.3</td>
  34.                 <td>22</td>
  35.             </tr>
  36.         </tbody>
  37.     </table>
  38.  
  39.     <script src="jquery-1.12.4.js"></script>
  40.     <script>
  41.         function CheckAll() {
  42.             $('#tb input[type="checkbox"]').prop('checked',true);
  43.         }
  44.         function CancleAll() {
  45.             $('#tb input[type="checkbox"]').prop('checked',false);
  46.         }
  47.         function ReverseAll() {
  48.              $('#tb input[type="checkbox"]').each(function () {
  49.                  if($(this).prop('checked')){
  50.                     $(this).prop('checked',false);
  51.                  }else{
  52.                     $(this).prop('checked',true);
  53.                  }
  54.              });
  55.         }
  56.     </script>
  57.  
  58. </body>
  59. </html>

checkbox全选取消反选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery clone</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <p>
  10.             <a onclick="Add(this)">+</a>
  11.             <input type="text"/>
  12.         </p>
  13.     </div>
  14.  
  15.     <script src="jquery-1.12.4.js"></script>
  16.     <script>
  17.         function Add(ths) {
  18.             var p = $(ths).parent().clone();
  19.  
  20.             p.find('a').text('-');
  21.             p.find('a').attr('onclick','Remove(this)');
  22.  
  23.             $(ths).parent().parent().append(p);
  24.         }
  25.  
  26.         function Remove(ths) {
  27.             $(ths).parent().remove();
  28.         }
  29.     </script>
  30. </body>
  31. </html>

jquery clone

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>左侧菜单</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .menu{
  11.             width:200px;
  12.             height:600px;
  13.             border:1px solid #dddddd;
  14.             overflow: auto;
  15.         }
  16.         .menu .item .title {
  17.             height:40px;
  18.             line-height:40px;
  19.             background-color: #2459a2;
  20.             color:white;
  21.             cursor: pointer;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="menu">
  27.         <div class="item">
  28.             <div class="title">菜单一</div>
  29.             <div class="body hide">
  30.                 <p>内容一</p>
  31.                 <p>内容一</p>
  32.                 <p>内容一</p>
  33.                 <p>内容一</p>
  34.                 <p>内容一</p>
  35.                 <p>内容一</p>
  36.             </div>
  37.         </div>
  38.         <div class="item">
  39.             <div class="title">菜单二</div>
  40.             <div class="body hide">
  41.                 <p>内容二</p>
  42.                 <p>内容二</p>
  43.                 <p>内容二</p>
  44.                 <p>内容二</p>
  45.                 <p>内容二</p>
  46.                 <p>内容二</p>
  47.                 <p>内容二</p>
  48.                 <p>内容二</p>
  49.                 <p>内容二</p>
  50.             </div>
  51.         </div>
  52.         <div class="item">
  53.             <div class="title">菜单三</div>
  54.             <div class="body hide">
  55.                 <p>内容三</p>
  56.                 <p>内容三</p>
  57.                 <p>内容三</p>
  58.                 <p>内容三</p>
  59.                 <p>内容三</p>
  60.                 <p>内容三</p>
  61.                 <p>内容三</p>
  62.                 <p>内容三</p>
  63.             </div>
  64.         </div>
  65.     </div>
  66.  
  67.     <script src="jquery-1.12.4.js"></script>
  68.     <script>
  69.         $('.item .title').click(function () {
  70.             $(this).next().removeClass('hide');
  71.             $(this).parent().siblings().find('.body').addClass('hide');
  72.         });
  73.     </script>
  74.  
  75. </body>
  76. </html>

左侧菜单(jquery)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>延迟绑定事件</title>
  6.     <style>
  7.         ul li{
  8.             cursor: pointer;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <input type="button" value="点我" onclick="Add();"/>
  14.     <ul>
  15.         <li>123</li>
  16.         <li>456</li>
  17.         <li>789</li>
  18.         <li>123</li>
  19.     </ul>
  20.  
  21.     <script src="jquery-1.12.4.js"></script>
  22.     <script>
  23.         $(function () {
  24. //            $('li').click(function () {
  25. //                alert($(this).text());
  26. //            });
  27.             $('ul').delegate('li','click',function () {
  28.                 alert($(this).text());
  29.             });
  30.         })
  31.  
  32.         function Add() {
  33.             var tag = document.createElement('li');
  34.             tag.innerText = '666';
  35.             $('ul').append(tag);
  36.         }
  37.     </script>
  38.  
  39. </body>
  40. </html>

延迟绑定事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>form表单验证</title>
  6.     <style>
  7.         .item{
  8.             width:250px;
  9.             height:60px;
  10.             position: relative;
  11.         }
  12.         .item input{
  13.             width: 200px;
  14.         }
  15.         .item span{
  16.             position: absolute;
  17.             top:22px;
  18.             left:0;
  19.             font-size:10px;
  20.             background-color: indianred;
  21.             color: white;
  22.             display: inline-block;
  23.             width:200px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div>
  29.         <form>
  30.             <div class="item">
  31.                 <input class="c1" type="text" name="username" label="用户名"/>
  32.             </div>
  33.             <div class="item">
  34.                 <input class="c1" type="password" name="pwd" label="密码"/>
  35.             </div>
  36.             <!--<input type="submit" value="提交" onclick="return CheckValid();"/>-->
  37.             <input type="submit" value="提交"/>
  38.         </form>
  39.     </div>
  40.  
  41.     <script src="jquery-1.12.4.js"></script>
  42.     <script>
  43. //        第一种方式：DOM方式绑定
  44. //        function CheckValid() {
  45. //             找到form标签下的所有需要验证的标签
  46. //             $('form .c1')
  47. //             $('form input[type="text"],input[type="password"])
  48. //             循环所有需要验证的标签，获取内容
  49. //            $('form .item span').remove();
  50. //            var flag = true;
  51. //
  52. //            $('form .c1').each(function () {
  53. //                // 每一个元素执行匿名函数
  54. //                // this
  55. //                console.log(this,$(this)[0]);
  56. //                var val = $(this).val();
  57. //                if(val.length == 0){
  58. //                    var laber = $(this).attr('label');
  59. //                    var tag = document.createElement('span');
  60. //                    tag.innerText = laber + "不能为空";
  61. //                    $(this).after(tag);
  62. //                    flag = false;
  63. //                }
  64. //            });
  65. //            return flag;
  66. //        }
  67.  
  68. //        第二种：JQuery绑定(一般使用这种)
  69.         $(function () {
  70.             BindCheckValid();
  71.         });
  72.  
  73.         function BindCheckValid() {
  74.             $('form :submit').click(function () {
  75.                 var flag = true;
  76.                 $('form .item span').remove();
  77.                 $('form .c1').each(function () {
  78.                     // 每一个元素执行匿名函数
  79.                     // this
  80.                     console.log(this,$(this));
  81.                     var val = $(this).val();
  82.                     if(val.length == 0){
  83.                         var laber = $(this).attr('label');
  84.                         var tag = document.createElement('span');
  85.                         tag.innerText = laber + "不能为空";
  86.                         $(this).after(tag);
  87.                         flag = false;
  88.                         return false;
  89.                     }
  90.                 });
  91.                 return flag;
  92.             });
  93.         }
  94.  
  95.     </script>
  96. </body>
  97. </html>

form表单验证(dom|jquery)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery 循环</title>
  6. </head>
  7. <body>
  8.  
  9.     <script src="jquery-1.12.4.js"></script>
  10.     <script>
  11.         function BindCheckValid(){
  12.             $.each([11,22,33,44],function (k, v) {
  13.                 if(y == 22){
  14.                     // return; //相当于continue
  15.                     // return false; //相当于break
  16.                     return false;
  17.                 }
  18.                 console.log(v);
  19.             })
  20.         }
  21.     </script>
  22. </body>
  23. </html>

jquery 循环

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .container{
  12.             background-color: cornflowerblue;
  13.             width: 100%;
  14.         }
  15.         .content{
  16.             background-color: aqua;
  17.             min-height: 1000px;
  18.             width: 800px;
  19.             margin: 0 auto;
  20.         }
  21.         .retTop{
  22.             width: 35px;
  23.             height: 35px;
  24.             position: fixed;
  25.             right: 0;
  26.             bottom: 0;
  27.             background-color: chartreuse;
  28.         }
  29.         .hide{
  30.             display: none;
  31.         }
  32.     </style>
  33.     <script src="jquery-1.12.4.js"></script>
  34.  
  35. </head>
  36. <body>
  37.     <div class="container">
  38.         <div class="content"></div>
  39.         <div class="retTop">
  40.             返回顶部
  41.         </div>
  42.     </div>
  43.  
  44.     <script>
  45.  
  46.         $(function () {
  47.             window.onscroll = function () {
  48.                 var scrollHeight = $(window).scrollTop();
  49.                 if(scrollHeight<100){
  50.                     $(".retTop").addClass('hide');
  51.                 }else {
  52.                     $(".retTop").removeClass('hide')
  53.                 }
  54.             };
  55.  
  56.             $(".retTop").click(function () {
  57.                 $(window).scrollTop(0);
  58.             })
  59.         })
  60.     </script>
  61. </body>
  62. </html>

返回顶部

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.12.4.js"></script>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             border: 0;
  11.         }
  12.         .header{
  13.             width: 100%;
  14.             height: 50px;
  15.             background-color: black;
  16.         }
  17.         .container{
  18.             width: 960px;
  19.             margin: 0 auto;
  20.             /*position: relative;*/
  21.         }
  22.         .leftmenu{
  23.             width: 250px;
  24.             min-height: 400px;
  25.             background-color: chartreuse;
  26.             position: absolute;             // 想下为什么不能用relative
  27.             left: 200px;
  28.             top: 50px;
  29.         }
  30.         .content{
  31.             width: 600px;
  32.             min-height: 900px;
  33.             background-color: cornflowerblue;
  34.             position: absolute;
  35.             left: 382px;
  36.             top:50px;
  37.         }
  38.         ul{
  39.             list-style: none;
  40.         }
  41.         .content div{
  42.             height: 800px;
  43.             border: 1px solid black;
  44.         }
  45.         .fixed{
  46.             position: fixed;
  47.             top:0;
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <div class="header"></div>
  53.     <div class="container">
  54.         <div class="leftmenu">
  55.             <ul>
  56.                 <li id="item1">第一章</li>
  57.                 <li id="item2">第二章</li>
  58.                 <li id="item3">第三章</li>
  59.             </ul>
  60.         </div>
  61.         <div class="content">
  62.             <div class="item1">111</div>
  63.             <div class="item2">222</div>
  64.             <div class="item3" style="height: 100px">333</div>
  65.         </div>
  66.     </div>
  67.  
  68.     <script>
  69.         $(function () {
  70.             window.onscroll = function () {
  71.                 var scrollHeight = $(window).scrollTop();
  72.  
  73.                 if(scrollHeight>50){
  74.                     $(".leftmenu").addClass('fixed');
  75.                 }else {
  76.                     $(".leftmenu").removeClass('fixed');
  77.                 }
  78.  
  79.                 $('.content').children().each(function () {
  80.                     if(scrollHeight>$(this).offset().top){
  81.                         var iditem = $(this).attr("class");
  82.                         console.log($(this));
  83.                         $("#"+iditem).css("fontSize","40px").siblings().css("fontSize","12px");
  84.                     }
  85.                     console.log(scrollHeight,$(this).offset().top,$(this).outerHeight(),$(window).height());
  86.                 });
  87.  
  88.                 if(scrollHeight+$(window).height() ==$(".content div:last-child").offset().top +$(".content div:last-child").outerHeight()){
  89.                         $("ul li:last-child").css("fontSize","40px").siblings().css("fontSize","12px");
  90.                     }
  91.             };
  92.  
  93.         })
  94.     </script>
  95. </body>
  96. </html>

滚动菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul{
  12.             list-style: none;
  13.         }
  14.         .outer{
  15.             position: relative;
  16.             width: 310px;
  17.             height: 310px;
  18.             margin: 20px auto;
  19.         }
  20.         .image{
  21.             position: relative;
  22.         }
  23.         .image img{
  24.             height: 310px;
  25.             width: 310px;
  26.             position: absolute;
  27.             border: dashed blue 1px;
  28.             top: 0;
  29.             left: 0;
  30.         }
  31.         .num{
  32.             position: absolute;
  33.             bottom:0;
  34.             left:100px;
  35.         }
  36.         .num li{
  37.             display: inline-block;
  38.             height: 20px;
  39.             width: 20px;
  40.             /*background-color: #3c763d;*/
  41.             border-radius: 50%;
  42.             text-align: center;
  43.             line-height: 20px;
  44.             cursor: pointer;
  45.  
  46.         }
  47.  
  48.         .position{
  49.             width: 310px;
  50.             position: absolute;
  51.             top:50%;
  52.             margin-top: -15px;
  53.             left: 0;
  54.         }
  55.  
  56.         .position button{
  57.             display: block;
  58.             width: 30px;
  59.             height: 30px;
  60.             background-color:burlywood ;
  61.             opacity: 0.6;
  62.             border: 0;
  63.  
  64.             display: none;
  65.         }
  66.  
  67.         .outer:hover .position button{
  68.             display: block;
  69.         }
  70.         .left{
  71.             float: left;
  72.         }
  73.         .right{
  74.             float: right;
  75.         }
  76.         .active{
  77.             background-color: black;
  78.         }
  79.     </style>
  80.  
  81.     <script src="jquery-1.12.4.js"></script>
  82.     <script>
  83.         $(function () {
  84.             $(".num li").first().addClass("active");
  85.             console.log( $(".num li"));
  86.             $(".num li").mouseover(function () {
  87.                 console.log(this);
  88.                 $(this).addClass("active").siblings().removeClass("active");
  89.                 var index = $(this).index();
  90.                 i = index;
  91.                 $(".image img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
  92.             });
  93.  
  94.             var i = 0;
  95.             function autoMove() {
  96.                 $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  97.                 $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  98.                 i++;
  99.                 if(i==5){
  100.                     i = 0;
  101.                 }
  102.             }
  103.  
  104.             var t1 = setInterval(autoMove,1000);
  105.  
  106.             $(".outer").hover(function () {
  107.                 clearInterval(t1);
  108.             },function () {
  109.                 t1 = setInterval(autoMove,1000);
  110.             });
  111.  
  112.             $(".right").click(function () {
  113.                 autoMove();
  114.             });
  115.  
  116.             $(".left").click(function () {
  117.                 i--;
  118.                 if(i==-1){
  119.                     i = 4;
  120.                 }
  121.                 $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  122.                 $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  123.             })
  124.         })
  125.     </script>
  126. </head>
  127. <body>
  128.     <div class="outer">
  129.         <div class="image">
  130.             <img src="pic/a.png">
  131.             <img src="pic/1.jpeg">
  132.             <img src="pic/2.jpeg">
  133.             <img src="pic/3.jpeg">
  134.             <img src="pic/4.jpeg">
  135.         </div>
  136.         <div class="num">
  137.             <ul>
  138.                 <li>1</li>
  139.                 <li>2</li>
  140.                 <li>3</li>
  141.                 <li>4</li>
  142.                 <li>5</li>
  143.             </ul>
  144.         </div>
  145.         <div class="position">
  146.             <button class="left"> < </button>
  147.             <button class="right"> > </button>
  148.         </div>
  149.     </div>
  150. </body>
  151. </html>

轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul{
  12.             list-style: none;
  13.         }
  14.         .outer{
  15.             position: relative;
  16.             width: 310px;
  17.             height: 310px;
  18.             margin: 20px auto;
  19.         }
  20.         .image{
  21.             position: relative;
  22.         }
  23.         .image img{
  24.             height: 310px;
  25.             width: 310px;
  26.             position: absolute;
  27.             border: dashed blue 1px;
  28.             top: 0;
  29.             left: 0;
  30.         }
  31.         .num{
  32.             position: absolute;
  33.             bottom:0;
  34.             left:100px;
  35.         }
  36.         .num li{
  37.             display: inline-block;
  38.             height: 20px;
  39.             width: 20px;
  40.             /*background-color: #3c763d;*/
  41.             border-radius: 50%;
  42.             text-align: center;
  43.             line-height: 20px;
  44.             cursor: pointer;
  45.  
  46.         }
  47.  
  48.         .position{
  49.             width: 310px;
  50.             position: absolute;
  51.             top:50%;
  52.             margin-top: -15px;
  53.             left: 0;
  54.         }
  55.  
  56.         .position button{
  57.             display: block;
  58.             width: 30px;
  59.             height: 30px;
  60.             background-color:burlywood ;
  61.             opacity: 0.6;
  62.             border: 0;
  63.  
  64.             display: none;
  65.         }
  66.  
  67.         .outer:hover .position button{
  68.             display: block;
  69.         }
  70.         .left{
  71.             float: left;
  72.         }
  73.         .right{
  74.             float: right;
  75.         }
  76.         .active{
  77.             background-color: black;
  78.         }
  79.     </style>
  80.  
  81.     <script src="jquery-1.12.4.js"></script>
  82.     <script>
  83.         $(function () {
  84.             $(".num li").first().addClass("active");
  85.             console.log( $(".num li"));
  86.             $(".num li").mouseover(function () {
  87.                 console.log(this);
  88.                 $(this).addClass("active").siblings().removeClass("active");
  89.                 var index = $(this).index();
  90.                 i = index;
  91.                 $(".image img").eq(index).fadeIn(1000).siblings().fadeOut(1000);
  92.             });
  93.  
  94.             var i = 0;
  95.             function autoMove() {
  96.                 $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  97.                 $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  98.                 i++;
  99.                 if(i==5){
  100.                     i = 0;
  101.                 }
  102.             }
  103.  
  104.             var t1 = setInterval(autoMove,1000);
  105.  
  106.             $(".outer").hover(function () {
  107.                 clearInterval(t1);
  108.             },function () {
  109.                 t1 = setInterval(autoMove,1000);
  110.             });
  111.  
  112.             $(".right").click(function () {
  113.                 autoMove();
  114.             });
  115.  
  116.             $(".left").click(function () {
  117.                 i--;
  118.                 if(i==-1){
  119.                     i = 4;
  120.                 }
  121.                 $(".num li").eq(i).addClass("active").siblings().removeClass("active");
  122.                 $(".image img").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
  123.             })
  124.         })
  125.     </script>
  126. </head>
  127. <body>
  128.     <div class="outer">
  129.         <div class="image">
  130.             <img src="pic/a.png">
  131.             <img src="pic/1.jpeg">
  132.             <img src="pic/2.jpeg">
  133.             <img src="pic/3.jpeg">
  134.             <img src="pic/4.jpeg">
  135.         </div>
  136.         <div class="num">
  137.             <ul>
  138.                 <li>1</li>
  139.                 <li>2</li>
  140.                 <li>3</li>
  141.                 <li>4</li>
  142.                 <li>5</li>
  143.             </ul>
  144.         </div>
  145.         <div class="position">
  146.             <button class="left"> < </button>
  147.             <button class="right"> > </button>
  148.         </div>
  149.     </div>
  150. </body>
  151. </html>

模态对话框

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

商城三层菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.12.4.js"></script>
  7.     <style>
  8.         table {
  9.             margin-top: 40px;
  10.         }
  11.  
  12.         table, td {
  13.             border: 1px solid black;
  14.         }
  15.  
  16.         a {
  17.             display: inline-block;
  18.             background-color: #bce8f1;
  19.             width: 100px;
  20.             height: 21px;
  21.             text-decoration: none;
  22.             cursor: pointer;
  23.         }
  24.  
  25.         .red {
  26.             background-color: red;
  27.         }
  28.  
  29.     </style>
  30. </head>
  31. <body>
  32. <button id="checkAll">全选</button>
  33. <button id="checkReverse">反选</button>
  34. <button id="checkCancle">取消</button>
  35. <a id="edit_mode">进入编辑模式</a>
  36.  
  37. <table >
  38.     <thead>
  39.         <tr>
  40.             <th>选择</th>
  41.             <th>主机名</th>
  42.             <th>端口</th>
  43.             <th>状态</th>
  44.         </tr>
  45.     </thead>
  46.     <tbody id="tb">
  47.         <tr>
  48.             <td><input type="checkbox"></td>
  49.             <td edit="true">v1</td>
  50.  
  51.             <td>88</td>
  52.             <td edit="true" edit_type="select" sel-val="1" global-key="STATUS">在线</td>
  53.         </tr>
  54.  
  55.         <tr>
  56.             <td><input type="checkbox"></td>
  57.             <td edit="true">v1</td>
  58.  
  59.             <td>88</td>
  60.             <td edit="true" edit_type="select" sel-val="2" global-key="STATUS">下线</td>
  61.         </tr>
  62.  
  63.         <tr>
  64.             <td><input type="checkbox"></td>
  65.             <td edit="true">v1</td>
  66.  
  67.             <td>88</td>
  68.             <td edit="true" edit_type="select" sel-val="1" global-key="STATUS">在线</td>
  69.         </tr>
  70.     </tbody>
  71. </table>
  72. <script>
  73.     $(function () {
  74.         main('#edit_mode','#tb');
  75.     });
  76.  
  77.     STATUS = [
  78.         {'id': 1, 'value': "在线"},
  79.         {'id': 2, 'value': "下线"}
  80.     ];
  81.  
  82.     window.globalCtrlKeyPress = false;
  83.  
  84.     function main(edit,tb) {
  85.         bindSingleCheck(edit,tb);
  86.         bindEditMode(edit,tb);
  87.         bindCheckAll(edit,tb);
  88.         bindCheckCancle(edit,tb);
  89.         bindCheckReverse(edit,tb);
  90.     }
  91.  
  92.     function bindSingleCheck(edit,tb) {
  93.         $(tb).find(":checkbox").click(function () {
  94.             var $tr = $(this).parent().parent();
  95.             if($(edit).hasClass('editing')){
  96.                 if($(this).prop('checked')){
  97.                     RowIntoEdit($tr);
  98.                 }else {
  99.                     RowOutEdit($tr);
  100.                 }
  101.             }
  102.         })
  103.     }
  104.  
  105.     function bindEditMode(edit,tb) {
  106.         $(edit).click(function () {
  107.             if($(this).hasClass('editing')){
  108.                 $(this).removeClass('editing red');
  109.                 $(tb).children().each(function () {
  110.                     var check_box = $(this).children().find(":checkbox");
  111.                     if(check_box.prop('checked')){
  112.                         RowOutEdit($(this));
  113.                     }else {
  114.  
  115.                     }
  116.                 });
  117.             }else {
  118.                 $(this).addClass('editing red');
  119.                 $(tb).children().each(function () {
  120.                     var check_box = $(this).children().find(":checkbox");
  121.                     if(check_box.prop('checked')){
  122.                         RowIntoEdit($(this));
  123.                     }else {
  124.  
  125.                     }
  126.                 })
  127.             }
  128.         });
  129.     }
  130.  
  131.     function bindCheckAll(edit,tb) {
  132.         $("#checkAll").click(function () {
  133.             if($(edit).hasClass("editing")){
  134.                 $(tb).children().each(function () {
  135.                     var check_box = $(this).children().find(":checkbox");
  136.                     if(check_box.prop('checked')){
  137.  
  138.                     }else {
  139.                         check_box.prop('checked',true);
  140.                         RowIntoEdit($(this));
  141.                     }
  142.                 })
  143.             }else {
  144.                 $(tb).find(':checkbox').prop('checked', true);
  145.             }
  146.         });
  147.     }
  148.  
  149.     function bindCheckReverse(edit,tb) {
  150.         $("#checkReverse").click(function () {
  151.             if($(edit).hasClass("editing")){
  152.                 $(tb).children().each(function () {
  153.                     var check_box = $(this).children().find(":checkbox");
  154.                     if(check_box.prop('checked')){
  155.                         check_box.prop('checked',false);
  156.                         RowOutEdit($(this));
  157.                     }else {
  158.                         check_box.prop('checked',true);
  159.                         RowIntoEdit($(this));
  160.                     }
  161.                 })
  162.             }else {
  163.                 $(tb).children().each(function(){
  164.                     var check_box = $(this).children().find(':checkbox');
  165.                     if(check_box.prop('checked')){
  166.                         check_box.prop('checked',false);
  167.                     }else{
  168.                         check_box.prop('checked',true);
  169.                     }
  170.                 });
  171.             }
  172.         });
  173.     }
  174.  
  175.     function bindCheckCancle(edit,tb) {
  176.         $("#checkCancle").click(function () {
  177.             if($(edit).hasClass("editing")){
  178.                 $(tb).children().each(function () {
  179.                     var check_box = $(this).children().find(":checkbox");
  180.                     if(check_box.prop('checked')){
  181.                         check_box.prop('checked',false);
  182.                         RowOutEdit($(this));
  183.                     }else {
  184.  
  185.                     }
  186.                 })
  187.             }else {
  188.                 $(tb).find(':checkbox').prop('checked',false);
  189.             }
  190.         });
  191.     }
  192.  
  193.     function RowIntoEdit($tr) {
  194.         $tr.children().each(function () {
  195.             if($(this).attr('edit') == 'true'){
  196.                 if($(this).attr('edit_type') == "select"){
  197.                     var select_val = $(this).attr('sel-val');
  198.                     var global_key = $(this).attr('global-key');
  199.                     var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);
  200.                     $(this).html(selelct_tag);
  201.                 }else {
  202.                     var orgin_value = $(this).text();
  203.                     var temp = "<input value='"+ orgin_value+"' />";
  204.                     $(this).html(temp);
  205.                 }
  206.             }
  207.         })
  208.     }
  209.  
  210.     function RowOutEdit($tr) {
  211.         $tr.children().each(function () {
  212.             if($(this).attr('edit')=='true'){
  213.                 if($(this).attr('edit_type') == "select"){
  214.                     var new_val = $(this).children(':first').val();
  215.                     var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();
  216.                     $(this).attr('sel-val', new_val).text(new_text);
  217.                 }else {
  218.                     var orgin_value = $(this).children().first().val();
  219.                     $(this).text(orgin_value);
  220.                 }
  221.             }
  222.         })
  223.     }
  224.  
  225.     function CreateSelect(attrs, csss, option_dict, item_key, item_value, current_val) {
  226.         var sel = document.createElement('select');
  227.  
  228.         //设置属性
  229.         $.each(attrs,function (k,v) {
  230.             $(sel).attr(k,v);
  231.         });
  232.  
  233.         //设置样式 这里为空，以后可以设置
  234.         $.each(csss,function (k,v) {
  235.             $(sel).css(k,v);
  236.         });
  237.  
  238.         $.each(option_dict,function (k,v) {
  239.             var opt = document.createElement('option');
  240.             var sel_text = v[item_value];
  241.             var sel_value = v[item_key];
  242.  
  243.             if(current_val == sel_value){
  244.                 $(opt).text(sel_text).attr('value',sel_value).attr('selected','true').appendTo($(sel));
  245.             }else {
  246.                 $(opt).text(sel_text).attr('value',sel_value).appendTo($(sel));
  247.             }
  248.         });
  249.         return sel;
  250.     }
  251.  
  252.     window.onkeydown = function (e) {
  253.         if(e && e.keyCode == 17){
  254.             window.globalCtrlKeyPress = true;
  255.         }
  256.     };
  257.  
  258.     window.onkeyup = function (e) {
  259.         if(e && e.keyCode == 17){
  260.             window.globalCtrlKeyPress = false;
  261.         }
  262.     };
  263.  
  264.     function MultiSelect(ths) {
  265.         if(window.globalCtrlKeyPress == true){
  266.             var index = $(ths).parent().index();
  267.             var value = $(ths).val();
  268.             console.log(value,index);
  269.             $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
  270.                 $(this).parent().parent().children().eq(index).children().val(value);
  271.             });
  272.         }
  273.     }
  274.  
  275. </script>
  276. </body>
  277. </html>

编辑框(需要重点掌握)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .container{
  12.             position: relative;
  13.         }
  14.         .small-box{
  15.             border: 5px solid red;
  16.             height: 350px;
  17.             width: 350px;
  18.             position: relative;
  19.         }
  20.         .big-box{
  21.             position: absolute;
  22.             width: 400px;
  23.             height: 400px;
  24.             left:360px;
  25.             top:0;
  26.             border: 5px solid black;
  27.             overflow: hidden;
  28.         }
  29.         .hide{
  30.             display: none;
  31.         }
  32.         .small-box .float{
  33.             width: 175px;
  34.             height: 175px;
  35.             background-color: grey;
  36.             position: absolute;
  37.             opacity: 0.8;
  38.         }
  39.         .big-box img{
  40.             position: absolute;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="container">
  46.         <div class="small-box">
  47.             <div class="float hide"></div>
  48.             <img src="pic/small.jpg">
  49.         </div>
  50.  
  51.         <div class="big-box hide">
  52.             <img src="pic/big.jpg">
  53.         </div>
  54.     </div>
  55.  
  56. <script src="jquery-1.12.4.js"></script>
  57. <script>
  58.     $(function () {
  59.         $(".small-box").mouseover(function () {
  60.             $(this).children('.float').removeClass('hide').parent().next().removeClass('hide');
  61.         });
  62.  
  63.         $(".small-box").mouseout(function () {
  64.             $(this).children('.float').addClass('hide').parent().next().addClass('hide');
  65.         });
  66.  
  67.         $(".float").mousemove( function (e) {
  68.             var _event = e || window.event;
  69.  
  70.             var small_box_width = $(".small-box").width();
  71.             var small_box_height = $(".small-box").height();
  72.  
  73.             var float_height = $('.float').height();
  74.             var float_width = $(".float").width();
  75.  
  76.             var float_height_half = float_height/2;
  77.             var float_width_half = float_width/2;
  78.  
  79.             var float_right = _event.clientX- float_width_half;
  80.             var float_top = _event.clientY - float_height_half;
  81.  
  82.             if(float_right<0){
  83.                 float_right = 0;
  84.             }else if(float_right>small_box_width-float_width){
  85.                 float_right=small_box_width-float_width
  86.             }
  87.             if(float_top<0){
  88.                 float_top=0;
  89.             }else if(float_top>small_box_height-float_height){
  90.                 float_top=small_box_height-float_height
  91.             }
  92.  
  93.             $(".float").css({"left":float_right+"px","top":float_top+"px"});
  94.  
  95.             var percentX=($(".big-box img").width()-$(".big-box").width())/ (small_box_width-float_width);
  96.             var percentY=($(".big-box img").height()-$(".big-box").height())/(small_box_height-float_height);
  97.  
  98.             $(".big-box img").css({"left":-percentX*float_right+"px","top":-percentY*float_top+"px"});
  99.         })
  100.  
  101.     })
  102. </script>
  103. </body>
  104. </html>

放大镜

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div style="border: 1px solid #ddd;width: 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.  
  17.     <script src="jquery-1.12.4.js"></script>
  18.     <script>
  19.         $("#title").mouseover(function () {
  20.             $(this).css('cursor','move');
  21.         }).mousedown(function (e) {
  22.             var _event = e||window.event;
  23.             var old_x = _event.clientX;
  24.             var old_y = _event.clientY;
  25.  
  26.             var parent_left = $(this).parent().offset().left;
  27.             var parent_top = $(this).parent().offset().top;
  28.  
  29.             $(this).mousemove(function (e) {
  30.                 var _new_event = e || window.event;
  31.                 var new_x = _new_event.clientX;
  32.                 var new_y = _new_event.clientY;
  33.  
  34.                 var x = new_x - old_x + parent_left;
  35.                 var y = new_y - old_y + parent_top;
  36.  
  37.                 $(this).parent().css({"left":x+"px","top":y+"px"})
  38.             }).mouseup(function () {
  39.                 $(this).unbind('mousemove');
  40.             })
  41.         })
  42.     </script>
  43. </body>
  44. </html>

拖动面板

四、jquery扩展

extend以及fn.extend

实例：

  1. /**
  2.  * Created by alex on 2016/8/28.
  3.  */
  4. (function(jq){
  5.  
  6.     function ErrorMessage(inp,message){
  7.         var tag = document.createElement('span');
  8.         tag.innerText = message;
  9.         inp.after(tag);
  10.     }
  11.  
  12.     jq.extend({
  13.         valid:function(form){
  14.             // #form1 $('#form1')
  15.             jq(form).find(':submit').click(function(){
  16.  
  17.                 jq(form).find('.item span').remove();
  18.  
  19.                 var flag = true;
  20.                 jq(form).find(':text,:password').each(function(){
  21.  
  22.                     var require = $(this).attr('require');
  23.                     if(require){
  24.                         var val = $(this).val();
  25.  
  26.                         if(val.length<=0){
  27.                             var label = $(this).attr('label');
  28.                             ErrorMessage($(this),label + "不能为空");
  29.                             flag = false;
  30.                             return false;
  31.                         }
  32.  
  33.                         var minLen = $(this).attr('min-len');
  34.                         if(minLen){
  35.                             var minLenInt = parseInt(minLen);
  36.                             if(val.length<minLenInt){
  37.                                 var label = $(this).attr('label');
  38.                                 ErrorMessage($(this),label + "长度最小为"+ minLen);
  39.                                 flag = false;
  40.                                 return false;
  41.                             }
  42.                             //json.stringify()
  43.                             //JSON.parse()
  44.                         }
  45.  
  46.                         var phone = $(this).attr('phone');
  47.                         if(phone){
  48.                             // 用户输入内容是否是手机格式
  49.                             var phoneReg = /^1[3|5|8]\d{9}$/;
  50.                             if(!phoneReg.test(val)){
  51.                                 var label = $(this).attr('label');
  52.                                 ErrorMessage($(this),label + "格式错误");
  53.                                 flag = false;
  54.                                 return false;
  55.                             }
  56.                         }
  57.  
  58.                         // 1、html自定义标签属性
  59.                         // 增加验证规则+错误提示
  60.  
  61.                     }
  62.                     // 每一个元素执行次匿名函数
  63.                     // this
  64.                     //console.log(this,$(this));
  65.                     /*
  66.                     var val = $(this).val();
  67.                     if(val.length<=0){
  68.                         var label = $(this).attr('label');
  69.                         var tag = document.createElement('span');
  70.                         tag.innerText = label + "不能为空";
  71.                         $(this).after(tag);
  72.                         flag = false;
  73.                         return false;
  74.                     }
  75.                     */
  76.                 });
  77.  
  78.                 return flag;
  79.             });
  80.         }
  81.     });
  82. })(jQuery);

将自己写的js封装到jquery中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery扩展 form验证</title>
  6.     <style>
  7.         .item{
  8.             width: 250px;
  9.             height: 60px;
  10.             position: relative;
  11.         }
  12.         .item input{
  13.             width: 200px;
  14.         }
  15.         .item span{
  16.             position: absolute;
  17.             top: 20px;
  18.             left: 0px;
  19.             font-size: 8px;
  20.             background-color: indianred;
  21.             color: white;
  22.             display: inline-block;
  23.             width: 200px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.  
  29.     <div>
  30.         <form id="form1">
  31.             <div class="item">
  32.                 <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/>
  33.             </div>
  34.             <div class="item">
  35.                 <input  class="c1" type="password" name="pwd" label="密码" require="true"/>
  36.             </div>
  37.             <div class="item">
  38.                 <input  class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>
  39.             </div>
  40.             <input type="submit" value="提交" />
  41.         </form>
  42.  
  43.     </div>
  44.  
  45.     <script src="jquery-1.12.4.js"></script>
  46.     <script src="commons.js"></script>
  47.     <script>
  48.         $(function(){
  49.             $.valid('#form1');
  50.         });
  51.  
  52.     </script>
  53. </body>
  54. </html>

jquery扩展 form验证

五、jquery回调函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-1.12.4.js"></script>
  7.     <script>
  8.  
  9.         $(document).ready(function () {
  10.             $("button").click(function () {
  11.                 $("p").hide(1000,call_back());
  12.  
  13.             })
  14.         });
  15.         function call_back() {
  16.             alert('sss')
  17.         }
  18.     </script>
  19. </head>
  20. <body>
  21. <button>隐藏</button>
  22. <p>hello</p>
  23.  
  24. </body>
  25. </html>

回调函数

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

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

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

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

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

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

AngularJs：https://angular.cn/

Python自动化运维之24、JQuery的更多相关文章

  1. 【目录】Python自动化运维

    目录:Python自动化运维笔记 Python自动化运维 - day2 - 数据类型 Python自动化运维 - day3 - 函数part1 Python自动化运维 - day4 - 函数Part2 ...

  2. python自动化运维篇

    1-1 Python运维-课程简介及基础 1-2 Python运维-自动化运维脚本编写 2-1 Python自动化运维-Ansible教程-Ansible介绍 2-2 Python自动化运维-Ansi ...

  3. Day1 老男孩python自动化运维课程学习笔记

    2017年1月7日老男孩python自动化运维课程正式开课 第一天学习内容: 上午 1.python语言的基本介绍 python语言是一门解释型的语言,与1989年的圣诞节期间,吉多·范罗苏姆为了在阿 ...

  4. python自动化运维学习第一天--day1

    学习python自动化运维第一天自己总结的作业 所使用到知识:json模块,用于数据转化sys.exit 用于中断循环退出程序字符串格式化.format字典.文件打开读写with open(file, ...

  5. Python自动化运维的职业发展道路（暂定）

    Python职业发展之路 Python自动化运维工程 Python基础 Linux Shell Fabric Ansible Playbook Zabbix Saltstack Puppet Dock ...

  6. Python自动化运维：技术与最佳实践 PDF高清完整版|网盘下载内附地址提取码|

    内容简介: <Python自动化运维:技术与最佳实践>一书在中国运维领域将有“划时代”的重要意义:一方面,这是国内第一本从纵.深和实践角度探讨Python在运维领域应用的著作:一方面本书的 ...

  7. Python自动化运维 技术与最佳实践PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书

    点击获取提取码:7bl4 一.内容简介 <python自动化运维:技术与最佳实践>一书在中国运维领域将有"划时代"的重要意义:一方面,这是国内第一本从纵.深和实践角度探 ...

  8. python自动化运维之CMDB篇-大米哥

    python自动化运维之CMDB篇 视频地址:复制这段内容后打开百度网盘手机App,操作更方便哦 链接:https://pan.baidu.com/s/1Oj_sglTi2P1CMjfMkYKwCQ  ...

  9. python自动化运维之路~DAY5

    python自动化运维之路~DAY5 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模块的分类 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数 ...

随机推荐

  1. 爬虫技术浅析 | WooYun知识库

    爬虫技术浅析 | WooYun知识库 爬虫技术浅析 好房通ERP | 房产中介软件最高水准领导者 undefined

  2. 深入分析Java的序列化与反序列化

    序列化是一种对象持久化的手段.普遍应用在网络传输.RMI等场景中.本文通过分析ArrayList的序列化来介绍Java序列化的相关内容.主要涉及到以下几个问题: 怎么实现Java的序列化 为什么实现了 ...

  3. html,shtml和htm的区别

    SHTML和HTML的区别,如果用一句话来解释就是:SHTML 不是HTML而是一种服务器 API,shtml是服务器动态产成的html. 虽然两者都是超文本格式,但shtml是一种用于SSI技术的文 ...

  4. ifndef系列

    文件中的#ifndef 头件的中的#ifndef,这是一个很关键的东西.比如你有两个C文件,这两个C文件都include了同一个头文件.而编译时,这两个C文件要一同编译成一个可运行文件,于是问题来了, ...

  5. 深入N皇后问题的两个最高效算法的详解 分类： C/C++ 2014-11-08 17:22 117人阅读 评论(0) 收藏

    N皇后问题是一个经典的问题,在一个N*N的棋盘上放置N个皇后,每行一个并使其不能互相攻击(同一行.同一列.同一斜线上的皇后都会自动攻击). 一. 求解N皇后问题是算法中回溯法应用的一个经典案例 回溯算 ...

  6. 深入分析 Java I/O 的工作机制--转载

    Java 的 I/O 类库的基本架构 I/O 问题是任何编程语言都无法回避的问题,可以说 I/O 问题是整个人机交互的核心问题,因为 I/O 是机器获取和交换信息的主要渠道.在当今这个数据大爆炸时代, ...

  7. [转] Bound Service的三种方式（Binder、 Messenger、 AIDL）

    首先要明白需要的情景,然后对三种方式进行选择: (一)可以接收Service的信息(获取Service中的方法),但不可以给Service发送信息 (二) 使用Messenger既可以接受Servic ...

  8. WWDC-UIKit 中协议与值类型编程实战

    本文为 WWDC 2016 Session 419 的部分内容笔记.强烈推荐观看. 设计师来需求了 在我们的 App 中,通常需要自定义一些视图.例如下图: 我们可能会在很多地方用到右边为内容,左边有 ...

  9. linux系统下安装wget。

    我们先安装linux系统比如centos7.1里面有的就没有wget下载工具.wget这个命令就不可以使用. 我们使用 yum -y install wget yum install perl 会出现 ...

  10. Linux squid 安装配置

    linux 代理软件 squid 查看是否安装squid   以上信息表明,本机是已经安装了此软件了 如果没有显示说明没有安装,则可以使用yum工具来安装   安装完软件后我们接着开始配置squid代 ...