zoukankan      html  css  js  c++  java
  • python_day15_jquery

    前端基础之jquery

    一 jQuery是什么? 

    [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

    [2]   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

    [3]  它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器

    [4]  jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。

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

    二 什么是jQuery对象?

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

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

     jquery的基础语法:$(selector).action()     

     参考:http://jquery.cuishifeng.cn/

    三 寻找元素(选择器和筛选器) 

    3.1   选择器

    3.1.1 基本选择器      

    1
    $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

    3.1.2 层级选择器   

    1
    $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

    3.1.3 基本筛选器  

    1
    $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

    3.1.4 属性选择器

    1
    $('[id="div1"]')   $('["alex="sb"][id]')

    3.1.5 表单选择器      

    1
    $("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

    3.1.6 表单属性选择器

       :enabled
        :disabled
        :checked
        :selected

     1 <body>
     2 
     3 <form>
     4     <input type="checkbox" value="123" checked>
     5     <input type="checkbox" value="456" checked>
     6 
     7 
     8   <select>
     9       <option value="1">Flowers</option>
    10       <option value="2" selected="selected">Gardens</option>
    11       <option value="3" selected="selected">Trees</option>
    12       <option value="3" selected="selected">Trees</option>
    13   </select>
    14 </form>
    15 
    16 
    17 <script src="jquery.min.js"></script>
    18 <script>
    19     // console.log($("input:checked").length);     // 2
    20 
    21     // console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1
    22 
    23     $("input:checked").each(function(){
    24 
    25         console.log($(this).val())
    26     })
    27 
    28 </script>
    29 
    30 
    31 </body>
    View Code

    3.2 筛选器

    3.2.1  过滤筛选器    

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

    3.2.2  查找筛选器  

     1 查找子标签:         $("div").children(".test")      $("div").find(".test")  
     2                                
     3  向下查找兄弟标签:    $(".test").next()               $(".test").nextAll()     
     4                     $(".test").nextUntil() 
     5                            
     6  向上查找兄弟标签:    $("div").prev()                  $("div").prevAll()       
     7                     $("div").prevUntil()   
     8  查找所有兄弟标签:    $("div").siblings()  
     9               
    10  查找父标签:         $(".test").parent()              $(".test").parents()     
    11                     $(".test").parentUntil()
    View Code

    四 操作元素(属性,css,文档处理)

    4.1 事件

    页面载入

    ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){}) -----------> $(function(){}) 
    View Code

    事件绑定

    //语法:  标签对象.事件(函数)    
    eg: $("p").click(function(){})
    View Code

    事件委派:

    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <hr>
    <button id="add_li">Add_li</button>
    <button id="off">off</button>
    
    <script src="jquery.min.js"></script>
    <script>
        $("ul li").click(function(){
            alert(123)
        });
    
        $("#add_li").click(function(){
            var $ele=$("<li>");
            $ele.text(Math.round(Math.random()*10));
            $("ul").append($ele)
    
        });
    
    
    //    $("ul").on("click","li",function(){
    //        alert(456)
    //    })
    
         $("#off").click(function(){
             $("ul li").off()
         })
        
    </script>
    View Code

    事件切换

    hover事件:

    一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

    over:鼠标移到元素上要触发的函数

    out:鼠标移出元素要触发的函数

     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         .test{
    12 
    13              200px;
    14             height: 200px;
    15             background-color: wheat;
    16 
    17         }
    18     </style>
    19 </head>
    20 <body>
    21 
    22 
    23 <div class="test"></div>
    24 </body>
    25 <script src="jquery.min.js"></script>
    26 <script>
    27 //    function enter(){
    28 //        console.log("enter")
    29 //    }
    30 //    function out(){
    31 //        console.log("out")
    32 //    }
    33 // $(".test").hover(enter,out)
    34 
    35 
    36 $(".test").mouseenter(function(){
    37         console.log("enter")
    38 });
    39 
    40 $(".test").mouseleave(function(){
    41         console.log("leave")
    42     });
    43 
    44 </script>
    45 </html>
    View Code

    4.2 属性操作

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

    attr方法使用:

    <input id="chk1" type="checkbox" />是否可见
    <input id="chk2" type="checkbox" checked="checked" />是否可见
    
    
    
    <script>
    
    //对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
    //对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
    //像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此
    //需要使用prop方法去操作才能获得正确的结果。
    
    
    //    $("#chk1").attr("checked")
    //    undefined
    //    $("#chk1").prop("checked")
    //    false
    
    //  ---------手动选中的时候attr()获得到没有意义的undefined-----------
    //    $("#chk1").attr("checked")
    //    undefined
    //    $("#chk1").prop("checked")
    //    true
    
        console.log($("#chk1").prop("checked"));//false
        console.log($("#chk2").prop("checked"));//true
        console.log($("#chk1").attr("checked"));//undefined
        console.log($("#chk2").attr("checked"));//checked
    </script>
    View Code

    4.3 each循环

    我们知道,

    1
    $("p").css("color","red")  

    是将css操作加到所有的标签上,内部维持一个循环;但如果对于选中标签进行不同处理,这时就需要对所有标签数组进行循环遍历啦

    jquery支持两种循环方式:

    方式一

    格式:$.each(obj,fn)

    li=[10,20,30,40];
    dic={name:"yuan",sex:"male"};
    $.each(li,function(i,x){
        console.log(i,x)
    });

    方式二

    格式:$("").each(fn)

    $("tr").each(function(){
        console.log($(this).html())
    })

    其中,$(this)代指当前循环标签。

    each扩展

     1 /*
     2         function f(){
     3 
     4         for(var i=0;i<4;i++){
     5 
     6             if (i==2){
     7                 return
     8             }
     9             console.log(i)
    10         }
    11 
    12     }
    13     f();  // 这个例子大家应该不会有问题吧!!!
    14 //-----------------------------------------------------------------------
    15 
    16 
    17     li=[11,22,33,44];
    18     $.each(li,function(i,v){
    19 
    20         if (v==33){
    21                 return ;   //  ===试一试 return false会怎样?
    22             }
    23             console.log(v)
    24     });
    25 
    26 //------------------------------------------
    27 
    28 
    29     // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行
    30 
    31     //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
    32     //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
    33          for(var i in obj){
    34 
    35              ret=func(i,obj[i]) ;
    36              if(ret==false){
    37                  return ;
    38              }
    39 
    40          }
    41     // 这样就很灵活了:
    42     // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
    43     // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false
    44 
    45 
    46 // ---------------------------------------------------------------------
    View Code

    4.4 文档节点处理

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

    4.5 动画效果

    显示隐藏

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="jquery-2.1.4.min.js"></script>
     7     <script>
     8 
     9 $(document).ready(function() {
    10     $("#hide").click(function () {
    11         $("p").hide(1000);
    12     });
    13     $("#show").click(function () {
    14         $("p").show(1000);
    15     });
    16 
    17 //用于切换被选元素的 hide() 与 show() 方法。
    18     $("#toggle").click(function () {
    19         $("p").toggle();
    20     });
    21 })
    22 
    23     </script>
    24     <link type="text/css" rel="stylesheet" href="style.css">
    25 </head>
    26 <body>
    27 
    28 
    29     <p>hello</p>
    30     <button id="hide">隐藏</button>
    31     <button id="show">显示</button>
    32     <button id="toggle">切换</button>
    33 
    34 </body>
    35 </html>
    View Code

    滑动

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="jquery-2.1.4.min.js"></script>
     7     <script>
     8     $(document).ready(function(){
     9      $("#slideDown").click(function(){
    10          $("#content").slideDown(1000);
    11      });
    12       $("#slideUp").click(function(){
    13          $("#content").slideUp(1000);
    14      });
    15       $("#slideToggle").click(function(){
    16          $("#content").slideToggle(1000);
    17      })
    18   });
    19     </script>
    20     <style>
    21 
    22         #content{
    23             text-align: center;
    24             background-color: lightblue;
    25             border:solid 1px red;
    26             display: none;
    27             padding: 50px;
    28         }
    29     </style>
    30 </head>
    31 <body>
    32 
    33     <div id="slideDown">出现</div>
    34     <div id="slideUp">隐藏</div>
    35     <div id="slideToggle">toggle</div>
    36 
    37     <div id="content">helloworld</div>
    38 
    39 </body>
    40 </html>
    View Code

    淡入淡出

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

    回调函数

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-2.1.4.min.js"></script>
    
    </head>
    <body>
      <button>hide</button>
      <p>helloworld helloworld helloworld</p>
    
    
    
     <script>
       $("button").click(function(){
           $("p").hide(1000,function(){
               alert($(this).html())
           })
    
       })
        </script>
    </body>
    </html>
    View Code

    4.6 css操作

    css位置操作

            $("").offset([coordinates])
            $("").position()
            $("").scrollTop([val])
            $("").scrollLeft([val])

    示例1:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .test1{
     8              200px;
     9             height: 200px;
    10             background-color: wheat;
    11         }
    12     </style>
    13 </head>
    14 <body>
    15 
    16 
    17 <h1>this is offset</h1>
    18 <div class="test1"></div>
    19 <p></p>
    20 <button>change</button>
    21 </body>
    22 <script src="jquery-3.1.1.js"></script>
    23 <script>
    24     var $offset=$(".test1").offset();
    25     var lefts=$offset.left;
    26     var tops=$offset.top;
    27 
    28     $("p").text("Top:"+tops+" Left:"+lefts);
    29     $("button").click(function(){
    30 
    31         $(".test1").offset({left:200,top:400})
    32     })
    33 </script>
    34 </html>
    View Code

    示例2:

     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         }
    10         .box1{
    11              200px;
    12             height: 200px;
    13             background-color: rebeccapurple;
    14         }
    15         .box2{
    16              200px;
    17             height: 200px;
    18             background-color: darkcyan;
    19         }
    20         .parent_box{
    21              position: relative;
    22         }
    23     </style>
    24 </head>
    25 <body>
    26 
    27 
    28 
    29 
    30 <div class="box1"></div>
    31 <div class="parent_box">
    32     <div class="box2"></div>
    33 </div>
    34 <p></p>
    35 
    36 
    37 <script src="jquery-3.1.1.js"></script>
    38 <script>
    39     var $position=$(".box2").position();
    40     var $left=$position.left;
    41     var $top=$position.top;
    42 
    43     $("p").text("TOP:"+$top+"LEFT"+$left)
    44 </script>
    45 </body>
    46 </html>
    View Code

    示例3:

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

    尺寸操作

            $("").height([val|fn])
            $("").width([val|fn])
            $("").innerHeight()
            $("").innerWidth()
            $("").outerHeight([soptions])
            $("").outerWidth([options])

    示例:

     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         }
    10         .box1{
    11              200px;
    12             height: 200px;
    13             background-color: wheat;
    14             padding: 50px;
    15             border: 50px solid rebeccapurple;
    16             margin: 50px;
    17         }
    18 
    19     </style>
    20 </head>
    21 <body>
    22 
    23 
    24 
    25 
    26 <div class="box1">
    27     DIVDIDVIDIV
    28 </div>
    29 
    30 
    31 <p></p>
    32 
    33 <script src="jquery-3.1.1.js"></script>
    34 <script>
    35     var $height=$(".box1").height();
    36     var $innerHeight=$(".box1").innerHeight();
    37     var $outerHeight=$(".box1").outerHeight();
    38     var $margin=$(".box1").outerHeight(true);
    39 
    40     $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)
    41 </script>
    42 </body>
    43 </html>
    View Code

    扩展方法 (插件机制)

    jQuery.extend(object)

    扩展jQuery对象本身。

    用来在jQuery命名空间上增加新函数。 

    在jQuery命名空间上增加两个函数:

     1 <script>
     2     jQuery.extend({
     3       min: function(a, b) { return a < b ? a : b; },
     4       max: function(a, b) { return a > b ? a : b; }
     5 });
     6 
     7 
     8     jQuery.min(2,3); // => 2
     9     jQuery.max(4,5); // => 5
    10 </script>
    View Code

    jQuery.fn.extend(object)

    扩展 jQuery 元素集来提供新的方法(通常用来制作插件)

    增加两个插件方法:

    <body>
    
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    
    <script src="jquery.min.js"></script>
    <script>
        jQuery.fn.extend({
          check: function() {
             $(this).attr("checked",true);
          },
          uncheck: function() {
             $(this).attr("checked",false);
          }
        });
    
    
        $(":checkbox:gt(0)").check()
    </script>
    
    </body>
    View Code

    实例练习

    左侧菜单 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>left_menu</title>
    
        <style>
              .menu{
                  height: 500px;
                   20%;
                  background-color: gainsboro;
                  text-align: center;
                  float: left;
              }
              .content{
                  height: 500px;
                   80%;
                  background-color: darkgray;
                  float: left;
              }
             .title{
                 line-height: 50px;
                 background-color: wheat;
                 color: rebeccapurple;}
    
    
             .hide{
                 display: none;
             }
    
    
        </style>
    </head>
    <body>
    
    <div class="outer">
        <div class="menu">
            <div class="item">
                <div class="title">菜单一</div>
                <div class="con">
                    <div>111</div>
                    <div>111</div>
                    <div>111</div>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单二</div>
                <div class="con hide">
                    <div>222</div>
                    <div>222</div>
                    <div>222</div>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单三</div>
                <div class="con hide">
                    <div>333</div>
                    <div>333</div>
                    <div>333</div>
                </div>
            </div>
    
        </div>
        <div class="content"></div>
    
    </div>
    <script src="jquery.min.js"></script>
    <script>
               $(".item .title").mouseover(function () {
                    $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
    
    //                $(this).next().removeClass("hide");
    //                $(this).parent().siblings().children(".con").addClass("hide");
               })
    </script>
    
    
    </body>
    </html>
    View Code

    Tab切换

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>tab</title>
    
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .tab_outer{
                margin: 20px auto;
                 60%;
            }
            .menu{
                background-color: #cccccc;
                /*border: 1px solid red;*/
                line-height: 40px;
                text-align: center;
            }
            .menu li{
                display: inline-block;
                margin-left: 14px;
                padding:5px 20px;
    
            }
            .menu a{
                border-right: 1px solid red;
                padding: 11px;
            }
            .content{
                background-color: tan;
                border: 1px solid green;
                height: 300px;
    
            }
            .hide{
                display: none;
            }
    
            .current{
                background-color: #2868c8;
                color: white;
                border-top: solid 2px rebeccapurple;
            }
        </style>
    </head>
    <body>
          <div class="tab_outer">
              <ul class="menu">
                  <li relation="c1" class="current">菜单一</li>
                  <li relation="c2" >菜单二</li>
                  <li relation="c3">菜单三</li>
              </ul>
              <div class="content">
                  <div id="c1">内容一</div>
                  <div id="c2" class="hide">内容二</div>
                  <div id="c3" class="hide">内容三</div>
              </div>
    
          </div>
    </body>
    
    
    <script src="jquery.min.js"></script>
        <script>
              $(".menu li").click(function(){
    
                   var index=$(this).attr("relation");
                   $("#"+index).removeClass("hide").siblings().addClass("hide");
                   $(this).addClass("current").siblings().removeClass("current");
    
              });
    
    
        </script>
    </html>
    View Code

    模态对话框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
            }
            .back{
                background-color: wheat;
                height: 2000px;
            }
    
            .shade{
                position: fixed;
                top: 0;
                bottom: 0;
                left:0;
                right: 0;
                background-color: darkgray;
                opacity: 0.4;
            }
    
            .hide{
                display: none;
            }
    
            .models{
                position: fixed;
                top: 50%;
                left: 50%;
                margin-left: -100px;
                margin-top: -100px;
                height: 200px;
                 200px;
                background-color: white;
    
            }
        </style>
    </head>
    <body>
    <div class="back">
        <input id="ID1" type="button" value="click" onclick="action1(this)">
    </div>
    
    <div class="shade hide"></div>
    <div class="models hide">
        <input id="ID2" type="button" value="cancel" onclick="action2(this)">
    </div>
    
    
    <script src="jquery.min.js"></script>
    <script>
    
        function action1(self){
            $(self).parent().siblings().removeClass("hide");
    
        }
        function action2(self){
            //$(self).parent().parent().children(".models,.shade").addClass("hide")
    
            $(self).parent().addClass("hide").prev().addClass("hide")
    
        }
    </script>
    </body>
    </html>
    View Code

    复制样式条

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    </head>
    <body>
                <div class="outer">
                    <div class="item">
                            <input type="button" value="+">
                            <input type="text">
                    </div>
                </div>
    
    
    <script src=jquery.min.js></script>
        <script>
    
                function add(self){
                    // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
                     var $clone_obj=$(self).parent().clone();
                     $clone_obj.children(":button").val("-").attr("onclick","removed(this)");
                     $(self).parent().parent().append($clone_obj);
                }
               function removed(self){
    
                   $(self).parent().remove()
    
               }
    
    
    /*
            $("[value='+']").click(function(){
    
                 var $clone_obj=$(this).parent().clone();
                     $clone_obj.children(":button").val("-").attr("class","mark");
                     $(this).parent().parent().append($clone_obj);
    
            });
    
    
    
            $(".outer").on("click",".item .mark",function(){
    
                console.log($(this));  // $(this):  .item .mark标签
                $(this).parent().remove()
    
            })
    
    */
    
    
        </script>
    </body>
    </html>
    View Code

    注册验证

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    
    
    <form class="Form" id="form">
    
        <p><input class="v1" type="text" name="username" mark="用户名"></p>
        <p><input class="v1" type="text" name="email" mark="邮箱"></p>
        <p><input type="submit" value="submit"></p>
    
    </form>
    
    <script src="jquery.min.js"></script>
    <script>
    
    
        $("#form :submit").click(function(){
              flag=true;
    
              $("#form .v1").each(function(){
    
              $(this).next("span").remove();// 防止对此点击按钮产生多个span标签
    
              var value=$(this).val();
    
              if (value.trim().length==0){
                     var mark=$(this).attr("mark");
                     var ele=document.createElement("span");
                     ele.innerHTML=mark+"不能为空!";
                     $(this).after(ele);
                     $(ele).prop("class","error");// DOM对象转换为jquery对象
                     flag=false;
                     return false ; //-------->引出$.each的return false注意点
                }
    
            });
    
            return flag
        });
    
    
    
    
    </script>
    </body>
    </html>
    View Code

    拖动面板

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid #ddd; 600px;position: absolute;">
            <div id="title" style="background-color: black;height: 40px;color: white;">
                标题
            </div>
            <div style="height: 300px;">
                内容
            </div>
        </div>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
        $(function(){
            // 页面加载完成之后自动执行
            $('#title').mouseover(function(){
                $(this).css('cursor','move');
            }).mousedown(function(e){
                //console.log($(this).offset());
                var _event = e || window.event;
                // 原始鼠标横纵坐标位置
                var ord_x = _event.clientX;
                var ord_y = _event.clientY;
    
                var parent_left = $(this).parent().offset().left;
                var parent_top = $(this).parent().offset().top;
    
                $(this).on('mousemove', function(e){
                    var _new_event = e || window.event;
                    var new_x = _new_event.clientX;
                    var new_y = _new_event.clientY;
    
                    var x = parent_left + (new_x - ord_x);
                    var y = parent_top + (new_y - ord_y);
    
                    $(this).parent().css('left',x+'px');
                    $(this).parent().css('top',y+'px');
    
                })
            }).mouseup(function(){
                $(this).off('mousemove');
            });
        })
    </script>
    </body>
    </html>
    View Code

    轮播图

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="jquery-3.1.1.js"></script>
        <title>Title</title>
    
    
        <style>
    
                .outer{
                     790px;
                    height: 340px;
                    margin: 80px auto;
                    position: relative;
                }
    
                .img li{
                     position: absolute;
                     list-style: none;
                     top: 0;
                     left: 0;
                     display: none;
                }
    
               .num{
                   position: absolute;
                   bottom: 18px;
                   left: 270px;
                   list-style: none;
    
    
               }
    
               .num li{
                   display: inline-block;
                    18px;
                   height: 18px;
                   background-color: white;
                   border-radius: 50%;
                   text-align: center;
                   line-height: 18px;
                   margin-left: 4px;
               }
    
               .btn{
                   position: absolute;
                   top:50%;
                    30px;
                   height: 60px;
                   background-color: lightgrey;
                   color: white;
    
                   text-align: center;
                   line-height: 60px;
                   font-size: 30px;
                   opacity: 0.7;
                   margin-top: -30px;
    
                   display: none;
    
               }
    
               .left{
                   left: 0;
               }
    
               .right{
                   right: 0;
               }
    
              .outer:hover .btn{
                  display: block;
              }
    
            .num .active{
                background-color: red;
            }
        </style>
    
    </head>
    <body>
    
    
          <div class="outer">
              <ul class="img">
                  <li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li>
                  <li><a href=""><img src="img/2.jpg" alt=""></a></li>
                  <li><a href=""><img src="img/3.jpg" alt=""></a></li>
                  <li><a href=""><img src="img/4.jpg" alt=""></a></li>
                  <li><a href=""><img src="img/5.jpg" alt=""></a></li>
                  <li><a href=""><img src="img/6.jpg" alt=""></a></li>
              </ul>
    
              <ul class="num">
                  <!--<li class="active"></li>-->
                  <!--<li></li>-->
                  <!--<li></li>-->
                  <!--<li></li>-->
                  <!--<li></li>-->
                  <!--<li></li>-->
              </ul>
    
              <div class="left  btn"> < </div>
              <div class="right btn"> > </div>
    
          </div>
    <script src="jquery-3.1.1.js"></script>
    <script>
        var i=0;
    //  通过jquery自动创建按钮标签
    
        var img_num=$(".img li").length;
    
        for(var j=0;j<img_num;j++){
            $(".num").append("<li></li>")
        }
    
        $(".num li").eq(0).addClass("active");
    
    
    // 手动轮播
    
        $(".num li").mouseover(function () {
            i=$(this).index();
            $(this).addClass("active").siblings().removeClass("active");
    
            $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)
    
        });
    
    
    // 自动轮播
        var c=setInterval(GO_R,1500);
    
        function GO_R() {
    
            if(i==img_num-1){
                i=-1
            }
             i++;
             $(".num li").eq(i).addClass("active").siblings().removeClass("active");
             $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
    
        }
    
    
        function GO_L() {
            if(i==0){
                i=img_num
            }
             i--;
             $(".num li").eq(i).addClass("active").siblings().removeClass("active");
             $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);  // fadeIn,fadeOut单独另开启的线程
    
    
        }
        $(".outer").hover(function () {
            clearInterval(c)
        },function () {
            c=setInterval(GO_R,1500)
        });
    
    
    
    // button 加定播 
        $(".right").click(GO_R);
        $(".left").click(GO_L)
    
    
    
    </script>
    </body>
    </html>
    View Code
  • 相关阅读:
    关于使用表格制作页面
    0728关于html的几个基础知识点
    实验四 主存空间的分配和回收模拟
    实验三同学评论http://home.cnblogs.com/u/MyDring/
    实验三 进程调度模拟程序
    实验二报告
    实验一报告
    0909操作系统
    log4j的配置文件的编写
    随机产生数,字母
  • 原文地址:https://www.cnblogs.com/you0329/p/7327219.html
Copyright © 2011-2022 走看看