第四篇前端學習之JQuery基礎

時間 2019-12-10

標籤第四前端學習 jquery 基礎欄目 JQuery 简体版

原文原文鏈接

一 jQuery是什麼？

jQuery就是一個JavaScript的庫。javascript

<1> jQuery由美國人John Resig建立，至今已吸引了來自世界各地的衆多 javascript高手加入其team。css

<2>jQuery是繼prototype以後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!html

<3>它是輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各類瀏覽器（IE6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+);前端

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

　　AJAX：實現前端向後端發送數據——很是重要python

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

參考JQuery文檔：http://jquery.cuishifeng.cn/web

二什麼是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 對象    定義jquery對象時，變量前就加個 $符號，明確告訴人家這是jQuery對象
var variable = DOM 對象

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

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

幸福生活的開始從導入jQuery庫開始

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

    <!--要使用JQuery,必選先經過script引入jQueryku才行-->
    <script src="jquery-3.3.1.js"></script>
    <script>
        // $符號：就表明JQuery對象，裏面有無窮盡的語法，全在$裏
        // 找到div標籤： $("div")
        // 對div標籤進行樣式設置：$("div").css("color","red");
        
        $("div").css("color","red");
        // 固然也能夠用jQuery，可是用$符號更簡單
        jQuery("div").css("color","red");

    </script>
</body>
</html>

三尋找元素(選擇器和篩選器)

3.1 選擇器

3.1.1 基本選擇器

$("*"): 對全部標籤進行操做
$("#id"):經過id找標籤
$(".class") ：經過class屬性找
$("element") ：經過標籤名字找
$(".class,p,div")：能夠一次找多個元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>hello</div>
    <p id="p1">ppp</p>
    <a href="">click</a>

    <div class="outer">
        outers
        <div class="inner">inner</div>
    </div>

    <div class="outer">helllllllo</div>
    <!--要使用JQuery,必選先經過script引入jQueryku才行-->
    <script src="jquery-3.3.1.js"></script>
    <script>

        // $("*").css("color","red");
        // $("#p1").css("color","blue");
        // $(".inner").css("color","green");
        // $(".outer").css("color","brown"); // jQuery本身作了遍歷
        // $(".inner,p,div").css("color","red");
        $("p").css("color","red"); // 經過element找，即經過標籤的名字去找



    </script>
</body>
</html>

示例

3.1.2 層級選擇器:處理層級嵌套, 後代（兒子）選擇器

$(".outer div")  ：後代選擇器
$(".outer>div")  ：子代選擇器
$(".outer+div")  ：向下找緊挨着的兄弟標籤
$(".outer~div")  ：向下找兄弟標籤，能夠不緊挨着outer的，也能找到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>hello</div>
    <p id="p1">ppp</p>
    <a href="">click</a>

    <div class="outer">
        outers
        <div class="inner">
            inner
            <p>innerP</p>
        </div>
        <p>alex</p>
    </div>
    <div>lalal</div>
    <p>隔着一個，向下也能找到兄弟標籤</p>
    <p>向下緊挨着的兄弟標籤</p>

    <!--<div class="outer">helllllllo</div>-->
    <!--要使用JQuery,必選先經過script引入jQueryku才行-->
    <script src="jquery-3.3.1.js"></script>
    <script>
        // 後代選擇器：
        // 找到class屬性值爲outer的下面的全部 p 標籤,不論是子代，孫子代，仍是重孫子代都找到
        $(".outer p").css("color","red");
        // 子代選擇器：
        // 找到找到class屬性值爲outer的下面的全部 p 標籤且找到的p標籤都是outer的兒子代
        $(".outer > p").css("color","red");
        // 向下緊挨着的兄弟標籤
        // $(".outer + p").css("color","blue");
        // 向下找兄弟標籤（同級的），能夠不緊挨着
        $(".outer ~ p").css("color","green");

    </script>
</body>
</html>

層級選擇器示例

3.1.3 基本篩選器

選擇出後再過濾一遍的意思

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

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

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    <li>777</li>
    <li>888</li>
</ul>

<script src="jquery-3.3.1.js"></script>
<script>
    console.log($("li"));
   // 對第一個li標籤操做
    $("li:first").css("color","red");
    // 對最後一個li標籤操做
    $("li:last").css("color","red");
//    對其餘第n個操做
    $("li:eq(1)").css("color","blue");
    // 控制偶數行，從0開始的
    $("li:even").css("color","green");
    //控制奇數行
    $("li:odd").css("color","brown");
    //篩選出的是大於索引爲3的標籤，不包含索引3
    $("li:gt(3)").css("color","brown");
    //篩選出的是小於索引爲3的標籤，不包含索引3
    $("li:lt(3)").css("color","red");


</script>
</body>
</html>

基本篩選器

3.1.4 屬性選擇器

經過標籤的屬性來查找屬性。本身也能夠添加屬性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>hello</div>
    <p id="p1" alex="bbb">ppp屬性選擇器</p>
    <p id="p2" alex="bbb">ppp屬性選擇器</p>
    <p id="p3" alex="bbb">ppp屬性選擇器</p>
    <a href="">click</a>

    <!--<div class="outer">helllllllo</div>-->
    <!--要使用JQuery,必選先經過script引入jQueryku才行-->
    <script src="jquery-3.3.1.js"></script>
    <script>
        // 經過屬性選擇器查找
        $("[alex='bbb']").css("color","red");
    //    若是有多個屬性標籤屬性名相同，能夠多層選擇
        $("[alex='bbb'][id='p2']").css("color","blue");
    </script>
</body>
</html>

屬性選擇器

3.1.5 表單選擇器

$("[type='text']")----->$(":text")         注意 ：只適用於input標籤
$("input:checked")

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

<input type="text">
<input type="checkbox">
<input type="submit">

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

    // $("[type='text']").css("width","200px");
    //只有input表單選擇器才能夠經過冒號的形式篩選
    $(":text").css("width","400px");

</script>
</body>
</html>

表單選擇器

實例之左側菜單

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

    <style>
          .menu{
              height: 500px;
              width: 30%;
              background-color: gainsboro;
              float: left;
          }
          .content{
              height: 500px;
              width: 70%;
              background-color: rebeccapurple;
              float: left;
          }
         .title{
             line-height: 50px;
             background-color: #425a66;
             color: forestgreen;}


         .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>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜單三</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>

    </div>
    <div class="content"></div>

</div>
<script src="jquery-3.2.1.js"></script>
<script>
           $(".item .title").click(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>
    <script>
           function tab(self){
               var index=$(self).attr("xxx");
               $("#"+index).removeClass("hide").siblings().addClass("hide");
               $(self).addClass("current").siblings().removeClass("current");

           }
    </script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .tab_outer{
            margin: 0px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            /*border: 1px solid red;*/
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .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: darkgray;
            color: yellow;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
      <div class="tab_outer">
          <ul class="menu">
              <li xxx="c1" class="current" onclick="tab(this);">菜單一</li>
              <li xxx="c2" onclick="tab(this);">菜單二</li>
              <li xxx="c3" onclick="tab(this);">菜單三</li>
          </ul>
          <div class="content">
              <div id="c1">內容一</div>
              <div id="c2" class="hide">內容二</div>
              <div id="c3" class="hide">內容三</div>
          </div>

      </div>
</body>
</html>

View Code

3.2 篩選器

3.2.1 過濾篩選器

與3.1.3基本篩選器實現的功能同樣，可是推薦之後都用過濾篩選器這種方式實現。應該篩選條件是寫在外面的，更靈活

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

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

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    <li>777</li>
    <li>888</li>
</ul>

<input type="text">
<input type="checkbox">
<input type="submit">

<script src="jquery-3.3.1.js"></script>
<script>
    $("li").eq(2).css("color","red");
    $("li").first().css("color","red");
    $("li").last().css("color","red");



</script>
</body>
</html>

過濾篩選器示例

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

    <script src="jquery-3.3.1.js"></script>
    <script>
        // 查詢某標籤是否具備某屬性
       console.log($("li").hasClass("title2"));
    </script>
</body>
</html>

查詢某標籤是否具備某屬性

3.2.2 查找篩選器（基本四組）

很是重要，沒有項目不用到這種篩選方法。

1. 找子代
$("div").children(".test")
$("div").find(".test")  

2.找下一個
$(".test").next()    
$(".test").nextAll()    
$(".test").nextUntil() 

3. 找上一個，徹底與next組對應的
$("div").prev()  
$("div").prevAll()  
$("div").prevUntil()   

4.
$(".test").parent()  
$(".test").parents()  
$(".test").parentUntil() 

$("div").siblings()

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


<p id="p1" alex="sb">pppp</p>
<p id="p2" alex2="sb">pppp2</p>

<div class="outer"> outer
    <div class="inner">
        inner
        <p>孫子p標籤</p>
    </div>
    <p>兒子p標籤</p>
</div>
<div class="outer2">Yuan</div>
<p>先走一步</p>


<ul>
    <li>111</li>
    <li class="begin">222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    <li id="end">777</li>
    <li>888</li>
</ul>

<input type="text">
<input type="checkbox">
<input type="submit">

<script src="jquery-3.3.1.js"></script>
<script>
    // 1. 根據一個已知的標籤找到它的子代標籤
    // 只找子標籤
    $(".outer").children("p").css("color","red");
    // 找到.outer下的全部p標籤
    $(".outer").find("p").css("color","red");

//    2.next組查找
//    找到索引爲2的li標籤的下一個標籤
    $("li").eq(2).next().css("color","red");
//    找到索引爲2的li標籤後面的全部標籤
    $("li").eq(2).nextAll().css("color","red");
//    從索引爲2的li標籤開始，一直找到 id=end的li標籤，左開右開區間）
    $("li").eq(2).nextUntil("#end").css("color","red");

//    3.prev組查找：向上找
//    找到索引爲2的li標籤的上一個標籤
    $("li").eq(2).prev().css("color","red");

    //    找到索引爲2的li標籤上面的全部標籤
    $("li").eq(2).prevAll().css("color","red");

    //    從索引爲5的li標籤開始，一直找到 id=end的li標籤，左開右開區間）
    $("li").eq(5).prevUntil(".begin").css("color","red");

//    4. parent 組查找
    $(".outer .inner p").parent().css("color","red");
    $(".outer .inner p").parents().css("color","red");


    // 經常使用
    $(".outer .inner p").parentsUntil("body").css("color","red");

// siblings 用的最多的. 找兄弟標籤，上下的所有兄弟標籤都找出來，除了.outer
   $(".outer").siblings().css("color", "red");
    
</script>
</body>
</html>

示例

示例

四操做元素(屬性，css，文檔處理)

4.1 屬性操做

--------------------------屬性： attr 和 prop的使用方法和做用是徹底同樣的。區別只在於，attr既能處理固有屬性，又能處理自定義屬性，而prop只能處理固有屬性
$("").attr(); -->經常使用的屬性標籤：既能夠取到屬性值，也能夠給屬性設置值；既能夠處理固有屬性，也能夠處理自定義屬性，推薦attr只用來處理自定義屬性
$("").removeAttr();
$("").prop();-->獲取屬性，若是存在返回true,若是不存在返回false,用於判斷使用；只能處理固有的屬性，因此推薦對全部固有屬性，都用prop處理
$("").removeProp();
--------------------------CSS類
$("").addClass(class|fn)   --> 見左側菜單實例
$("").removeClass([class|fn])-->見左側菜單實例

--------------------------HTML代碼/文本/值
要處理的標籤內部若是是html,就得用html()處理；
要處理的標籤內部若是是text,就得用text()處理；
$("").html([val|fn])   --> 用html,能夠區別出裏面是文本仍是標籤，而後進行替換
$("").text([val|fn])   --> text，（）裏的內容所有當作純文原本處理，去替換
$("").val([val|fn|arr])--> val不能隨便用，只能處理固有屬性：input,option，select，表單類都有value屬； 能夠獲取值也能夠替換原來的值

---------------------------
$("").css("color","red")

需求：

常見的web項目左側有個菜單，點擊某個菜單，該菜單下面的子菜單顯示，其餘菜單隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2. 再處理佈局-->
    <style>
        .outer{
            height: 1000px;
            width: 100%;
            background-color: gray;
        }

        .menu{
            float: left;
            background-color: rebeccapurple;
            width: 30%;
            height: 500px;
        }
        .title{
            background-color: lightgreen;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>

    <!--步驟：1. 先寫html-->
    <div class="outer">
        <div class="menu">
            <div class="item">
                <div class="title" onclick="show(this)">菜單一</div>
                <!--默認進來菜單一不是摺疊的,能夠去掉hide屬性，若是是摺疊的，就像下面那樣寫上hide-->
                <div class="con hide">
                    <div>111</div>
                    <div>111</div>
                    <div>111</div>
                </div>
            </div>

            <div class="item">
                <div class="title" onclick="show(this)">菜單二</div>
                <div class="con hide">
                    <div>222</div>
                    <div>222</div>
                    <div>222</div>
                </div>
            </div>

            <div class="item">
                <div class="title" onclick="show(this)">菜單三</div>
                <div class="con hide">
                    <div>333</div>
                    <div>333</div>
                    <div>333</div>
                </div>
            </div>
        </div>
        <div class="content"></div>
    </div>

    <!--3.JQuery實現功能-->
    // 先引入Jquery
    <script src="jquery-3.3.1.js"></script>
    <script>
        // this表示找到當前點擊的元素，function函數裏用self接
        function show(self) {
            // 1）實現點哪一個菜單，該菜單下面的子菜單展現出來；
            // 用到JQuery的屬性操做知識了，找到當前點擊的菜單，移除它的hide屬性
            $(self).next().removeClass("hide");
            // 2）同時其餘菜單的子菜單所有摺疊
            // 先找到當前點擊菜單的父元素，再經過siblings找到父元素的全部兄弟元素，而後找到全部兄弟元素下面的子元素
            // 裏的 con屬性，爲其增長 hide屬性
            // 若是沒有hide屬性，就增長，若是已經有hide屬性就不增長
            $(self).parent().siblings().children(".con").addClass("hide");
        }
    </script>
</body>
</html>

左側菜單顯示摺疊實例：addClass, removeClass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div1" con="c1"></div>
    <input type="checkbox" checked="checked"> 是否可見1
    <input type="checkbox" > 是否可見2
    <script src="jquery-3.3.1.js"></script>
    <script>

        // 1. attr()屬性
        // attr屬性，取出con屬性的值
        console.log($("div").attr("con"));
        // attr屬性，給con屬性設置值；原本沒有con1屬性，還能夠新增這個屬性並設置屬性值
        console.log($("div").attr("con","c2"));
        console.log($("div").attr("con1","c3"));

    //    2.取input標籤的屬性，看prop和attr的區別
        console.log($(":checkbox:first").attr("checked"));
        console.log($(":checkbox:last").attr("checked"));

        // prop返回的是屬性的值，存在是true,不存在是false，方便用於判斷
        // prop主要用來處理固有屬性，好比上面自定義的con屬性找不到的；
        // 若是是本身定義的屬性，都用attr,更好的區分固有屬性和自定義屬性
        console.log($(":checkbox:first").prop("checked")); // attr和prop括號內都是些的屬性名稱，而不是具體的屬性值
        console.log($(":checkbox:last").prop("checked"));
        // 自定義屬性，找不到的
        console.log($(":checkbox:last").prop("con"));
        
    </script>
</body>
</html>

attr和prop的區別

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div1" con="c1"></div>
    <input type="checkbox" checked="checked"> 是否可見1
    <input type="checkbox" > 是否可見2  </br>
    <input type="text" value="請輸入你的大名">
    <div value = "234">測試value是否能夠檢測到</div>

    <div id="id1">
        uuuuu
        <p>ppppp</p>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        // html()把標籤裏面的全部內容都取出來了，有其餘標籤也會取出來
        console.log($("#id1").html());
        // text()只會把下面的文本內容取出來，帶標籤的文本，也只會把文本取出來
        console.log($("#id1").text());
        // html()裏面若是加了內容，會把下面原理全部的內容都會用新內容替換，至關於從新設值了
        console.log($("#id1").html("<h1>Ma Ge</h1>>"));
        console.log($("#id1").html("用文本替換"));

        // 若是是text(),就會把text裏面的全部內容都當作純文原本處理的
        // console.log($("#id1").text("<h1>Ma Ge</h1>>"));


    //    val不能隨便用，只能處理固有屬性：input,option，select，表單類都有value屬性
        console.log($(":text").val());
        // 替換掉原來的值
        console.log($(":text").val("把你的大名換掉"));

        console.log($(":text").next().val());  // div自己沒有value屬性，因此取不到

    //    css 修改樣式
    //    css都是一個個鍵值對，第一個參數是屬性，第二個參數是值
        $("div").css("color","red");
    //    若是想設置多個樣式能夠用字典的方式作
        $("div").css({"color":"red","background-color":"green"});

        
    </script>
</body>
</html>

示例

jQuery循環

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

    <p>哦哦哦哦哦</p>
    <p>哦哦哦哦哦</p>
    <p>哦哦哦哦哦</p>
    <p>哦哦哦哦哦</p>
    <p>哦哦哦哦哦</p>

    <script src="jquery-3.3.1.js"></script>
    <script>
        arr = [11,22,33,44,55];

        //jQuery的循環方式1

        // $.each(obj:遍歷對象； callback：就是函數)
        // function(x,y):兩個參數，x:表示索引，y:表示索引對應的值
        $.each(arr,function (x,y) {
            console.log(x);
            console.log(y);
        });


        //jQuery的循環方式二，也是最經常使用的方式
        // 原理：
        // 1. 一般都是先拿到一個要遍歷的標籤對象集合，$("p")：即先找到要遍歷的標籤集合
        // 2. 而後對該集合裏的標籤進行遍歷: .each(function(){})，這個each裏就只有一個參數了，直接寫function就行
        // 由於要遍歷的對象是$("p")已經在前面了，each就是對它進行遍歷的，全部只有一個參數

        //.each其實就已經對拿到的標籤集合進行了處理，因此接下來關鍵的就是如何表示每個標籤，如何對遍歷到的每一個標籤進行處理
        // 答案就是強大的this, $(this)就表示遍歷到的標籤集合裏你當前要操做的標籤；
        $("p").each(function () {
            // $(this) 就是用來表示集合$("p")裏每個標籤，
            console.log($(this))  //$(this) 就表明當前的標籤對象
            $(this).html("<h1>把哦哦哦哦哦改爲嘎嘎嘎嘎嘎</h1>")
        })

        // JQuery和js能夠混搭着用
        // for(var i = 0; i<arr.length;i++){
        //     $("p").eq(i).html(arr[i])
        // }

    </script>
</body>
</html>

jQuery的兩種循環方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="selectAll()">全選</button>
    <button onclick="reverse()">反選</button>
    <button onclick="cancle()">取消</button>

    <table border="1px">
        <tr >
            <td><input type="checkbox"></td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>

        <tr >
            <td><input type="checkbox"></td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
        </tr>

        <tr >
            <td><input type="checkbox"></td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
        </tr>
    </table>

    <script src="jquery-3.3.1.js"></script>
    <script>
        // 仍是要先綁定一個函數，這個綁定方式仍是按照js的綁定方式走的

        // 全選
        function selectAll() {
            // 在函數內部用jQuery進行遍歷，而後把checked屬性改成true
            $(":checkbox").each(function () {
                $(this).prop("checked",true)
            })
        }

        //反選
        function reverse() {
            $(":checkbox").each(function () {
                if ($(this).prop("checked")){
                    $(this).prop("checked",false)
                }else{
                    $(this).prop("checked",true)
                }

            })

        }

        // 取消
        function cancle() {
            $(":checkbox").each(function () {
                $(this).prop("checked",false)
            })

        }
    </script>

</body>
</html>

jQuery之正反選實例

模態：

就是執行一個操做，彈出一個透明頁遮擋，讓透明頁底部的元素不可操做，透明頁上面的元素能夠操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            height: 1800px;
            background-color: antiquewhite;
        }

        .shade{
            position: fixed;
            /*佔滿屏，設置下面四個參數爲0*/
            top:0;
            left:0;
            right: 0;
            bottom:0;
            background-color: gray;
            opacity: 0.7; /*透明度*/
        }

        .model{
            width:200px;
            height: 200px;
            background-color: bisque;
            border: #FF0000;
            /*居中*/
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;

        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>

    <!-- 第一層：正常顯示的網頁內容-->
    <div class="content">
        <button onclick="show(this)">show</button>
    </div>

    <!--第二層：遮擋層：是有透明度的，且固定住不可以讓content內容再上下滑動了-->
    <div class="shade hide"></div>

    <!--第三層：點擊show後顯示在最上面的對話框-->
    <div class="model hide">
        <button onclick="cancle(this)">取消</button>
    </div>

    <script src="jquery-3.3.1.js"></script>
    <script>
        function show(self) {
            $(self).parent().siblings().removeClass("hide")
        }

        function cancle(self) {
            // 方式1：鏈式尋找法操做
            $(self).parent().addClass("hide").prev().addClass("hide");
            
            // 方式2：先找到當前元素的父級，再找到父級的父級，而後父級下面的子級裏有shade屬性的標籤，執行操做
            $(self).parent().parent().children(".models,.shade").addClass("hide")


        }

    </script>

</body>
</html>

模態實例

4.2 文檔處理

用於處理節點的增刪改查

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


//內部插入  -- 插入的對象變成了兒子
　　　
　　append是加到當前標籤下面
    $("").append(content|fn)  ----->$("p").append("<b>Hello</b>");  就是把append裏的內容添加到前面的對象（$("p")）裏面去，= 給前面的對象加了個兒子
    $("").appendTo(content)   ----->$("p").appendTo("div"); 與append功能徹底同樣，只是寫法不一樣，按正常順序往下寫的；將$("p")追加到"div"的下面
    prepend是加到當前標籤的上面
　　 $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");將對象添加到$("p")的前面；
    $("").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]])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c1">
        <p>P級父標籤</p>
    </div>

    <button class="b1">add</button>
    <script src="jquery-3.3.1.js"></script>
    <script>

        // append 內部插入 ---插入到下面

        // 點擊add 按鈕，給p標籤下面添加一個 h1標籤
        // 先找到button標籤，給綁定一個click事件，而後給click事件一個函數，執行某功能
        $("button").click(function () {
            var $ele = $("<h1></h1>");   // 定義一個jquery變量，令該變量是一個h1標籤；通變量寫活了
            $ele.html("Hello World").css("color","red"); // 給該標籤對象賦值

            $(".c1").append($ele);  // 將$els對象添加到 p級標籤的下面

               // appendTo ：將要添加的對象$ele添加到".c1"的下面，按順序寫，更好看懂
        // 實現的功能與append是徹底同樣的，只是寫法不一樣
            $ele.appendTo(".c1");
        });


        // prepend 內部插入--插入到上面
        
        // 點擊add 按鈕，給p標籤下面添加一個 h1標籤
        // 先找到button標籤，給綁定一個click事件，而後給click事件一個函數，執行某功能
        $(".b1").click(function () {
            var $ele1 = $("<h1></h1>");   // 定義一個jquery變量，令該變量是一個h1標籤；通變量寫活了
            $ele1.html("加到當前標籤的上面").css("color","green"); // 給該標籤對象賦值

            $(".c1").prepend($ele1);  // 將$els對象添加到 p級標籤的下面

            $ele1.prependTo(".c1");
        });

        // 第二種方式，直接append，只不過寫死了
        $(".c1").append("<h2>直接添加h2標籤</h2>").css("color","green");

    </script>
</body>
</html>

內部插入示例append, prepend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c1">
        <p>P級父標籤</p>
    </div>

    <button class="b1">add</button>
    <script src="jquery-3.3.1.js"></script>
    <script>

        // after 外部插入 ---插入到當前對象的下面，變成了二弟

        $("button").click(function () {
            var $ele = $("<h1></h1>");
            $ele.html("插入到當前對象的下面，變成了二弟").css("color","red");
            // 插入方式1
            $(".c1").after($ele);
            // 插入方式2
            // $ele.insertAfter(".c1");
        });


        // before 外部插入--插入到當前對象的上面，變成了大哥

        $(".b1").click(function () {
            var $ele1 = $("<h1></h1>");
            $ele1.html("插入到當前對象的上面，變成了大哥").css("color","green");
            // $(".c1").before($ele1);

            $ele1.insertBefore(".c1");
        });



    </script>
</body>
</html>

外部插入before,after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c1">
        <p>P級父標籤</p>
    </div>

    <button class="b1">add</button>
    <script src="jquery-3.3.1.js"></script>
    <script>

        $(".b1").click(function () {
            var $ele1 = $("<h1></h1>");
            $ele1.html("替換掉P標籤").css("color","green");
            $(".c1").replaceWith($ele1);
        });

    </script>
</body>
</html>

替換：replaceWith

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c1">
        <p>P級父標籤</p>
        <h1>h1能清空嗎</h1>
    </div>

    <button class="b1">刪除</button>
    <script src="jquery-3.3.1.js"></script>
    <script>
        
        $(".b1").click(function () {
            // empty：h1這個當前標籤還在，只是下面的p標籤沒了
            $(".c1 h1").empty();

            // remove：c1這個當前標籤也被刪除了
            $(".c1").remove();
        });

    </script>
</body>
</html>

刪除和清空：empty和remove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c1">
        <p>P級父標籤</p>
        <h1>h1能清空嗎</h1>
    </div>

    <button class="b1">複製</button>
    <script src="jquery-3.3.1.js"></script>
    <script>

        $(".b1").click(function () {
            $(".c1").clone().insertAfter(".c1")
        });

    </script>
</body>
</html>

複製：clone

可是，這個clone有個問題，執行添加屢次，是成倍的複製的，下面的示例來解決這個問題

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

    <div class="outer">
        <div class="item">
            <button onclick="clone_obj(this)"> + </button>
            <input type="text">
        </div>
    </div>


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

        function conle_obj(self) {
            // 定義個變量，經過this能夠找到本標籤，而後找到本標籤的父級item,複製
            var $conle_object = $(self).parent().clone();
            // 而後將複製的標籤插入到.outer的下面
            $conle_object.insertAfter(".outer");
        };


    </script>
</body>
</html>

解決成倍複製的問題

新需求:讓新複製的變成減號，點擊減號能夠刪除標籤

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

    <div class="outer">
        <div class="item">
            <button onclick="clone_obj(this)"> + </button>
            <input type="text">
        </div>
    </div>


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

        function clone_obj(self) {
            // 1.定義個變量，經過this能夠找到本標籤，而後找到本標籤的父級item,複製
            var $conle_object = $(self).parent().clone();

            // 2. children("button").html("-")是找到子標籤而後改爲 -
            // attr("onclick","remove_obj(this)") 是添加一個onclick點擊屬性，屬性名remove_obj(this)
            $conle_object.children("button").html("-").attr("onclick","remove_obj(this)");

            // 3. 而後再把該對象添加到.outer下面
            $conle_object.appendTo(".outer");
        };

        // 4.點擊減號的時候能夠刪除
        function remove_obj(self){
            $(self).parent().remove()

        }
    </script>
</body>
</html>

能夠複製，也能夠remove

4.3 css操做

CSS
        $("").css(name|pro|[,val|fn])
    位置
        $("").offset([coordinates])：標籤至關於視口（當前窗口）的偏移量
        $("").position()：相對於已經定位了的父標籤的偏移量

        $("").scrollTop([val])：scrollTop：表示舉例頂部的距離
        $("").scrollLeft([val])
    尺寸
        $("").height([val|fn])：拿到的就是內容的高度，還能夠改值，好比加上參數：height("300px"),高度就變成了300px了
        $("").width([val|fn])：拿到的是內容的寬度
        $("").innerHeight()：拿到的是包括了padding，沒包括boder的
        $("").innerWidth()
        $("").outerHeight([options])：拿到的是包括了padding和boder的；若是再加個options 爲 true的參數，就會包括margin了
        $("").outerWidth([options])

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

    <style>
        /*  將 body的邊距設置位0 */
        body{
            margin: 0px;
            padding: 0px;
        }

        .div1,.div2{
            height: 200px;
            width: 200px;
        }

        .div1{
            background-color: red;
        }
        .div2{
            background-color: rebeccapurple;
        }

    </style>

</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>


    <script src="jquery-3.3.1.js"></script>
    <script>
        // offset 和 position都只有兩個方法：top 和 left
        // offset方法的參照對象都是當前視口（能看見的窗口）
        console.log($(".div1").offset().top);
        console.log($(".div1").offset().left);
        // position的參數對象是已經定位了的父級標籤
        // 該示例中，它的父級標籤就是body，body默認就是已經定位了的
        console.log($(".div2").position().top);
        console.log($(".div2").position().left);
    </script>
</body>
</html>

位置：offset和position

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

    <style>
        /*  將 body的邊距設置位0 */
        body{
            margin: 0px;
            padding: 0px;
        }

        .div1,.div2{
            height: 200px;
            width: 200px;
        }

        .div1{
            background-color: red;
        }
        .div2{
            background-color: rebeccapurple;
        }

        .outer{
            position: relative;
            height: 400px;
            width: 400px;
            background-color: green;
        }

    </style>

</head>
<body>
    <div class="div1"></div>

    <div class="outer">
        <div class="div2"></div>
    </div>


    <script src="jquery-3.3.1.js"></script>
    <script>
        // offset 和 position都只有兩個方法：top 和 left
        // offset方法的參照對象都是當前視口（能看見的窗口）
        console.log($(".div1").offset().top);
        console.log($(".div1").offset().left);
        // position的參數對象是已經定位了的父級標籤
        // 該示例中，它的父級標籤就是outer，outer已經定位了
        // 因此此時，再看他的位置，就是相對於outer來講的，變成了0,0
        console.log($(".div2").position().top);
        console.log($(".div2").position().left);
    </script>
</body>
</html>

位置：position相對於已經定位的父級標籤標籤

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

    <style>
        /*  將 body的邊距設置位0 */
        body{
            margin: 0px;
            padding: 0px;
        }

        .div1,.div2{
            height: 200px;
            width: 200px;
        }

        .div1{
            background-color: red;
            border: 6px solid black;
            padding: 20px;
            margin: 3px;

        }
        .div2{
            background-color: rebeccapurple;
        }

        .outer{
            position: relative;
            height: 400px;
            width: 400px;
            background-color: green;
        }

    </style>

</head>
<body>
    <div class="div1"></div>

    <div class="outer">
        <div class="div2"></div>
    </div>


    <script src="jquery-3.3.1.js"></script>
    <script>
        // height: 拿到的就是內容的大小 --- 用的最多
        // innerHeight: 取出的是帶着padding的大小
        // outerHeight: 取出的是帶着padding 和 boder的大小

        console.log($(".div1").height());   // 200
        console.log($(".div1").height("300px"));   // 340 能夠改值
        console.log($(".div1").innerHeight()); // 240
        console.log($(".div1").outerHeight()); // 252
        console.log($(".div1").outerHeight(true)); // 258 加上參數true,就包括了外邊距margin了。

    </script>
</body>
</html>

尺寸示例

實例：返回頂部

需求：

1. 出現滾動條；2；隨着滾動條的下滑，底部出現"返回頂部"，點擊頁面滾動條返回到頂部

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

    <style>

        .div1,.div2{
            height: 2000px;
            width: 100%;
        }

        .div1{
            background-color: red;
        }
        .div2{
            background-color: rebeccapurple;
        }

        /*讓返回頂部固定到右下角*/
        .return-to-top{
            width: 80px;
            height: 50px;
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-color: bisque;
            line-height: 50px;
            text-align: center;
        }
        /*隱藏某個標籤，給它加個hide 屬性，而後display =none 這都是套路*/
        .hide{
            display: none;
        }


    </style>

</head>
<body>
    <div class="div1"></div>

    <div class="outer">
        <div class="div2"></div>
    </div>

    <div class="return-to-top hide" onclick="returnTop()">返回頂部</div>


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

        // window.onscroll 經過窗口的onscrool屬性來監聽滾動事件

        window.onscroll = function f() {
            // 能夠看到滾動條當前的位置與窗口頂部的舉例
            console.log($(window).scrollTop());

        //  滾動條滑動過程當中纔出現返回頂部，默認不顯示返回頂部
        //  須要用到判斷
        //    $(window).scrollTop()獲得的是距離窗口頂部的距離，是一個具體的值
        //    當該值>800時，將hide屬性移除，就顯示了返回頂部
            if ($(window).scrollTop()>800){
                $(".return-to-top").removeClass("hide")
            }
            // 當該值小於800時，就添加hide屬性，返回頂部就隱藏了
            else {
                $(".return-to-top").addClass("hide")
            }


        };

        function returnTop() {

            //以window爲做爲當前窗口，是個參照物；事件監聽對象
            // scrollTop(0)：表示舉例window窗口頂部距離爲0
            // 這樣就實現了點擊返回頂部的功能
            $(window).scrollTop(0)

        }

    </script>
</body>
</html>

返回頂部實例

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

    <style>

        .div1,.div2{
            height: 2000px;
            width: 100%;
        }

        /*overflow: auto表示內容填充滿後會自動產生一個滾動條，而不會再溢出內容 */
        .div1{
            background-color: red;
            height: 300px;
            width: 300px;
            overflow: auto;
        }
        .div2{
            background-color: rebeccapurple;
        }

        /*讓返回頂部固定到右下角*/
        .return-to-top{
            width: 80px;
            height: 50px;
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-color: bisque;
            line-height: 50px;
            text-align: center;
        }
        /*隱藏某個標籤，給它加個hide 屬性，而後display =none 這都是套路*/
        .hide{
            display: none;
        }


    </style>

</head>
<body>
    <div class="div1">
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
    </div>

    <div class="outer">
        <div class="div2">
                <button class="return-top" onclick="returnTop()">returntop</button>
        </div>
    </div>


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

        // 監聽局部div1，讓一點returntop button，就返回頂部
        function returnTop() {
            //$(".div1")：要監聽哪一個，就找哪一個，不必定非得是監聽Window
            $(".div1").scrollTop(0)

        }

    </script>
</body>
</html>

監聽div，返回頂部

五事件頁面載入

頁面載入

   
 ready(fn)  //當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數。
 頁面載入語法1：
$(document).ready(function(){
　　　函數代碼
}) 

頁面載入語法2：是語法一的簡寫方式：
 $(function(){
　　　函數代碼
})

事件委託（.on）---終極版的綁定方法
    $("").on(eve,[selector],[data],fn)  // 在選擇元素上綁定一個或多個事件的事件處理函數。

    //  .on的selector參數是篩選出調用.on方法的dom元素的指定子元素，如：
    //  $('ul').on('click', 'li', function(){console.log('click');})就是篩選出ul下的li給其綁定click事件；
    //  語法解析：就是給ul標籤綁定了click事件，而後ul把這個事件委託給它下面的全部li標籤，使全部li標籤都具備click的事件

    [selector]參數的好處:
        好處在於.on方法爲動態添加的元素也能綁上指定事件；如：

        //$('ul li').on('click', function(){console.log('click');})的綁定方式和
        //$('ul li').bind('click', function(){console.log('click');})同樣；
　　　　　
　　　　
　　我經過js給ul添加了一個
        //li：$('ul').append('<li>js new li<li>')；這個新加的li是不會被綁上click事件的

        //可是用$('ul').on('click', 'li', function(){console.log('click');}方式綁定，而後動態添加
        //li:$('ul').append('<li>js new li<li>');這個新生成的li被綁上了click事件
    
    [data]參數的調用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler)

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

</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>

    </ul>

    <script src="jquery-3.3.1.js"></script>
    <script>
        // 在js裏找到li標籤，無法直接按照下面的方式用，須要遍歷後才能用
        // var eles = document.getElementsByTagName("li");
        // eles.onclick = function () {
        //     alert(123)
        // }

        // 來看看jquery的方便之處
    //    ul,li標籤都沒有綁定任何事件


    //    1. 下面看Jquer的事件綁定————簡寫方式

        // 用jquery綁定事件，就已經幫你作了內部遍歷了
        $("ul li").click(function () {
            alert("Jquety之事件綁定簡寫方式")

        });

    //  2.事件綁定的完整寫法
    //    上面的簡寫方式若是寫完整了就是下面的樣子，把click 和 function做爲參數傳遞進去
    //    首先仍是得先找到要綁定的標籤
        $("ul li").bind("click",function () {
            alert("Jquety之事件綁定的完整寫法")
        });

    //    3. 有事件綁定，就有事件解綁
        $("ul li").unbind("click");



    </script>
</body>
</html>

事件綁定示例

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

</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

    <button>add</button>

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

    // 事件綁定  --- 平時就用事件綁定就夠了
        $("ul li").click(function () {
            alert("Jquety之事件綁定簡寫方式")

        });

    //    on:事件委託
    // 可是上面新增的標籤卻沒有點擊事件，只是把標籤加上了而已，如何才能動態給新增的標籤也綁定事件呢？
    //    用事件委託的方式解決這個問題----用 on方法
    // on(第一個參數是事件，此例子是click事件，第二個參數是對誰起做用，本利是li標籤，第三個參數是具體的函數)
    // 這個事件委託本質就是給ul綁定了一個事件，而後ul把這個事件委託給了ul下面的全部的li，這個時候，其實主語就變成了ul
    // 遇到動態綁定，就須要用到事件委託了
    $("ul").on("click","li",function () {
        alert("Jquety之事件委託方式")

    });

    //  給button標籤綁定事件，一點擊就新增衣蛾li標籤，並數字也變化
        $("button").click(function () {
        //    1. 先建立一個li標籤
            var $eli = $("<li>");
            // 2. 獲取li標籤的長度
            var len = $("ul li").length;
            // 3. 給新增的li標籤加1再*1111，用來做爲新增的li標籤的文本
            $eli.html((len+1)*111);
        //    4. 而後將li標籤添加到ul裏去
            $eli.appendTo("ul");
        })

    </script>
</body>
</html>

on：事件委託

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

        // 若是直接把jquery放到head裏，這個功能就沒法生效，由於上面的加載完了，下面的body的代碼還沒加載完，找不到 "ul li"
        // $("ul li").html(5)

    //    因此就引入一個頁面載入，等全部頁面就加載完成後再執行函數
    //    1. 完整寫法方式
        $(document).ready(function () {
            $("ul li").html(5)
        });

        // 2. 頁面加載簡寫方式
        $(function () {
            $("ul li").html(5)
        })

    </script>

</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

    <button>add</button>


</body>
</html>

頁面載入完整寫法和簡寫

六動畫效果

1. 顯示與隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫效果-顯示與隱藏</title>
</head>
<body>
    <div>hello</div>
    <button onclick="f1()">顯示</button>
    <button onclick="f2()">隱藏</button>
    <button onclick="f3()">切換</button>


    <script src="jquery-3.3.1.js"></script>
    <script>
        function f1() {
                // $("div").show();   // 點擊就能夠顯示div
            $("div").show(1000)   // 點擊就能夠顯示div，參數表示的毫秒，慢慢顯示

        }

        function f2() {
                // $("div").hide()  // 點擊就能夠隱藏div
            $("div").hide(1000)  // 點擊就能夠隱藏div,參數表示的是毫秒，能夠實現慢慢隱藏的效果
        }
        
        // toggle()方法，一個方法能夠實現上面兩個功能，會本身判斷，
        // 若是div是隱藏的，點擊就會顯示；若是div是顯示的，點擊就會隱藏
        function f3() {
            $("div").toggle(1000)
        }


    </script>
</body>
</html>

顯示與隱藏 show hide

2. 滑動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <script>
    $(document).ready(function(){

     //   找到div給它綁定一個click事件
     $("#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>

滑動 sliddeUp slideDown slideToggle

3.淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>

    <style>
        .div1{
            width: 80px;
            height: 80px;
            background-color: #FF0000;

        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#in").click(function () {
                $(".div1").fadeIn(2000)
            });

            $("#out").click(function () {
                $(".div1").fadeOut(2000)
            });

            $("#switch").click(function () {
               $(".div1").fadeToggle(2000)
            });
            
            // 淡出到某個設定的透明度爲止，只有fadeTo有透明度參數
            $("#to").click(function () {
                $(".div1").fadeTo(2000, 0.4)
            })
        })

    </script>
</head>
<body>
    <button id="in">淡入</button>
    <button id="out">淡出</button>
    <button id="switch">切換</button>
    <button id="to">fadeto</button>

    <div class="div1"></div>


</body>
</html>

淡入淡出fadeIn fadeOut fadeToggle fadeTo

4.回調函數

python裏的回調函數就是callback

所謂回調函數：就是完成了一個動做以後再去執行某個內容

好比上面的淡出動畫效果完成後，在執行一個回調函數，彈出alert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>

    <style>
        .div1{
            width: 80px;
            height: 80px;
            background-color: #FF0000;

        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#in").click(function () {
                $(".div1").fadeIn(2000)
            });

            $("#out").click(function () {
                // 淡出效果2秒鐘完成後，再執行回調函數function，彈出alert
                $(".div1").fadeOut(2000,function () {
                    alert("1234")
                })
            });

            $("#switch").click(function () {
               $(".div1").fadeToggle(2000)
            });

            // 淡出到某個設定的透明度爲止，只有fadeTo有透明度參數
            $("#to").click(function () {
                $(".div1").fadeTo(2000, 0.4)
            })
        })

    </script>
</head>
<body>
    <button id="in">淡入</button>
    <button id="out">淡出</button>
    <button id="switch">切換</button>
    <button id="to">fadeto</button>

    <div class="div1"></div>


</body>
</html>

回調函數

七擴展方法 (插件機制)

一用JQuery寫插件時，最核心的方兩個方法

<script>
    
$.extend(object)      //爲JQuery 添加一個靜態方法。
$.fn.extend(object)   //爲JQuery實例添加一個方法。

　　　// jQuery.extend 也能夠寫成 $.extend
    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },  // 三元表達式：若是a<b，返回a,不然返回 b
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({
    "print":function(){
        for (var i=0;i<this.length;i++){
            console.log($(this)[i].innerHTML)
        }

    }
});

$("p").print();
</script>

二定義做用域

定義一個JQuery插件，首先要把這個插件的代碼放在一個不受外界干擾的地方。若是用專業些的話來講就是要爲這個插件定義私有做用域。外部的代碼不能直接訪問插件內部的代碼。插件內部的代碼不污染全局變量。在必定的做用上解耦了插件與運行環境的依賴。

(function(a,b){return a+b})(3,5)

       (function ($) { })(jQuery);
//至關於
        var fn = function ($) { };
        fn(jQuery);

三默認參數

定義了jQuery插件以後，若是但願某些參數具備默認值，那麼能夠以這種方式來指定

/step01 定義JQuery的做用域
(function ($) {
    //step03-a 插件的默認值屬性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step06-a 在插件裏定義方法
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }

    //step02 插件的擴展方法名稱
    $.fn.easySlider = function (options) {
        //step03-b 合併用戶自定義屬性，默認屬性
        var options = $.extend(defaults, options);
        //step4 支持JQuery選擇器
        //step5 支持鏈式調用
        return this.each(function () {
            //step06-b 在插件裏定義方法
            showLink(this);
        });
    }
})(jQuery);

View Code

參考博客：http://www.cnblogs.com/xcj26/p/3345556.html

八經典實例練習

實例之註冊驗證

<form class="Form">

    <p><input class="v1" type="text" name="username" mark="用戶名"></p>
    <p><input class="v1" type="text" name="email" mark="郵箱"></p>
    <p><input class="v1" type="submit" value="submit"  onclick="return validate()"></p>

</form>

<script src="jquery-3.1.1.js"></script>
<script>
    // 注意:
    // DOM對象--->jquery對象    $(DOM)
    // jquery對象--->DOM對象    $("")[0]

    //---------------------------------------------------------


    // DOM綁定版本
    function validate(){

        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
    }
                   //---------------------------------------------------------
//---------------------------------------------------------
                   //---------------------------------------------------------



        function f(){

        for(var i=0;i<4;i++){

            if (i==2){
                return
            }
            console.log(i)
        }

    }
    f();  // 這個例子你們應該不會有問題吧!!!
//------------------------------------------
    li=[11,22,33,44];
    $.each(li,function(i,v){

        if (v==33){
                return ;   //  ===試一試 return false會怎樣?
            }
            console.log(v)
    });

//------------------------------------------

    //  $.MyEach(obj,function(i,v){}):
         for(var i in obj){

             func(i,obj[i]) ; //  i就是索引,v就是對應值
             // {}:咱們寫的大括號的內容就是func的執行語句;
         }

    // 你們再考慮: function裏的return只是結束了當前的函數,並不會影響後面函數的執行

    //原本這樣沒問題,但由於咱們的需求裏有不少這樣的狀況:咱們無論循環到第幾個函數時,一旦return了,
    //但願後面的函數也再也不執行了!基於此,jquery在$.each裏又加了一步:
         for(var i in obj){

             ret=func(i,obj[i]) ;
             if(ret==false){
                 return ;
             }

         }
    // 這樣就很靈活了:
    // <1>若是你想return後下面循環函數繼續執行,那麼就直接寫return或return true
    // <2>若是你不想return後下面循環函數繼續執行,那麼就直接寫return false


// ---------------------------------------------------------------------
   // 說了這麼多,請問你們若是咱們的需求是:判斷出一個輸入有問題後面就不判斷了(固然也就不顯示了),
   // 怎麼辦呢?
   // 對了
    if (value.trim().length==0){
                  //...
                  //...
                  //flag=false;  //   flag=false不要去,它的功能是最後若是有問題,不提交數據!
                  return false
            }


//最後,你們嘗試着用jquery的綁定來完成這個功能!

      $(".Form :submit").click(function(){});
    
</script>

View Code

輪播圖練習

.outer{
    width: 520px;
    height: 280px;
    margin: 80px auto;
    position: relative; /*relative相對定位加上後，纔會按照父親自己的盒子居中定位*/
}

/*.img其實不須要什麼樣式，關鍵是它下面的圖片須要樣式，
每張圖片都按照父親進行絕對定位，定位的時候都疊加到一塊兒*/
.img li{
    position: absolute;
    list-style: none;  /*把li的樣式給去掉*/
    top: 0;
    left: 0;
}


.num{
    position: absolute;
    bottom: 10px;
    left: 30%;  /*居中*/
    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: 14px;   /*每一個li之間的間距*/
    font-size: 0; /*把字體大小設置爲0，就不顯示1，2，3，4*/

}

.btn{
    position: absolute; /*加上就能看見了*/
    top: 110px;   /*舉例盒子頂部的一半140px- btn的一半30px， 就能實現居中*/
    width: 30px;
    height: 60px;
    background-color: lightgray;
    color: white;
    text-align: center;/*左右居中*/
    line-height: 55px;/*上下居中*/
    font-size: 30px;
    opacity: 0.6;  /*透明度*/
    display: none;  /*默認不顯示左右切換箭頭*/

}

.left{
    left: 0;
}

.right{
    right: 0;
}

/*鼠標懸浮在圖片上的時候，左右的切換箭頭顯示*/
.outer:hover .btn{
    display: block;
}

.num .active{
    background-color: #FF0000;
}

css樣式

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

    <link rel="stylesheet" href="css/lunbo.css">


</head>
<body>


      <div class="outer">
          <ul class="img">
              <li><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>

          </ul>

          <ul class="num">
              <li class="active"></li>
             <!--空的，下面能夠實現動態添加-->
              <!--<li>1</li>-->
              <!--<li>2</li>-->
              <!--<li>3</li>-->
              <!--<li>4</li>-->
          </ul>

          <div class="left  btn"> < </div>
          <div class="right btn"> > </div>

      </div>

      <script src="jquery-3.3.1.js"></script>
<script>
    var i=0;
//  經過jquery自動建立按鈕標籤
    /*
        經過jquery 自動建立標籤
        根據圖片數量實現動態添加num 下的li標籤
        */
    var img_num=$(".img li").length;  /*看有多少個圖片，size 和 length均可以*/

    for(var j=0;j<img_num;j++){
        $(".num").append("<li></li>")
    }
    // 給上面循環加的li標籤加上屬性active,進來的時候就是默認給第一個加上active的
    $(".num li").eq(0).addClass("active");


    // 先作手動懸浮的輪播
        /*
        1. 鼠標放在哪一個圓點上，哪一個圓點變紅
        2. 對應的圖片也顯示出來
        */
// 手動輪播
       /*給num下的li綁定事件*/
    $(".num li").mouseover(function () {
        i=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        // 當鼠標懸浮在小圓點上的時候，對應的圖片展現出來
            // 方法一：show(), hide()
            // $(".img li").eq(index).show()：經過索引找到對應的圖片，讓他顯示出來
            // .siblings().hide() 讓該索引對應的其餘兄弟姐妹圖片都隱藏
            // $(".img li").eq(index).show().siblings().hide();
            // $(".img li").eq(index).show(1000).siblings().hide(); // 有個特殊展開的效果

            // 方法二：淡入淡出
            // 道理同上
            // 可是這個有個小bug,若是快速在小圓點滑動屢次停下，而後圖片還在那裏不停的閃爍
        // $(".img li").eq(index).fadeIn(1000).siblings().fadeOut();

        
            // 解決辦法:加個stop
            // 意思是當鼠標懸浮在哪一個小圓點時，其餘的效果所有中止，而後執行淡入，或者淡出效果
        $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)

    });


// 自動輪播
            //    自動輪播
        //    設置一個定時器 c, 每隔1500毫秒，執行一次GO_R函數
    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)
    }
    
    // hover(參數一：表示懸浮是，參數二:表示沒有懸浮時)

    $(".outer").hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(GO_R,1500)
    });

// button 加定播
    //    給btn加手動定播
    
    $(".right").click(GO_R);
    $(".left").click(GO_L)



</script>
</body>
</html>