zoukankan      html  css  js  c++  java
  • 04 . 前端之JQuery

    JQuery简介

    # 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
    # 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,
    # 能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
    什么是JQuery?
    # JQuery是一个JavaScript函数库
    # JQuery是一个轻量级的"写的少,做的多"的JavaScript库.可以通过一行简单的标记被添加到网页中.

    # JQuery库包含以下功能:

    # 1. HTML元素选取
    # 2. HTML元素操作
    # 3. CSS操作
    # 4. HTML事件函数
    # 5. JavaScript特效和动画
    # 6. HTML DOM遍历和修改
    # 7. AJAX(不刷新页面同时修改页面内容)
    # 8. Utilities

    # 除此之外,JQuery还提供了大量的插件
    为什么使用JQuery?
    # 目前网络上有大量开源的JS框架,但是JQuery是目前最流行的JS框架,而且提供了大量的扩展.
    # 很多大公司都在使用JQuery,例如:
    # Google,Microsoft,IBM,Netflix

    # JQuery是否适用于所有浏览器
    # jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器,包括Internet Explorer 6!
    JQuery版本

    1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)

     

    2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)

     

    3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

     

    维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持*

    JQuery对象

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

     

    $(“#i1”).html()的意思是:获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 相当于: document.getElementById(“i1”).innerHTML;

     

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

     

    一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:

    var $variable = jQuery对像
    var variable = DOM对象
    $variable[0]//jQuery对象转成DOM对象

    拿上面那个例子举例,jQuery对象和DOM对象的使用:

    $("#i1").html();//jQuery对象可以使用jQuery的方法
    $("#i1")[0].innerHTML;// DOM对象使用DOM的方法

    Example DOM和JQuery对象的转换

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
    </head>
       <link rel="stylesheet" href="csswenjian"/>
       <style>

       </style>
    <body>
       <div id="i1">123</div>

       <script src="jquery-1.12.4.js"></script>
       <script>
           $("#i1")
       </script>
    </body>
    </html>
    # 打开浏览器访问这个html的console
    document.getElementById('i1')
    <div id="i1">•123</div>

    $('#i1')          
    jQuery.fn.init [div#i1, context: document, selector: "#i1"]

    $('#i1')[0]
    <div id="i1">•123</div>

    # JQuery对象[0] => DOM对象
    # Dom对象   => $(Dom对象)
    JQuery安装

    可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:

     

    jquery.com 下载 jQuery 库

     

    从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

    HTML标签引用JQuery
    有两个版本的 jQuery 可供下载:

    * Production version - 用于实际的网站中,已被精简和压缩。
    * Development version - 用于测试和开发(未压缩,是可读的代码)

    以上两个版本都可以从 [jquery.com](http://jquery.com/download/) 中下载。

    jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
    </head>
       <link rel="stylesheet" href="csswenjian"/>
       <style>

       </style>
    <body>
       <div id="i1">123</div>

       <script src="jquery-1.12.4.js"></script>
       <script>
           $("#i1")
       </script>
    </body>
    </html>

    # 将下载的文件放在网页的同一目录下,就可以使用JQuery
    CDN引用JQuery

    如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

     

    Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

     

    如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软。 如需从Staticfile CDN、又拍云、新浪、谷歌或微软引用 jQuery,请使用以下代码之一:

    Staticfile CDN:

    <head>  
    <script  src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">  </script>  
    </head>

    百度CDN

    <head>  
    <script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script>  
    </head>

    新浪CDN

    <head>  
    <script  src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">  </script>
    </head>

    Google CDN

    <head>  
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>  
    </head>
    # Google产品在中国很不稳定

    Microsoft CDN

    <head>  
    <script  src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>  
    </head>

     

    # 使用CDN的JQuery,有一个很大的优势:
    # 许多用户访问其他站点时,已经从上面各种CDN加载过JQuery,所以结果是,他们访问你站点时,
    # 会从缓存中加载JQuery,这样可以减少加载时间,同时,大多数CDN都可以确保当用户向其请求文件时,
    # 会从离最近的服务器上返回响应,这样也可以提高加载速度.

    # 在浏览器Console输入 $.fn.jquery可以查看使用的什么版本.

    JQuery基础语法

    # 通过JQuery,可以选取(查询,query)HTML元素,并对他们执行"操作"(actions).

    Example

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <script>
       $(document).ready(function () {
           // alert("文档加载完毕");
           // 当前函数执行完执行alert弹出框
           $("p").click(function () {
               $(this).hide();
           // 隐藏p元素  
          })
      });
    </script>
    </body>
    </html>
    查找标签

    1. 基本选择器 id选择器:

    $("#id")

    标签选择器

    $("tagName")

    Class选择器

    $(".className")

    配合使用

    $("div.c1")
    // 找到c1 class类的div标签

    所有元素选择器

    $("*")

    组合选择器

    $("#id,.className,tagName")

    层级选择器 x和y可以为任何选择器

    $("x y");// x的所有后代y(子子孙孙)
    $("x > y");// x的所有儿子y(儿子)
    $("x + y")// 找到所有紧挨在x后面的y
    $("x ~ y")// x之后所有的兄弟y

    Example1

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
       <p class="pclass">p1</p>
       <p id="pid">p2</p>
       <button>
           click
       </button>
       <script>
           $(document).ready(function () {
               $("button").click(function () {
                   $("p").text("p元素被修改了");
                   $(".pclass").text("p元素通过class被修改了");
                   $("#pid").text("p元素通过pid被修改了");
              });
          });
       </script>
    </body>
    </html>

    基本筛选器

    :first // 第一个
    :last // 最后一个
    :eq(index)// 索引等于index的那个元素
    :even // 匹配所有索引值为偶数的元素,从 0 开始计数
    :odd // 匹配所有索引值为奇数的元素,从 0 开始计数
    :gt(index)// 匹配所有大于给定索引值的元素
    :lt(index)// 匹配所有小于给定索引值的元素
    :not(元素选择器)// 移除所有满足not条件的标签
    :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

    // 示例,多用于input标签
    <input type="text">
    <input type="password">
    <input type="checkbox">
    $("input[type='checkbox']");// 取到checkbox类型的input标签
    $("input[type!='text']");// 取到类型不是text的input标签

     

    事件
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
    <button>Click</button>
    <script>
       $(document).ready(function () {
           // $("button").click(function () {
           //     $(this).hide();
               // 单击事件
           // });

           // $("button").dblclick(function () {
               // $(this).hide();
               // 双击事件
           // });

           $("button").mouseenter(function () {
               $(this).hide();
               // 当鼠标放到按钮上触发此事件,
               // mouseleave是鼠标移开按钮触发的事件
          });
      })
    </script>
    </body>
    </html>
    事件之绑定,解除绑定
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
    <button id="clickBind">ClickBind</button>
    <script>
       $(document).ready(function () {
           // $("#clickBind").click(function () {
               // alert("hello")
               // 当我们的事件很多时,这样写非常消耗内存
           // });

           $("#clickBind").bind("click",clickHandler1);
           $("#clickBind").bind("click",clickHandler2);
           // $("#clickBind").unbind("click"); //这种解除绑定会解除所有
           $("#clickBind").unbind("click",clickHandler1()); //解除单一绑定


           $("#clickBind").on("click",clickHandler1);  // bind底层都是使用on,off实现
           $("#clickBind").off("click",clickHandler2);
      });

       function clickHandler1(e) {
           console.log("clickHandler1")
      }
       function clickHandler2(e) {
           console.log("clickHandler2")
      }
    </script>
    </body>
    </html>
    自定义事件
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
       <button id="ClickMeBtn">Click</button>
       <script>
           var ClickMeBtn
           $(document).ready(function () {
               ClickMeBtn = $("#ClickMeBtn");
               ClickMeBtn.click(function () {
                   var e = jQuery.Event("MyEvent");
                   ClickMeBtn.trigger(e);
              });

               ClickMeBtn.bind("MyEvent",function(event) {
                   console.log(event);
              })
          })
       </script>
    </body>
    </html>

    Example2

    $("div:has(h1)")// 找到所有后代中有h1标签的div标签
    $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
    $("li:not(.c1)")// 找到所有不包含c1样式类的li标签
    $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

    Example3 多选,全选,反选

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
    </head>
    <body>

       <input type="button" value="全选" onclick="ChackAll()" />
       <input type="button" value="反选" onclick="ReverseAll()" />
       <input type="button" value="取消" onclick="CancleAll()" />


       <table border="1">
           <thead>
               <tr>
                   <th>选项</th>
                   <th>IP</th>
                   <th>Port</th>
               </tr>
           </thead>

           <tbody >
               <tr>
                   <td><input type="checkbox"></td>
                   <td>1.1.1.1</td>
                   <td>80</td>
               </tr>

               <tr>
                   <td><input type="checkbox"></td>
                   <td>1.1.1.2</td>
                   <td>3306</td>
               </tr>
           </tbody>
       </table>

       <script src="jquery-1.12.4.js"></script>
       <script>
           function ChackAll() {
               $(':checkbox').prop('checked',true);
          }

           function CancleAll() {
               $(':checkbox').prop('checked',false);
          }

           function ReverseAll() {
               $(':checkbox').each(function (k) {
                   // this代表当前循环的每一个元素
                   // 反选,循环出来每个元素,
                   //     console.log(k,this)
                   //     if(this.checked){
                   //         this.checked = false;
                   //     }else{
                   //         this.checked = true;
                   //     }
                   // })


                   // if ($(this).prop('checked')) {
                   //     $(this).prop('checked', false);
                   // } else {
                   //     $(this).prop('checked', true);
                   // }
                   //三元运算 var v = 条件? 真值:假值
                   var v = $(this).prop('checked')?false:true;
                   $(this).prop('checked',v);
              })
          }
       </script>
    </body>
    </html>

    /*
    $(':checkbox').prop('checked'); 获取值
    $('checkbox').prop('checked',true); 设置值

    JQuery方法内置循环: $(':checkbox').xxxx

    $(':checkbox').each(function(k)){
    // k当前索引
    // this,DOM,当前循环的元素 $(this)
    }
    */

    Example4 筛选器

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           .header{
               background-color: aliceblue;
          }

           .content{
               min-height: 50px;
          }

           .hide{
               display: none;
          }
       </style>
    </head>
    <body>
       <div style="height: 400px; 200px; border: 1px solid green">
           <div class="item">
               <div class="header">标题1</div>
               <div id="i1" class="content hide">内容</div>
           </div>

           <div class="item">
               <div class="header">标题2</div>
               <div class="content hide">内容</div>
           </div>

           <div class="item">
               <div class="header">标题3</div>
               <div class="content hide">内容</div>
           </div>
       </div>
           <script src="jquery-1.12.4.js"></script>
           <script>
               // jquery绑定事件
               $('.header').click(function () {
                   // 当前点击标签 $(this)
                   // 获取某个标签的下一个标签
                   // 获取某个标签的父标签,然后获取所有兄弟标签.
                   // 找到后将content加上hide给关掉
                   // 添加样式和移除样式
                   // $('.i1').addClass('hide')
                   // $('#i1').removeClass('hide')
                   // var v = $('this + div');
                   // $('label + input')
                   // console.log(v);

                   // 筛选器
                   // $(this).next()   下一个
                   // $(this).prev() 上一个
                   // $(this).parent() 父
                   // $(this).children() 孩子
                   // $('#i1').sibling() 兄弟
                   // ('#i1').find('#i1') 子子孙孙查找

                   // $(this).next().removeClass('hide');
                   // $(this).parent().siblings().find('.content').addClass('hide')
                   // 链式编程
                   var v = $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
              })
           </script>
    </body>
    </html>

    Example模态编程框

     

    属性选择器
    [attribute]
    [attribute=value]// 属性等于
    [attribute!=value]// 属性不等于
    // 示例
    <input type="text">
    <input type="password">
    <input type="checkbox">
    $("input[type='checkbox']");// 取到checkbox类型的input标签
    $("input[type!='text']");// 取到类型不是text的input标签

    表单筛选器

    :text
    :password
    :file
    :radio
    :checkbox

    :submit
    :reset
    :button


    $(":checkbox") //找到所有的checkbox

    操作标签

    jQuery隐藏/显示
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
       <style>
           div{
               background: #ece023;
                50px;
               height: 50px;
               margin: 2px;
               float: left;
          }
       </style>
    </head>
    <body>
    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">隐藏/显示</button>

    <script>
       for(var i = 0;i<5;i++){
           $("<div>").appendTo(document.body);
      }
       $("div").click(function () {
           $(this).hide(2000,function () {
               $(this).remove();
          });
      })
    </script>

    <script>
       $(document).ready(function () {
           $("#hide").click(function () {
               $("p").hide(1000);
               //1000毫秒隐藏
          });

           $("#show").click(function () {
               $("p").show(1000);
               //1000毫秒显示周期
          });

           $("#toggle").click(function () {
               $("p").toggle(1000);
               // 一个按钮实现显示/隐藏两个功能
          });
      });
    </script>
    </body>
    </html>
    jQuery淡入淡出
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
       <script>
           $(document).ready(function () {
               $("#in").on("click",function () {
                   $("#div1").fadeIn(1000);
                   $("#div2").fadeIn(1000);
                   $("#div3").fadeIn(1000);
              });
               $("#out").on("click",function () {
                   $("#div1").fadeOut(1000);
                   $("#div2").fadeOut(1000);
                   $("#div3").fadeOut(1000);
              });
               $("#toggle").on("click",function () {
                   $("#div1").fadeToggle(1000);
                   $("#div2").fadeToggle(1000);
                   $("#div3").fadeToggle(1000);
              });
               $("#to").on("click",function () {
                   $("#div1").fadeTo(1000, 0.2);
                   $("#div2").fadeTo(1000, 0.4);
                   $("#div3").fadeTo(1000, 0.7);
              });
          });
       </script>
    </head>
    <body>
    <button id="in">fadein</button>
    <button id="out">fadeOut</button>
    <button id="toggle">toggle</button>
    <button id="to">fadeto</button>
    <div id="div1" style=" 80px;height: 80px; display: none; color: rgb(17, 119, 0);">>1</div>
    <div id="div2" style=" 80px;height: 80px; display: none; color: rgb(17, 119, 0);">>2</div>
    <div id="div3" style=" 80px;height: 80px; display: none; color: rgb(17, 119, 0);">>3</div>
    </body>
    </html>
    jQuery滑动
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
       <style>
           #content, #flipshow, #flighide, #fliptoggle {
               padding: 5px;
               text-align: center;
               background-color: aqua;
               border: solid 1px antiquewhite;
          }

           #content {
               padding: 50px;
               display: none;
          }
       </style>
    </head>
    <body>
    <div id="flipshow">出现</div>
    <div id="flighide">隐藏</div>
    <div id="fliptoggle">隐藏/出现</div>
    <div id="content">hello</div>
    <script>
       $(document).ready(function () {
           $("#flipshow").click(function () {
               $("#content").slideDown(1000);
          });

           $("#flighide").click(function () {
               $("#content").slideUp(500);
          });

           $("#fliptoggle").click(function () {
               $("#content").slideToggle(500);
          });
      });
    </script>
    </body>
    </html>

    回调

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
    <button>隐藏</button>
    <p>hello world</p>
    <script>
       $(document).ready(function () {
           $("button").click(function () {
               // $("p").hide(1000,function () {
               //     alert("动画结束,这个方法称为回调")

               $("p").css("color", "red").slideUp(1000).slideDown(1000);
          });
      });
    </script>
    </body>
    </html>
    JQuery的HTML操作
    jQuery的HTML捕获
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
    <p id="text">this is my webpage</p>
    <button id="btn1">点击</button>
    <p><input type="text" id="it" value="youmen"></p>
    <p><a href="http://www.baidu.com" id="aid">百度一下</a></p>
    <button id="btn2">百度</button>

    <script>
       $(document).ready(function () {
           // $("#btn1").click(function () {
           //     alert("text:" + $("#text").text());
           // });

           $("#it").click(function () {
               alert("text:"+$("#it").val());
          });

           $("#btn2").click(function () {
               //获取属性
               alert("text:"+$("#aid").attr("href"));
               alert("text:"+$("#aid").attr("id"));
          });

           // $("#btn1").click(function () {
           //     alert("text:"+$("#text").html());
           // });
      });
    </script>
    </body>
    </html>
    处理HTML捕获内容
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
       <p id="p1">Hello Web</p>
       <p id="p2">Hello World</p>
       <input type="text" id="i3" value="hello">
       <button id="btn1">click1</button>
       <button id="btn2">click2</button>
       <button id="btn3">click3</button>

       <a id="aid" href="http://www.baidu.com">最初是百度,然后换成39.108.140.0:520</a>
       <button id="btn4">跳转</button>

       <br/>
       <p id="p5">hello</p>
       <button id="btn5">按钮</button>

       <script>
           $(document).ready(function () {
               $("#btn1").click(function () {
                   $("#p1").text("YouMen");
                   // 将捕获到的内容进行修改
              });

               $("#btn2").click(function () {
                   $("#p2").html("<a href='http://baidu.com'>百度一下</a>")
                   // 修改标签
              });
               
               $("#btn3").click(function () {
                  $("#i3").val("幽梦");
                  // 对输入框内容进行修改
              });

               $("#btn4").click(function () {
                   $("#aid").attr({
                       "href":"http://39.108.140.0:520",
                       "title":"hello"
                  },);
                   // 修改属性
              });

               $("#btn5").click(function () {
                   $("#p5").text(function (i,ot) {
                       return "old:" +ot+"new:这是新的内容"+(i);
                  });
              });
          });
       </script>
    </body>
    </html>
    JQury添加,删除元素

    添加,插入元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
       <p id="p1">幽梦</p>
       <p id="p2"></p>
       <button id="btn1">添加</button>
       <button id="btn2">插入</button>

       <script>
           $(document).ready(function () {
               $("#btn1").click(function () {
                   $("#p1").append("this is my webpage add content,");
                   // $("#p1").prepend("this is my webpage add content,");
              });

               $("#btn2").click(function () {
                   // $("#p2").before("hello");
                   $("#p2").after("world");
              });
          })
       </script>
    </body>
    </html>

    删除元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
    <div id="div" style="
             height: 200px;
              200px;
             border: 1px solid dimgray;
              color: rgb(0, 0, 204);">;>
      hello
       <p>hello</p>
       <p>world</p>
    </div>
    <button id="btn1">删除</button>

    <script>
       //remove empty
       $(document).ready(function () {
           $("#btn1").click(function () {
               // $("p").remove();
               // $("p").empty();
               $("div").empty();
               // $("div").remove();
               // empty一般只会删除内容相关,remove删除元素
          });
      });
    </script>
    </body>
    </html>
    JQuery的CSS方法
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
       <style>
           .style1 {
                100px;
               height: 100px;
               background-color: #cccccc;
          }

           .style2 {
                100px;
               height: 100px;
               background-color: darkseagreen;
          }
       </style>
    </head>
    <body>
    <div>
      sdaf
    </div>

    <script>
       $(document).ready(function () {
           // $("div").css("width","100px");
           // $("div").css("hight","100px");
           // $("div").css("background","#FF0000");

           // $("div").css({
           //     "100px", height: "100px", backgroundColor: "#00FF00"
           // });
           $("div").addClass("style1");
           $("div").click(function () {
               $(this).toggleClass("style2");
          });
      });
    </script>
    </body>
    </html>
    jQuery的盒子模型
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
       <style>
           #div{
                100px;
               height: 100px;
               margin: 50px;
               padding: 50px;
               border: 2px solid darkseagreen;
               background-color: aqua;
          }
       </style>
    </head>
    <body>
       <div id="div"></div>

       <script>
           $(document).ready(function () {
               //innerHeight 指内边距+外边距+Height
               alert($("#div").innerHeight());
          })
       </script>
    </body>
    </html>

    JQuery的元素遍历与过滤

    JQuery向下遍历元素
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           #div1{
                500px;
               height: 200px;
               background-color: #cccccc;
               border: 3px solid darkseagreen;
          }

           #div2{
                400px;
               height: 150px;
               margin-top: 10px;
               margin-left: 10px;
               border: 30px solid chocolate;
          }

           p{
               margin-left: 10px;
               margin-top: 10px;
                150px;
               height: 80px;
               border: 3px solid green;
          }
       </style>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
       <div id="div1">div1
           <div id="div2"> div2
               <p>
                   <a>
                      Hello
                   </a>
               </p>
           </div>
       </div>

       <script>
           // children
           // find
           $(document).ready(function () {
               // $("#div1").children().css({border:"3px solid red"})
               $("#div1").find("p").css({border: "3px solid gold"})
          })
       </script>
    </body>
    </html>
    向上遍历
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           #div1{
                500px;
               height: 200px;
               background-color: #cccccc;
               border: 3px solid darkseagreen;
          }

           #div2{
                400px;
               height: 150px;
               margin-top: 10px;
               margin-left: 10px;
               border: 30px solid chocolate;
          }

           p{
               margin-left: 10px;
               margin-top: 10px;
                150px;
               height: 80px;
               border: 3px solid green;
          }
       </style>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
       <div id="div1">div1
           <div id="div2"> div2
               <p>
                   <a>
                      Hello
                   </a>
               </p>
           </div>
       </div>

       <script>
           // parent() 只能寻找到他的直接父类
           // parents()
           // parentUntil()
           $(document).ready(function () {
               $("a").parent().css({border:"3px solid #FF0000"})
               // $("p").parents("#div1").css({border:"3px solid #FF0000"})
               $("p").parentsUntil("#div1").css({border:"3px solid #FF0000"})
          })
       </script>
    </body>
    </html>
    同级遍历
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
       <style>
           .bd * {
               display: block;
               border: 3px solid gray;
               color: gray;
               padding: 5px;
               margin: 15px;
          }
       </style>
    </head>
    <body>
    <div class="bd">
       <p>P</p>
       <h2>H2</h2>
       <h3>H3</h3>
       <h4>H4</h4>
       <h5>H5</h5>
       <h6>H6</h6>
    </div>

    <script>
       // sibings()
       // next()
       // nextAll()
       // nextUntil()
       // prev() 跟上面区别在于一个向上一个向下
       // preUntil()
       $(document).ready(function () {
           // $("h4").siblings().css({border: "3px solid #FF0000"});
           // 修改同级所有元素
           // $("h4").next().css({border: "3px solid #FF0000"});
           // $("h4").nextAll().css({border: "3px solid #FF0000"});
           // $("h4").nextUntil("h6").css({border: "3px solid #FF0000"});
           // 从你寻找的元素到指定元素期间的遍历


      });
    </script>
    </body>
    </html>
    jQuery之过滤
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../jquery-2.1.1.min.js"></script>
    </head>
    <body>
       <div>
           <p>div1</p>
       </div>

       <div>
           <p id="pid">div2</p>
       </div>

       <div>
           <p id="pid2">div3</p>
       </div>

       <div>div4</div>

    <script>
       /*
      * fisrt() 只对第一个生效
      * last() 最后一个生效
      * eq() 从0开始指定,0指定1,1指定2
      * filter() 规定一个同样的标准
      * not() 过滤,相反的效果
      */

       $(document).ready(function () {
           // $("div p").first().css("background-color","red");
           // $("div p").eq(1).css("background-color","red");
           // $("div p").filter("p").css("background-color","red");
           $("div p").not(".pid").css("background-color","red");
      });
    </script>
    </body>
    </html>
    小案例

    用户输入为空提示报错信息

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="../static/jquery.js"></script>
       <style>
           .c1 {
               color: red;
               font-size: 12px;
          }
       </style>
    </head>
    <body>
    <div>
      用户名: <input type="text" id="username">
       <span class="c1"></span>
    </div>

    <div>
      密码: <input type="password" id="password">
       <span class="c1"></span>
    </div>
    <button id="btn">提交</button>

    <script>
       $('#btn').click(function () {
           var user = $('#username').val();
           var pwd = $('#password').val();
           if (user.length == 0) {
               $('#username').siblings('.c1').text("用户名不能为空");
          } else {
               $('#username').siblings('.c1').text('');
          }

           if (pwd.length == 0) {
               $("#password").siblings('.c1').text("密码不能为空");
          } else {
               $("#password").siblings('.c1').text('');
          }
      })
    </script>
    </body>
    </html>

     

    全选,反选,新增,编辑

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           .c1 {
               position: fixed;
               top: 0;
               left: 0;
               bottom: 0;
               right: 0;
               background-color: rgba(0, 0, 0, 0.5);
               z-index: 99;
          }

           .c2 {
               height: 200px;
                300px;
               background-color: white;
               position: absolute;
               top: 50%;
               left: 50%;
               margin-top: -100px;;
               margin-left: -150px;
               z-index: 100;
          }

           .hide {
               display: none;
          }
       </style>
       <script src="../static/jquery.js"></script>
    </head>
    <body>

    <button id="add">新增</button>
    <button id="chose_all">全选</button>
    <button id="reverse">反选</button>
    <button id="cancel">取消</button>

    <table border="1">
       <thead>
       <tr>
           <th>#</th>
           <th>主机</th>
           <th>IP</th>
           <th>端口</th>
       </tr>
       </thead>

       <tbody>
       <tr>
           <td>
               <input type="checkbox">
           </td>
           <td>nginx</td>
           <td>1.1.1.1</td>
           <td>80</td>
           <td>
               <button class="fire">开除</button>
               <button class="edit">编辑</button>
           </td>
       </tr>

       <tr>
           <td>
               <input type="checkbox">
           </td>
           <td>mysql</td>
           <td>1.1.1.2</td>
           <td>3306</td>
           <td>
               <button class="fire">开除</button>
               <button class="edit">编辑</button>
           </td>
       </tr>

       <tr>
           <td>
               <input type="checkbox">
           </td>
           <td>php</td>
           <td>1.1.1.3</td>
           <td>9000</td>
           <td>
               <button class="fire">开除</button>
               <button class="edit">编辑</button>
           </td>
       </tr>
       </tbody>
    </table>

    <div class="cc hide">
       <div class="c1"></div>
       <div class="c2">
           <div>
              主机: <input type="text" id="username">
           </div>

           <div>
              IP: <input type="text" id="ip">
           </div>

           <div>
              端口: <input type="text" id="port">
           </div>

           <div>
               <button id="sub">提交</button>
               <button id="cannel">取消</button>
           </div>
       </div>
    </div>

    <script>
       // 全选
       $('#chose_all').click(function () {
           $(":checkbox").prop("checked", true);
      });

       // 取消
       $('#cancel').click(function () {
           $(":checkbox").prop("checked", false);
      });

       // 反选
       $('#reverse').click(function () {
           var a = $(':checkbox');
           for (var i = 0; i < a.length; i++) {
               var status = a.eq(i).prop('checked');
               //     if (status == true){
               //         a.eq(i).prop('checked',false);
               //     }else {
               //         a.eq(i).prop('checked',true);
               a.eq(i).prop('checked', !status);
          }
      });

       var editBtn;
       var flag;

       // 新增
       // 1. 点击新增按钮,弹出模态对话框
       $('#add').click(function () {
           $('.cc').removeClass('hide');
           $('#username').val('');
           $('#ip').val('');
           $('#port').val('');
           flag = 1;
      });

       // 2. 用户输入内容,点击确定按钮,生成一条记录添加到table标签的最后面,并且关闭模态对话框
       $('#sub').click(function () {
           if (flag == 1) {
               // 2.1 获取用户输入内容
               var username = $('#username').val();
               var ip = $('#ip').val();
               var port = $('#port').val();

               // 2.2 创建tr标签,然后将用户输入的数据放到tr对应的td标签里面去
               var newTr = '<tr><td><input type="checkbox"></td><td>' + username + '</td><td>' + ip + '</td><td>' + port + '</td><td><button class="fire">开除</button> <button class="edit">编辑</button></td></tr>';

               // 2.3 将新创建的tr标签添加到table标签的tbody的最后
               $('tbody').append(newTr);
          } else {
               var username = $('#username').val();
               var ip = $('#ip').val();
               var port = $('#port').val();

               // 获取该行的数据
               editBtn.parent().prev().text(username);
               editBtn.parent().prev().prev().text(ip);
               editBtn.parent().prev().prev().text(port);
          }
           $('.cc').addClass('hide');
      });

       // 点击取消,关闭模态对话框
       $("#cannel").click(function () {
           $('.cc').addClass('hide');
      });

       // 删除
       $('tbody').on('click', '.fire', function () {
           $(this).parent().parent().remove();
      });

       // 编辑
       // 1. 弹出模态对话框,并且将之前的数据获取到,然后赋值给输入框
       $('tbody').on('click', '.edit', function () {
           flag = 2;
           editBtn = $(this);
           $('.cc').removeClass('hide');
           // 获取该行数据
           var username = $(this).parent().prev().text();
           var ip = $(this).parent().prev().prev().text();
           var port = $(this).parent().prev().prev().text();

           // 赋值给模态对话框的input标签
           $('#username').val(username);
           $('#ip').val(ip);
           $('#port').val(port);
      });
    </script>
    </body>
    </html>

     

     

    JQuery Ajax

     

    JQuery UI

    JQueryUI简介

    JQuery UI 是以JQuery为基础的JavaScript网页用户界面的开源库,包含底层用户交互,动画和特效和可更换主题的可视控件,我们可以直接用它来构建具有很好交互性的web应用程序.

     

    包含了许多维持状态的小部件(Widget),因此,他与典型的JQuery插件使用模式略有不同,所有的JQuery UI小部件(Widget)使用相同的模式,所有,只要你学会其中一个,你就知道如何使用其他的小部件(Widget)

     

    支持版本 IE6.0+Firefox 3 + Safari 3.1 + Opera9.6和GoogleChrome

     

    JQuery UI主要分为3个部分: 交互,小部件和效果库 a: 交互 交互部件是一些与鼠标交互相关的内容,包括Draggable,Droppable,Resizable,Selectable和Sortabie等

     

    b: 小部件 主要是一些界面的扩展,包括AutoComplete,ColorPicker,Dialog,Slider,Tabs,ProgressBar,Spinner等

     

    c: 效果 用于提供丰富的动画效果,包括: Add Class,Color Animation,Togller等.

    JQuery UI的使用
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="./jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.css"></script>
       <script src="jquery-ui.min.js"></script>
       <link type="text/css" href="jquery-ui.min.css" rel="stylesheet">

    </head>
    <body>
    <button>百度一下</button>
    <a href="http://www.baidu.com" id="a_btn">百度一下</a>

    <script>
       $(document).ready(function () {
           $("#a_btn").button();
      });
    </script>
    </body>
    </html>
    JQuery Draggable

    拖动

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link type="text/css" rel="stylesheet" href="jquery-ui.min.css"></link>
    </head>
    <body>
       <div style=" 100px; height: 100px;border: 20px solid #FF0000;" id="div">
       
       </div>

    <script>
       $(document).ready(function () {
           $("#div").draggable();
      })
    </script>
    </body>
    </html>

    放置

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
    </head>
    <body>
       <div style=" 100px;height: 100px; border: 2px solid #7e55ff;" id="div1"></div>
       <div style=" 200px;height: 200px; border: 2px solid #7e55ff;" id="div2"></div>

    <script>
       $(document).ready(function () {
           $("#div1").draggable();
           $("#div2").droppable();

           $("#div2").on("drop",function (event,ui) {
               $("#div2").text("drop事件");
          });
      });
    </script>
    </body>
    </html>

    可拖动大小

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
    </head>
    <body>
       <div style=" 100px; height: 100px; color: rgb(0, 0, 204);">id="div1"></div>

       <script>
           $(document).ready(function () {
               $("#div1").resizable();
          })
       </script>
    </body>
    </html>

    可选列表

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
       <style>
           .ui-selected{
               background: #31b0d5;
          }
       </style>
    </head>
    <body>
       <strong>世界上最美丽的人是?</strong>
       <ul id="select">
           <li id="right">A.me</li>
           <li>B.我</li>
           <li>C.I</li>
       </ul>
       <a href="#" id="btn">提交</a>

       <script>
           $(document).ready(function () {
               $("#btn").button();
               $("#select").selectable();
               $("#btn").on("click",function () {
                   if($("#right").hasClass("ui-selected")){
                   alert("恭喜您答对了!");
              }
              });
          });
       </script>
    </body>
    </html>

    sortable

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
    </head>
    <body>
       <ul id="sortable">
           <li>苹果</li>
           <li>橘子</li>
           <li>香蕉</li>
           <li>桃子</li>
       </ul>
       <script>
           $(document).ready(function () {
               $("#sortable").sortable();
          });
       </script>
    </body>
    </html>
    JQuery UI小部件

    多个下拉框菜单

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <div id="div1">
       <h3>选项一</h3>
       <div>
           <p>
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
           </p>
       </div>

       <h3>选项二</h3>
       <div>
           <p>
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
           </p>
       </div>

       <h3>选项三</h3>
       <div>
           <p>
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
           </p>
       </div>
    </div>


    <script>
       $(document).ready(function () {
           $("#div1").accordion();
      });
    </script>
    </body>
    </html>

    自动补全

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <div id="div1">
       <h3>选项一</h3>
       <div>
           <p>
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
           </p>
       </div>

       <h3>选项二</h3>
       <div>
           <p>
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
           </p>
       </div>

       <h3>选项三</h3>
       <div>
           <p>
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
              hellohellohellohellohellohellohellohello
           </p>
       </div>
    </div>


    <script>
       $(document).ready(function () {
           $("#div1").accordion();
      });
    </script>
    </body>
    </html>

    日期控件

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
    </head>
    <body>
       <p>Date:<input type="text" id="datepicker"></p>
       <a href="#" id="btn">按钮</a>

       <script>
           $(function () {
               $("#datepicker").datepicker();
               $("#btn").button();
          })
       </script>
    </body>
    </html>

    对话框

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
    </head>
    <body>
       <div id="div">
           <p>这是一个对话框Dialog</p>
       </div>
       <a id="btn">按钮</a>

       <script>
           $(function () {
               $("#btn").button().on("click",function () {
                   $("#div").dialog();
              });
          });
       </script>
    </body>
    </html>

    进度条

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
    </head>
    <body>
       <div id="pb"></div>

       <script>
           var pb;
           var max=100;
           var current=0;
           $(document).ready(function () {
               pb=$("#pb");
               pb.progressbar({max:100});
               setInterval(changepd,100);
          });

           function changepd() {
               current++;
               if(current>=100){
                   current = 0;
              }
               pb.progressbar("option","value",current);
          }
       </script>
    </body>
    </html>

    menu菜单 垂直菜单

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
       <style>
           #menu{
                150px;
          }
       </style>
    </head>
    <body>
       <ul id="menu">
           <li>
               <a href="#">Java</a>
               <ul>
                   <li><a href="#">JAVAEE</a>JAVA</li>
                   <li><a href="#">JAVASE</a></li>
                   <li><a href="#">JAVAME</a></li>
               </ul>
           </li>
           <li>C</li>
           <li>C++</li>
           <li>Go</li>
       </ul>

       <script>
           $(document).ready(function () {
               $("#menu").menu({position:{at:"right bottom"}});
          });
       </script>
    </body>
    </html>

    水平菜单

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
       <style>
           .ui-menu:after{
               content: ".";
               display: block;
               clear: both;
               visibility: hidden;
               line-height: 0;
               height: 0;
          }

           .ui-menu .ui-menu-item{
               display: inline-block;
               float: left;
               margin: 0;
               padding: 10px;
                auto;
          }
       </style>
    </head>
    <body>
       <ul id="menu">
           <li>
               <a href="#">Java</a>
               <ul>
                   <li><a href="#">JAVAEE</a></li>
                   <li><a href="#">JAVASE</a></li>
                   <li><a href="#">JAVAME</a></li>
               </ul>
           </li>
           <li>C</li>
           <li>C++</li>
           <li>Go</li>
       </ul>

       <script>
           $(document).ready(function () {
               $("#menu").menu({position:{at:"left bottom"}});
          });
       </script>
    </body>
    </html>
    样式操作

    样式类

    addClass();  //添加指定的CSS类名
    removeClass();  //移除指定的CSS类名
    hasClass(); //判断样式存不存在
    toggleClass(); //切换CSS类名,如果有就移除,如果没有就添加.

    slider(拖动条)

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <span id="span">0</span>
    <div id="slider"></div>

    <script>
       var valueSpan,slider;
       $(document).ready(function () {
           slider=$("#slider");
           valueSpan=$("#span");

           // slider.slider({
           //     change:function (event,ui) {
           //         valueSpan.text(slider.slider("option","value"));
           //     }
           // });

           slider.slider({
               slide:function (event,ui) {
                   valueSpan.text(slider.slider("option","value"));
              }
          })
      });
    </script>
    </body>
    </html>

    Example 开关灯和模态框 CSS

    css("color","red")   //DOM操作: tag.style.color="red"

    $("p").css("color","red"); //将所有p标签的字体设置为红色.

    输入框

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
    </head>
    <body>
       <input id="input">
       <button id="btn">getValue</button>
    <script>
       $(function () {
           $("#input").spinner();
           $("#input").spinner("value","18");
           $("#btn").on("click",function () {
               alert($("#input").spinner("value"));
          });
      });
    </script>
    </body>
    </html>

    spinner(下拉菜单/列表)

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <script src="jquery-2.1.1.min.js"></script>
       <script src="jquery-ui.min.js"></script>
       <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
       <script>
           $(function () {
               $("#tabs").tabs();
          });
       </script>
    </head>
    <body>
    <div id="tabs">
       <ul>
           <li><a href="#hello1">hello</a></li>
           <li><a href="#hello2">hello</a></li>
           <li><a href="#hello3">hello</a></li>
       </ul>
       <div id="hello1">
           hello1
           hello1
           hello1
           hello1
       </div>
       <div id="hello2">
           hello2
           hello2
           hello2
           hello2
       </div>
       <div id="hello3">
           hello3
           hello3
           hello3
           hello3
       </div>
    </div>

    </body>
    </html>
    位置操作
    offset()    //获取匹配元素在当前窗口的相对偏移或设置元素位置
    position() //获取匹配元素相对父元素的偏移
    scrollTop() //获取匹配元素相对滚动条顶部的偏移
    scrollLeft() //获取匹配元素相对滚动条左侧的偏移

    # offset()方法允许我们检索一个元素相对于文档(document)的当前位置
    # 和.position()的差别在于: .position()是相对于父级元素的位移.

    Example1

     

     

     

    文本操作

    HTML代码

    # html()        //取得第一个匹配元素的html内容
    # html(val) //设置所有匹配元素的html内容

    文本值

    # $('this').text()      //取得所有匹配元素的内容
    # $('this').text(val) //设置所有匹配元素的内容

    # $('this').val("YouMen") //val能修改input里面输入的内容

    val()// 取得第一个匹配元素的当前值
    val(val)// 设置所有匹配元素的值
    val([val1, val2])// 设置多选的checkbox、多选select的值

    Example1 模态编程框

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .hide{
              display: none;
          }
          .modal{
              position: fixed;
              top: 50%;
              left: 50%;
              500px;
              height: 400px;
              margin-left: -250px;
              margin-top: -250px;
             
              z-index: 10;
          }
          .shadow{
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              opacity: 0.6;
             
              z-index: 9;
          }
      </style>
    </head>
    <body>
      <a onclick="addElement();">添加</a>

      <table border="1" id="tb">
          <tr>
              <td target="hostname">1.1.1.11</td>
              <td target="port">80</td>
              <td target="ip">80</td>
              <td>
                  <a class="edit">编辑</a> | <a class="del">删除</a>
              </td>
          </tr>
          <tr>
              <td target="hostname">1.1.1.12</td>
              <td target="port">80</td>
              <td target="ip">80</td>
              <td>
                  <a class="edit">编辑</a> | <a class="del">删除</a>
              </td>
          </tr>
          <tr>
              <td target="hostname">1.1.1.13</td>
              <td target="port">80</td>
              <td target="ip">80</td>
              <td>
                  <a class="edit">编辑</a> | <a class="del">删除</a>
              </td>
          </tr>
          <tr>
              <td target="hostname">1.1.1.14</td>
              <td target="port">80</td>
              <td target="ip">80</td>
              <td>
                  <a class="edit">编辑</a> | <a class="del">删除</a>
              </td>

          </tr>
      </table>

      <div class="modal hide">
          <div>
              <input name="hostname" type="text" />
              <input name="port" type="text" />
              <input name="ip" type="text" />
          </div>

          <div>
              <input type="button" value="取消" onclick="cancelModal();" />
              <input type="button" value="确定" onclick="confirmModal();" />
          </div>
      </div>

      <div class="shadow hide"></div>

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

          $('.del').click(function () {
              $(this).parent().parent().remove();
          });

          function confirmModal() {

              var tr = document.createElement('tr');
              var td1 = document.createElement('td');
              td1.innerHTML = "11.11.11.11";
              var td2 = document.createElement('td');
              td2.innerHTML = "8001";

              $(tr).append(td1);
              $(tr).append(td2);

              $('#tb').append(tr);

              $(".modal,.shadow").addClass('hide');
    //           $('.modal input[type="text"]').each(function () {
    //               // var temp = "<td>..."
    //
    //
    //
    //           })
          }

          function addElement() {
              $(".modal,.shadow").removeClass('hide');
          }
          function cancelModal() {
              $(".modal,.shadow").addClass('hide');
              $('.modal input[type="text"]').val("");
          }

          $('.edit').click(function(){
              $(".modal,.shadow").removeClass('hide');
              // this
              var tds = $(this).parent().prevAll();
              tds.each(function () {
                  // 获取td的target属性值
                  var n = $(this).attr('target');
                  // 获取td中的内容
                  var text = $(this).text();
                  var a1 = '.modal input[name="';
                  var a2 = '"]';
                  var temp = a1 + n + a2;
                  $(temp).val(text);
              });


    //           var port = $(tds[0]).text();
    //           var host = $(tds[1]).text();
    //
    //           $('.modal input[name="hostname"]').val(host);
    //           $('.modal input[name="port"]').val(port);
              // 循环获取tds中内容
              // 获取 <td>内容</td> 获取中间的内容
              // 赋值给input标签中的value

          });
      </script>
    </body>
    </html>

    Example2 开关

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .hide{
              display: none;
          }
      </style>
    </head>
    <body>
      <input id="i1" type="button" value="开关" />
      <div class="c1">YouMen</div>

      <script src="jquery-1.12.4.js"></script>
      <script>
          $('#i1').click(function () {
              if($('.c1').hasClass('hide')){
                  $('.c1').removeClass('hide');
              }else{
                  $('.c1').addClass('hide');
              }
          })
      </script>
    </body>
    </html>
    属性操作

    用于ID等或自定义属性

    attr(attrName)// 返回第一个匹配元素的属性值
    attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
    attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
    removeAttr()// 从每一个匹配的元素中删除一个属性

    用于checkbox和radio

    prop() // 获取属性
    removeProp() // 移除属性

    注意: 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr(“checked”, “checked”)。

    <input type="checkbox" value="1">
    <input type="radio" value="2">
    <script>
    $(":checkbox[value='1']").prop("checked", true);
    $(":radio[value='2']").prop("checked", true);
    </script>

    prop和attr的区别

    # attr全称attribute(属性)
    # prop全称property(属性)
    # 虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,
    # 而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。
    文档处理

    Example 多个菜单多个内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .hide{
              display: none;
          }
          .menu{
              height: 38px;
             
              line-height: 38px;
          }

          .active{
             
          }

          .menu .menu-item{
              float: left;
              border-right: 1px solid red;
              padding: 0 5px ;
              // 小手
              cursor: pointer;
          }
          .content{
              min-height: 500px;
              border: 1px solid #eeeeee;
          }
      </style>
    </head>
    <body>
      <div style=" 700px; margin: 0 auto;">
          <div class="menu">
              <div class="menu-item active" a="1">菜单一</div>
              <div class="menu-item" a="2">菜单二</div>
              <div class="menu-item" a="3">菜单三</div>
          </div>

          <div class="content">
              <div b="1">内容一</div>
              <div class="hide" b="2">内容二</div>
              <div class="hide" b="3">内容三</div>
          </div>
      </div>

      <script src="jquery-1.12.4.js"></script>
      <script>
          $('.menu-item').click(function () {
              $(this).addClass('active').siblings().removeClass('active');
              var target = $(this).attr('a');
              $('.content').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide');
          })
      </script>
    </body>
    </html>
  • 相关阅读:
    java实现倒计时
    javaweb启动时启动socket服务端
    二进制数与十六进制数之间如何互相转换
    分组查询最新时间的数据
    javaweb利用钉钉机器人向钉钉群推送消息(解决中文乱码)
    java利用钉钉机器人向钉钉群推送消息
    Java原生操作数据库(不使用框架)
    Mybatis 插入与批量插入以及多参数批量删除
    在spring中直接在类中注入dao
    web自动化测试实战之批量执行测试用例
  • 原文地址:https://www.cnblogs.com/you-men/p/12939669.html
Copyright © 2011-2022 走看看