python_day15_jquery

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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             width: 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; width: 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             width: 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             width: 200px;
12             height: 200px;
13             background-color: rebeccapurple;
14         }
15         .box2{
16             width: 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             width: 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             width: 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             width: 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;
              width: 20%;
              background-color: gainsboro;
              text-align: center;
              float: left;
          }
          .content{
              height: 500px;
              width: 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;
            width: 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;
            width: 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;width: 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{
                width: 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;
               width: 18px;
               height: 18px;
               background-color: white;
               border-radius: 50%;
               text-align: center;
               line-height: 18px;
               margin-left: 4px;
           }

           .btn{
               position: absolute;
               top:50%;
               width: 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" ></a></li>
              <li><a href=""><img src="img/2.jpg" ></a></li>
              <li><a href=""><img src="img/3.jpg" ></a></li>
              <li><a href=""><img src="img/4.jpg" ></a></li>
              <li><a href=""><img src="img/5.jpg" ></a></li>
              <li><a href=""><img src="img/6.jpg" ></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

 


以上是关于python_day15_jquery的主要内容,如果未能解决你的问题,请参考以下文章

可以直接拿来用的15个jQuery代码片段

python_day12_html

Python_day_01

PYTHON_DAY_05

python_day14_前端_JS

铁乐学Python_day09_函数