Python自動化開發課堂筆記【Day15】- jQuery

時間 2019-12-07

標籤 python 自動化開發課堂筆記 Day15 jquery 欄目 Python 简体版

原文原文鏈接

jQueryjavascript

1. jQuery是繼prototype以後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!css

2. 它是輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各類瀏覽器html

3. jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，而且方便地爲網站提供AJAX交互。java

4. jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。python

jQuery對象jquery

　　jQuery 對象就是經過jQuery包裝DOM對象後產生的對象。jQuery 對象是 jQuery 獨有的. 若是一個對象是 jQuery 對象, 那麼它就能夠使用 jQuery 裏的方法: $(「#test」).html();瀏覽器

$("#test").html() 
   
意思是指：獲取ID爲test的元素內的html代碼。其中html()是jQuery裏的方法 

這段代碼等同於用DOM實現代碼： document.getElementById(" test ").innerHTML; 

雖然jQuery對象是包裝DOM對象後產生的，可是jQuery沒法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery裏的方法.亂使用會報錯

約定：若是獲取的是 jQuery 對象, 那麼要在變量前面加上$. 

var $variable = jQuery 對象
var variable = DOM 對象

$variable[0]：jquery對象轉爲dom對象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基礎語法：$(selector).action()

選擇器和篩選器app

1. 選擇器框架

a.基本選擇器 --- 

b.層級選擇器 --- 

c.基本篩選器 --- 

d.屬性選擇器 --- 

e.表單選擇器 --- 表單屬性選擇器 ---:enabled   :disabled   :checked   :selected

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")$('[id="div1"]')   $('["alex="sb"][id]')$("[type='text']")----->$(":text")         注意只適用於input標籤  : $("input:checked")

f.

<body>

<form>
    <input type="checkbox" value="123" checked>
    <input type="checkbox" value="456" checked>


  <select>
      <option value="1">Flowers</option>
      <option value="2" selected="selected">Gardens</option>
      <option value="3" selected="selected">Trees</option>
      <option value="3" selected="selected">Trees</option>
  </select>
</form>


<script src="jquery.min.js"></script>
<script>
    // console.log($("input:checked").length);     // 2

    // console.log($("option:selected").length);   // 只能默認選中一個,因此只能lenth:1

    $("input:checked").each(function(){

        console.log($(this).val())
    })

</script>


</body>

2.篩選器dom

1. 過濾篩選器  

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

2. 查找篩選器

查找子標籤：            $("div").children(".test")      $("div").find(".test")  
                               
向下查找兄弟標籤：       $(".test").next()      $(".test").nextAll()     $(".test").nextUntil() 
                           
向上查找兄弟標籤：       $("div").prev()     $("div").prevAll()       $("div").prevUntil()   

查找全部兄弟標籤：       $("div").siblings()  
              
查找父標籤：            $(".test").parent()      $(".test").parents()     $(".test").parentUntil()

操做元素

1.事件

　　a. 頁面載入

ready(fn)  // 當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數。
$(document).ready(function(){}) -----------> $(function(){})

　　b. 事件綁定

//語法:  標籤對象.事件(函數)    
eg: $("p").click(function(){})

　　c. 事件委派

$("").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>

2. 屬性操做

--------------------------CSS類
$("").addClass(class|fn)
$("").removeClass([class|fn])

--------------------------屬性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();

--------------------------HTML代碼/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])

---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})

3. each循環

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)代指當前循環標籤。

4. 文檔節點處理

//建立一個標籤對象
    $("<p>")


//內部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替換
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//刪除

    $("").empty()
    $("").remove([expr])

//複製

    $("").clone([Even[,deepEven]])

5. 動畫效果

　　a. 顯示隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>

$(document).ready(function() {
    $("#hide").click(function () {
        $("p").hide(1000);
    });
    $("#show").click(function () {
        $("p").show(1000);
    });

//用於切換被選元素的 hide() 與 show() 方法。
    $("#toggle").click(function () {
        $("p").toggle();
    });
})

    </script>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>


    <p>hello</p>
    <button id="hide">隱藏</button>
    <button id="show">顯示</button>
    <button id="toggle">切換</button>

</body>
</html>

　　b. 滑動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>

    <div id="slideDown">出現</div>
    <div id="slideUp">隱藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>

　　c. 淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(1000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);

   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

　　d. 回調函數

<!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>

　　e. 拖動面板

<!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>

　　f. 輪播圖

<!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" 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>