jQuery學習記錄二

阿新 • • 發佈：2018-11-08

索引選擇器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //頁面載入
    $(function () {
      $("#btn").click(function () {
        //所有的li中索引為2的li
        $("ul>li:eq(2)").css("backgroundColor","green");
        //所有的li中索引小於5的li
        $("ul>li:lt(5)").css("backgroundColor","deeppink");
        //所有的li中索引大於5的li
        $("ul>li:gt(5)").css("backgroundColor","hotpink");
        //所有li中大於三小於五，也就是四
         $("ul>li:lt(5):gt(3)").css("backgroundColor","blue");
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<ul>
  <li>任賢齊</li>
  <li>張震嶽</li>
  <li>羅大佑</li>
  <li>劉德華</li>
  <li>郭富城</li>
  <li>張學友</li>
  <li>黎明</li>
  <li>周星馳</li>
  <li>吳孟達</li>
  <li>周潤發</li>
</ul>
</body>
</html>

案例：好友面板切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        #ul li{
            margin-bottom: 10px;
            background-color: orange;
            font-size: 20px;
            font-weight: bolder;
            cursor: pointer;
        }
        #ul li ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #ul li ul li{
            background-color: pink;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function () {
            $('#ul>li>ul').hide();
            $('#ul>li').mouseenter(function () {
                $(this).children('ul').show(500);
                /*找到兄弟節點中為 li 的節點的，將其他 ul 隱藏*/
                $(this).siblings('li').find('ul').hide(500);
            });
        });
    </script>
</head>
<body>
<div style="width: 200px;height: 500px;border: 1px solid red;">
    <ul id="ul" style="list-style: none;margin: 0;padding: 0;text-align: center">
        <li>
            幼兒園同學
            <ul>
                <li>tom</li>
                <li>rose</li>
                <li>jack</li>
            </ul>
        </li>
        <li>
            小學同學
            <ul>
                <li>tomm</li>
                <li>rosee</li>
                <li>jackk</li>
            </ul>
        </li>
        <li>
            中學同學
            <ul>
                <li>tommm</li>
                <li>roseee</li>
                <li>jackkk</li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

元素樣式設定的三種方式

        *第一種寫法:
//        $("#dv").css("width","300px");
//        $("#dv").css("height","200px");

*第二種寫法:鏈式程式設計
//$("#dv").css("width","300px").css("height","200px")

        *第三種寫法:鍵值對的寫法
        var json={"width":"200px","height":"100px","backgroundColor":"pink","border":"2px solid green"};
        $("#dv").css(json);

鏈式程式設計:物件不停的呼叫方法. ↑ 第二種寫法就是鏈式程式設計的案例。

*呼叫方式：物件.方法().方法.方法().方法();

//物件呼叫方法,如果返回值還是當前這個物件，那麼就可以繼續的呼叫方法
//經驗:在jQuery中,一般情況,物件呼叫的方法,這個方法的意思是設定的意思,那麼返回來的幾乎都是當前的物件,就可以繼續的鏈式程式設計了

元素樣式的設定

*總結:設定元素的樣式可以使用css()方法,也可以使用addClass()或者是removeClass()方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .cls{
      width: 200px;
      height: 100px;
      background-color: crimson;
    }
    .cls2{
      border: 2px solid green;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $("#btn").click(function () {
        //為div設定類樣式,同時應用多個類樣式
        //$("#dv").addClass("cls");
        //$("#dv").addClass("cls").addClass("cls2");
        //$("#dv").addClass("cls cls2");
        //console.log($("#dv").addClass("cls"));
        //addClass()方法,括號裡什麼也沒有,返回來的仍然是這個物件,即使在括號中設定了內容,返回來的還是這個物件

        //removeClass()方法,同上
        //移除類樣式
        //$("#dv").removeClass("cls");
        //$("#dv").removeClass("cls").removeClass("cls2");
        //$("#dv").removeClass("cls cls2");
        //console.log($("#dv").removeClass("cls"));

        //css方法是不能新增或者移除類樣式的
        //$("#dv").css("class","cls");

      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>

</body>
</html>

案例：突出顯示，透明度的用法

*注：遇到了一個問題，圖片衝突了，資料夾裡只有這個，確顯示了一張已經刪除的，用的google，ctrl+shift+del清一下快取就ok了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            background-color: #000;
        }
        ul{
            list-style: none;
        }
        .wrap{
            margin:100px auto 0;
            width:630px;
            height:394px;
            padding:10px 0 0 10px;
            background-color: #000;
            overflow: hidden;
            border:1px solid #fff;
        }
        .wrap li{
            float: left;
            margin:0 10px 10px 0;
        }
        .wrap img{
            display: block;
            border:0;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $(".wrap>ul>li").mouseenter(function () {
                $(this).css('opacity',1).siblings('li').css('opacity',0.5);
            });
            /*離開那個大框子，才會恢復樣式*/
            $('.wrap').mouseleave(function () {
                $(this).find('li').css('opacity',1);
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="#"><img src="images/01.jpg"></a>
        </li>
        <li>
            <a href="#"><img src="images/02.jpg"></a>
        </li>
        <li>
            <a href="#"><img src="images/03.jpg"></a>
        </li>
        <li>
            <a href="#"><img src="images/04.jpg"></a>
        </li>
        <li>
            <a href="#"><img src="images/05.jpg"></a>
        </li>
        <li>
            <a href="#"><img src="images/06.jpg"></a>
        </li>

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

案例：手風琴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style:none;
        }
        .box{
            width:1200px;
            height:400px;
            margin:50px auto;
            border:1px solid red;
            overflow: hidden;
        }
        .box li{
            width:240px;
            height:400px;
            float: left;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $('.box>ul>li').mouseenter(function () {
                $(this).css('width','800px').siblings('li').css('width','100px');
            });
        });
    </script>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
        <li><img src="images/5.jpg"></li>
    </ul>
</div>
</body>
</html>

案例：開關燈實現，類樣式的切換方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    .cls{
      background-color: black;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
//    $(function () {
//      $("#btn").click(function () {
//        //判斷body是否應用了cls類樣式,如果應用了就移除,否則就新增
//        if($("body").hasClass("cls")){
//          $("body").removeClass("cls");
//        }else{
//          $("body").addClass("cls");
//        }
//      });
//    });

    //第二種方式
    $(function () {
      $("#btn").click(function () {
        //切換---類樣式
        $("body").toggleClass("cls");
      });
    });
  </script>
</head>
<body>
<input type="button" value="開/關" id="btn"/>


</body>
</html>

獲取兄弟元素的幾種方法

        //獲取某個li的下一個兄弟元素
        //$(this).next("li").css("backgroundColor","yellowgreen");
        //獲取某個li的前一個兄弟元素
        //$(this).prev("li").css("backgroundColor","greenyellow");
        //獲取某個li的後面的所有的兄弟元素
        //$(this).nextAll("li").css("backgroundColor","red");
        //獲取某個li的前面的所有的兄弟元素
        //$(this).prevAll("li").css("backgroundColor","red");
        //獲取當前的li的所有的兄弟元素
        //$(this).siblings("li").css("backgroundColor","gray");

斷鏈:物件呼叫方法之後,返回的已經不是當前的這個物件了,此時再呼叫方法,就出現了斷鏈
.end()方法是修復斷鏈,恢復斷鏈之前的狀態
//不推薦使用鏈式程式設計

案例：想實現的效果是，當前前邊一個色，後邊一個色，由於鏈式程式設計，返回出錯了，所以通過end()方法可以實現分層的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    ul {
      list-style-type: none;
      width: 200px;
      position: absolute;
      left: 500px;
    }

    ul li {
      margin-top: 10px;
      cursor: pointer;
      text-align: center;
      font-size: 20px;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $("ul>li").mouseenter(function () {//滑鼠進入事件
        $(this).css("backgroundColor", "red").siblings("li").css("backgroundColor", "");
      }).mouseleave(function () {//滑鼠離開事件
        $(this).parent().find("li").css("backgroundColor", "");
      }).click(function () {//點選事件
        $(this).prevAll("li").css("backgroundColor", "yellow").end().nextAll("li").css("backgroundColor", "blue");
      });
    });
  </script>
</head>
<body>
<ul>
  <li>青島啤酒（TsingTao）</li>
  <li>瓦倫丁（Wurenbacher）</li>
</ul>
</body>
</html>

案例：jQuery中顯示和隱藏的動畫

    * show和hide方法有引數
    * 引數1:時間----1000毫秒---1秒
    * 引數2:回撥函式---動畫執行完畢後才執行

其他方法：

    * 引數和上面的是一樣
    * slideDown()滑出
    * slideUp()滑入

* slideToggle()切換滑入和滑出 ----------->切換的意思是顯示和隱藏的切換。

    * fadeIn()淡入
    * fadeOut()淡出
    * fadeToggle()切換淡入和淡出

    * fadeTo(時間,透明值結束);      -------------->時間可以是具體的值，也可以是下邊的選項，最後以這個透明度作為結束
    * slow 比較慢的
    * fast 比較快的
    * normal

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: mediumvioletred;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //點選第一個按鈕顯示div
      $("#btn1").click(function () {
        $("#dv").show(5000,function () {
          alert("完了");
        });
      });
      //點選第二個按鈕隱藏div
      $("#btn2").click(function () {
        $("#dv").hide(5000,function () {
          alert("好了");
        });
      });
    });
  </script>
</head>
<body>
<input type="button" value="顯示" id="btn1"/>
<input type="button" value="隱藏" id="btn2"/>
<div id="dv"></div>

</body>
</html>

案例：通過animate函式來做動畫

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    img{
      position: absolute;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>

    //引數1:鍵值對----css屬性和值
    //引數2:時間---1000毫秒---1秒
    //引數3:回撥函式
    $(function () {
      $("#im").animate({"width":"300px","height":"300px","left":"100px","top":"100px"},3000).animate({"width":"30px","height":"30px","left":"10px","top":"600px"},300).animate({"width":"50px","height":"50px","left":"800px","top":"20px","opacity":0.5},2000);
    });
  </script>
</head>
<body>
<img src="images/bird.png" alt="" id="im" />

</body>
</html>

案例：tab切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style: none;
        }
        .wrapper{
            width:1000px;
            height:475px;
            margin:100px auto 0;
        }
        .tab{
            border:1px solid #ddd;
            border-bottom:0;
            height:36px;
            width:320px;
        }
        .tab li{
            position: relative;
            float: left;
            width:80px;
            height:34px;
            line-height:34px;
            text-align: center;
            cursor: pointer;
            border-top:4px solid #fff;
        }
        .tab span{
            position: absolute;
            right:0;
            top:10px;
            background: #ddd;
            width:1px;
            height:14px;
            overflow: hidden;
        }
        .products{
            width:1002px;
            border:1px solid #ddd;
            height:476px;
        }
        .products .main{
            float: left;
            display: none;
        }
        .products .main.selected{
            display: block;
        }
        .tab li.active{
            border-color: red;
            border-bottom:0;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $(".tab>li").mouseenter(function () {
                $(this).addClass('active').siblings('li').removeClass('active');
                var index=$(this).index();
                $('.products>div:eq('+index+')').addClass('selected').siblings('div').removeClass('selected');
            });
        });
    </script>
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">國際大牌<span></span></li>
        <li class="tab-item">國妝名牌<span></span></li>
        <li class="tab-item">清潔用品<span></span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>
</body>
</html>

案例：隱藏動畫案例，排隊刪除

*vertical-align: top; 去除底部間隙

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
	  border:1px solid black;
    }

    img {
      width: 90px;
      height: 90px;
      vertical-align: top;
    }

  </style>
  <script src="jquery-1.12.2.js"></script>
  <script>
    $(function () {
      //第一個按鈕,隱藏
      $("#btn1").click(function () {
        $("div>img:last").hide(300,function f1() {
          $(this).prev().hide(300,f1);
        });
      });
      //第二個按鈕,顯示
      $("#btn2").click(function () {
          $("div>img:first").show(300,function f1() {
            $(this).next().show(300,f1);
          });
      });
    });

  </script>
</head>
<body>
<input type="button" value="隱藏動畫" id="btn1"/>
<input type="button" value="顯示動畫" id="btn2"/>
<div>
  <img src="images/1.jpg"/>
  <img src="images/2.jpg"/>
  <img src="images/3.jpg"/>
  <img src="images/4.jpg"/>
</div>
</body>
</html>

案例：點一個沒一個

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 100px;
      height: 80px;
      margin: 2px;
      float: left;
    }

    img {
      width: 100px;
      height: 80px;
    }
  </style>
  <script src="jquery-1.12.2.js"></script>
  <script>
    $(function () {
         $("div").click(function () {
           $(this).hide(300);
         });
    });

  </script>
</head>
<body>
<div><img src="imagess/01.jpg"></div>
<div><img src="imagess/02.jpg"></div>
<div><img src="imagess/03.jpg"></div>
<div><img src="imagess/04.jpg"></div>
<div><img src="imagess/05.jpg"></div>
</body>
</html>

建立元素

*除了子和進行關聯外：子 .appendTo (父)

*還可以：父 .append ( 子 )

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      border:5px solid red;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $("#btn").click(function () {
        //建立一個子級元素直接加到父級元素
        $("<a href='http://www.baidu.cn'>百度</a>").appendTo($("#dv"));
      });
    });
  </script>
</head>
<body>
<input type="button" value="建立一個a標籤" id="btn"/>
<div id="dv"></div>
</body>
</html>

注意：append appendTo有點剪下的效果而如果想實現克隆的效果需要通過clone方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        #dv1{
            width: 300px;
            height: 200px;
            border: 2px solid red;
            margin-bottom: 20px;
        }
        #dv2{
            width: 300px;
            height: 200px;
            border: 2px solid green;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //把第一個div中的p標籤剪下到第二個div中
                $("#dv2").append($("#dv1>p"));
                $("#dv1>p").appendTo($("#dv2"));

                //把第一個div中的p標籤複製到第二個div中
                $("#dv1>p").clone().appendTo($("#dv2"));
            });
        });
    </script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv1">
    <p>我是快樂的</p>
</div>
<div id="dv2"></div>
</body>
</html>

建立元素的第二種方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 300px;
      height: 200px;
      border:1px solid red;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      $("#btn").click(function () {
        //通過innerHTML的方式建立元素---以字串的方式
        $("#dv").html("<input type='button' value='按鈕'>");
      });

    });

  </script>
</head>
<body>
<input type="button" value="建立一個按鈕" id="btn"/>
<div id="dv">
  hello world!
</div>
</body>
</html>

jQuery學習記錄二

jQuery學習記錄二

vue.js 學習記錄(二)

React 學習記錄(二)

[jQuery學習系列二 ]2-JQuery學習二-數組操作

ELK學習記錄二：elasticsearch、logstash及kibana的安裝與配置

easylogging++學習記錄(二)：流式日誌

Linux學習記錄(二)

jQuery學習記錄四

jQuery學習記錄三

jQuery學習記錄一

Java學習記錄二

Docker學習記錄二 -- Dokcer安裝Ubuntu容器後，命令無法執行問題

git學習記錄二

springcloud 學習記錄二開源架構 PIG

JPA學習記錄二（搭建一個JPA+hibernate例項）

C++學習記錄二

Java SE學習記錄二

Spring Boot學習記錄(二)--thymeleaf模板

Java8學習記錄(二)-Stream原理

springBoot 學習記錄(二)-返回json資料的幾種方式

jQuery學習記錄二

相關推薦