jQuery學習筆記

一、 jQuery的下載
二、jQuery的基本使用
- 1、 jQuery的入口函式
- 2、jQuery的頂級物件$
- 3、jQuery物件和DOM物件
- 4、jQuery物件和DOM物件相互轉換
三、jQuery基本和層級選擇器
- 1、jQuery基本選擇器
- 2、jQuery層級選擇器
四、jQuer隱式迭代
五、jQuery篩選選擇器
六、jQuery篩選方法(重點)
- 精品展示案例
- 新浪下拉案例
七、jQuery排他思想
八、鏈式編程

一、 jQuery的下載

在這里插入圖片描述

使用前必須先引入jQuery

<script src="jquery.min.js"></script>

二、jQuery的基本使用

1、 jQuery的入口函式

在這里插入圖片描述

  <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
<script>
        // $('div').hide();
        // 1. 等著頁面DOM加載完畢再去執行js 代碼
        // $(document).ready(function() {
        //     $('div').hide();
        // })
        // 2.  等著頁面DOM加載完畢再去執行js 代碼
        $(function() {
            $('div').hide();

        })
    </script>
    <div></div>

2、jQuery的頂級物件$

在這里插入圖片描述

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <div></div>
    <script>
        // 1. $ 是jQuery的別稱（另外的名字）
        // $(function() {
        //     alert(11)
        // });
        jQuery(function() {
            // alert(11)
            // $('div').hide();
            jQuery('div').hide();
        });
        // 2. $同時也是jQuery的 頂級物件
    </script>

3、jQuery物件和DOM物件

在這里插入圖片描述

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
 <div></div>
    <span></span>
    <script>
        // 1. DOM 物件：  用原生js獲取過來的物件就是DOM物件
        var myDiv = document.querySelector('div'); // myDiv 是DOM物件
        var mySpan = document.querySelector('span'); // mySpan 是DOM物件
        console.dir(myDiv);
        // 2. jQuery物件： 用jquery方式獲取過來的物件是jQuery物件， 本質：通過$把DOM元素進行了包裝
        $('div'); // $('div')是一個jQuery 物件
        $('span'); // $('span')是一個jQuery 物件
        console.dir($('div'));
        // 3. jQuery 物件只能使用 jQuery 方法，DOM 物件則使用原生的 JavaScirpt 屬性和方法
        // myDiv.style.display = 'none';
        // myDiv.hide(); myDiv是一個dom物件不能使用 jquery里面的hide方法
        // $('div').style.display = 'none'; 這個$('div')是一個jQuery物件不能使用原生js 的屬性和方法
    </script>

4、jQuery物件和DOM物件相互轉換

在這里插入圖片描述

    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM物件轉換為 jQuery物件
        // (1) 我們直接獲取視頻，得到就是jQuery物件
        // $('video');
        // (2) 我們已經使用原生js 獲取過來 DOM物件
        var myvideo = document.querySelector('video');
        // $(myvideo).play();  jquery里面沒有play 這個方法
        // 2.  jQuery物件轉換為DOM物件
        // myvideo.play();
        $('video')[0].play()
        $('video').get(0).play()
    </script>

三、jQuery基本和層級選擇器

1、jQuery基本選擇器

在這里插入圖片描述

2、jQuery層級選擇器

在這里插入圖片描述

  <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
    </ol>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));

        })
    </script>

四、jQuer隱式迭代

在這里插入圖片描述

   <div>驚喜不，意外不</div>
    <div>驚喜不，意外不</div>
    <div>驚喜不，意外不</div>
    <div>驚喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1. 獲取四個div元素 
        console.log($("div"));

        // 2. 給四個div設定背景顏色為粉色 jquery物件不能使用style
        $("div").css("background", "pink");
        // 3. 隱式迭代就是把匹配的所有元素內部進行遍歷回圈，給每一個元素添加css這個方法
        $("ul li").css("color", "red");
    </script>

五、jQuery篩選選擇器

在這里插入圖片描述

    <ul>
        <li>多個里面篩選幾個</li>
        <li>多個里面篩選幾個</li>
        <li>多個里面篩選幾個</li>
        <li>多個里面篩選幾個</li>
        <li>多個里面篩選幾個</li>
        <li>多個里面篩選幾個</li>
    </ul>
    <ol>
        <li>多個里面篩選幾個</li>
        <li>多個里面篩選幾個</li>
        <li>多個里面篩選幾個</li>
        <li>多個里面篩選幾個</li>
        <li>多個里面篩選幾個</li>
        <li>多個里面篩選幾個</li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>

六、jQuery篩選方法(重點)

在這里插入圖片描述

    <div class="yeye">
        <div class="father">
            <div class="son">子盒子</div>
        </div>
    </div>

    <div class="nav">
        <p>我是π</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>
        // 注意一下都是方法 帶括號
        $(function() {
            // 1. 父  parent()  回傳的是 最近一級的父級元素 親爸爸
            console.log($(".son").parent());
            // 2. 子
            // (1) 親兒子 children()  類似子代選擇器  ul>li
            // $(".nav").children("p").css("color", "red");
            // (2) 可以選里面所有的孩子 包括兒子和孫子  find() 類似于后代選擇器
            $(".nav").find("div p").css("color", "red");
            // 3. 兄
        });
    </script>

精品展示案例

在這里插入圖片描述

 <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女褲</a></li>
            <li><a href="#">羽絨服</a></li>
            <li><a href="#">牛仔褲</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女褲.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/羽絨服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/牛仔褲.jpg" width="200" height="250" /></a>
            </div>

        </div>


    </div>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }
        
        #left,
        #content {
            float: left;
        }
        
        #left li {
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
            background-image: url(images/abg.gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>

    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // 1. 滑鼠經過左側的小li 
            $("#left li").mouseover(function() {
                // 2. 得到當前小li 的索引號
                var index = $(this).index();

                console.log(index);
                // 3. 讓我們右側的盒子相應索引號的圖片顯示出來就好了
                // $("#content div").eq(index).show();
                // 4. 讓其余的圖片（就是其他的兄弟）隱藏起來
                // $("#content div").eq(index).siblings().hide();
                // 鏈式編程
                 // $(this).css("background", "red");
                // 3. 其余的兄弟去掉背景顏色 隱式迭代
                //$(this).siblings("ul li").css("background", "");
                
                $(this).css("background", "red").siblings().css("background", "");
                // $(this).css("color", "red").siblings.css("color", "");
                $("#content div").eq(index).show().siblings().hide();

            })
        })
    </script>

新浪下拉案例

 <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>

<script>
        $(function() {
            // 滑鼠經過
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 當前元素  this不要加引號
                // show() 顯示元素  hide() 隱藏元素
                $(this).children("ul").show();
            });
            // 滑鼠離開
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        })
    </script>

//jQuery篩選方法（下）
   <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <div class="current">俺有current</div>
    <div>俺木有current</div>
    <script>
        // 注意一下都是方法 帶括號
        $(function() {
            // 1. 兄弟元素siblings 除了自身元素之外的所有親兄弟
            $("ol .item").siblings("li").css("color", "red");
            // 2. 第n個元素
            var index = 2;
            // (1) 我們可以利用選擇器的方式選擇
            // $("ul li:eq(2)").css("color", "blue");
            // $("ul li:eq("+index+")").css("color", "blue");
            // (2) 我們可以利用選擇方法的方式選擇 更推薦這種寫法
            // $("ul li").eq(2).css("color", "blue");
            // $("ul li").eq(index).css("color", "blue");
            // 3. 判斷是否有某個類名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));


        });
    </script>

七、jQuery排他思想

   <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1. 隱式迭代 給所有的按鈕都系結了點擊事件
            $("button").click(function() {
                // 2. 當前的元素變化背景顏色
                $(this).css("background", "pink");
                // 3. 其余的兄弟去掉背景顏色 隱式迭代
                $(this).siblings("button").css("background", "");
            });
        })
    </script>

八、鏈式編程

在這里插入圖片描述

    woshi body 的文字
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1. 隱式迭代 給所有的按鈕都系結了點擊事件
            $("button").click(function() {
                // 2. 讓當前元素顏色變為紅色
                // $(this).css("color", "red");
                // 3. 讓其余的兄弟元素不變色 
                // $(this).siblings().css("color", "");
                // 鏈式編程
                // $(this).css("color", "red").siblings().css("color", "");
                // 我的顏色為紅色, 我的兄弟的顏色為空
                // $(this).siblings().css('color', 'red');
                // 我的兄弟變為紅色  ,我本身不變顏色
                $(this).siblings().parent().css('color', 'blue');
                // 最后是給我的兄弟的爸爸 body 變化顏色 

            });
        })
    </script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293193.html

標籤：其他

上一篇：講講JavaScript 中的作用域、預決議與變數宣告提升~

下一篇：2021-08-10js筆記2