jQuery 選擇器

精品唯居 2021-11-12

展開全文

jquery使用

jQuery的官網(wǎng)地址： https:///，官網(wǎng)即可下載最新版本。

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

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

</head>
<body>
<div></div>
<script>
    $(function () {
        $('div').hide()
    })

</script>



</body>
</html>

jq基本使用

JQ對象和DOM對象相互轉(zhuǎn)換

DOM對象轉(zhuǎn)換為JQ對象

var jQueryObject = $(DOM)

JQ對象轉(zhuǎn)換為DOM對象

jQuery對象[索引值]
jQuery對象.get(索引值)

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

</head>
<body>
 <video src="mov.mp4" muted></video>
<script>
    // DOM對象轉(zhuǎn)換為jq對象
    var myvideo = document.querySelector('video');
    var jQueryObject = $(myvideo);  // 把DOM對象轉(zhuǎn)換為 jQuery 對象


    // JQ對象轉(zhuǎn)換為DOM對象，兩種方式
    // 1. jq對象[索引值]
    $('video')[0].play();

    // 2. jQuery對象.get(索引值)
    $('video').get(0).play()


</script>



</body>
</html>

示例代碼

jQuery選擇器

基礎(chǔ)選擇器

$('選擇器')

層級選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <script src="jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div class="nav">2</div>
    <p>3</p>
    <ol>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ol>

    <ul>
        <li>ul1</li>
        <li>ul2</li>
        <li>ul3</li>
    </ul>

    <script>
        $(function () {
            console.log('div');
            console.log('.nav');
            console.log('ul li'); // 層級選擇器
        })

    </script>


</body>
</html>

示例代碼

篩選選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <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:last').css('color', 'red');
            $('ul li:eq(2)').css('color', 'blue');

            $('ol li:odd').css('color', 'blue');
            $('ol li:even').css('color', 'red');

        })


    </script>

</body>
</html>

示例代碼

篩選找其他節(jié)點

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son">兒子</div>
        </div>

        <div class="fatherto">
            <p>fatherto</p>
        </div>
    </div>

    <div class="nav">
        <p>我是屁</p>
        <p>我是屁</p>
        <p>我是屁</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>

        $(function () {
            // 查找父級別

            console.log($('.father').parent());
            console.log($('.son').parent());

            // 查找最親的兒子
            console.log($('.yeye').children());
            console.log($('.father').children());

            // find
            console.log($('.yeye').find('div'));

            // 查找兄弟節(jié)點, 不包括自己
            console.log($('.father').siblings());

            // 查找當(dāng)前元素之后的所有同級別元素
            console.log($('.father').nextAll());

            // 查找當(dāng)前元素之前的所有同級別元素
            console.log($('.fatherto').prevAll());

            // 檢查某個元素是否存在某個類 返回布爾值
            console.log($('div').hasClass('fatherto'));

            // 根據(jù)下標(biāo)獲取
            console.log($('.nav').children('p').eq(2));

        })

    </script>
</body>

</html>

示例代碼

其他知識

jQuery 設(shè)置樣式

$('div').css('屬性', '值')

jQuery 里面的排他思想

// 想要多選一的效果，排他思想：當(dāng)前元素設(shè)置樣式，其余的兄弟元素清除樣式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

隱式迭代

$('div').hide();  // 頁面中所有的div全部隱藏，不用循環(huán)操作

鏈?zhǔn)骄幊?/li>

// 鏈?zhǔn)骄幊淌菫榱斯?jié)省代碼量，看起來更優(yōu)雅。
$(this).css('color', 'red').sibling().css('color', '');

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <div></div>
    <script>
        $(function () {
            // 1. 設(shè)置樣式
            $('div').css('height', '200px')

            // 2. 排他思想
            $('button').click(function () {
                // 2. 當(dāng)前的元素變化背景顏色
                $(this).css("background", "red");
                // 3. 其余的兄弟去掉背景顏色 隱式迭代
                $(this).siblings("button").css("background", "");
            })

            // 3. 隱式編程
            $('button').click(function () {
                $(this).css("background", "red").siblings('button').css('background', 'black')
            })

        })

    </script>

</body>

</html>

示例代碼

 <script src="jquery.min.js"></script>
    <script>
        $('#left li').mouseover(function () {
            var index = $(this).index();
            $("#content div").eq(index).show().siblings().hide();

        })
</script>

案例-淘寶精品圖

jquery樣式操作

操作屬性

只寫屬性名，返回值

$('div').css('height')

設(shè)置屬性

$('div').css('height', '200px')

對象的方式設(shè)置屬性

$('div').css({
                "backgroundColor": "red",
                "width": "50px"
            })

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: yellow;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        $(function () {
            // 1. 只寫屬性，返回值
            height = $('div').css('height')
            console.log(height);

            // 2. 設(shè)置屬性
            $('div').css('height', '200px')

            // 3. 對象的形式，設(shè)置屬性
            $('div').css({
                "backgroundColor": "red",
                "width": "50px"
            })
        })
    </script>


</body>

</html>

示例代碼

操作類樣式

添加類樣式

$("div").addClass("current");

刪除類樣式

$("div").removeClass("current");

切換類樣式

$("div").toggleClass("current");

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }

        .current {
            background-color: red;
            transform: rotate(360deg);
        }

        .current2 {
            width: 300px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="current"></div>
    <script>
        $(function () {
            // 這個會影響原有的類，直接覆蓋了
            // var div = document.querySelector('div')
            // div.className = current2;

            // 1. 添加樣式  這個addClass相當(dāng)于追加類名 不影響以前的類名
            $('div').addClass('current2')

            // 2 移除樣式
            $('div').removeClass('current');

            $('div').click(function () {
                // 切換樣式
                $(this).toggleClass('current')
            })
        })

    </script>


</body>

</html>

示例代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介紹</li>
                <li>規(guī)格與包裝</li>
                <li>售后保障</li>
                <li>商品評價（50000）</li>
                <li>手機社區(qū)</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介紹模塊內(nèi)容
            </div>
            <div class="item">
                規(guī)格與包裝模塊內(nèi)容
            </div>
            <div class="item">
                售后保障模塊內(nèi)容
            </div>
            <div class="item">
                商品評價（50000）模塊內(nèi)容
            </div>
            <div class="item">
                手機社區(qū)模塊內(nèi)容
            </div>

        </div>
    </div>
    <script>
        $(function () {
            // 1. 點擊自己，添加current 類，其他兄弟隱藏
            $('.tab_list li').click(function () {
                $(this).addClass('current').siblings('li').removeClass('current');
                // 2. 點擊的同時得到自身的index
                var index = $(this).index();

                // 3. 讓當(dāng)前詳情頁顯示，其他的隱藏
                $('.tab_con .item').eq(index).show().siblings().hide()

            })
        })
    </script>
</body>

</html>

案列-tab欄

jQuery效果動畫

顯示隱藏：show() / hide() / toggle()
劃入畫出：slideDown() / slideUp() / slideToggle() ;
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
自定義動畫：animate() ;

注意：

動畫或者效果一旦觸發(fā)就會執(zhí)行，如果多次觸發(fā)，就造成多個動畫或者效果排隊執(zhí)行。

jQuery為我們提供另一個方法，可以停止動畫排隊：stop() ;

顯示隱藏

show(speed, [easing], [fn])
hide(speed, [easing], [fn])
toggle(speed, [easing], [fn])

參數(shù)都可以省略
speed, 顯示速度的字符串，有（’slow’, 'normal’, 'fast’）或者動畫的時長,單位為毫秒，如1000
easing，指切換的效果，默認’swing’, 可用參數(shù) 'linear’
fn: 回調(diào)函數(shù)，動畫執(zhí)行完后會執(zhí)行這個函數(shù)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: red;
            display: none;
        }
    </style>
</head>

<body>
    <div></div>
    <button>顯示</button>
    <button>隱藏</button>
    <button>切換</button>
    <script>
        $(function () {
            // 顯示，’slow’, 'normal’, 'fast’ 或者毫秒
            $('button').eq(0).click(function () {
                $('div').show('slow', 'linear', function () {
                    alert(111)
                })
            });

            $('button').eq(1).click(function () {
                $('div').hide('slow');
            });

            $('button').eq(2).click(function () {
                $('div').toggle(1000)
            })
        })

    </script>

</body>

</html>

示例代碼

滑入滑出

slideDown(speed, [easing], [fn]) 下滑
slideUp(speed, [easing], [fn]) 上滑
slideToggle(speed, [easing], [fn]) 滑動切換

參數(shù)都可以省略
speed, 顯示速度的字符串，有（’slow’, 'normal’, 'fast’）或者動畫的時長,單位為毫秒，如1000
easing，指切換的效果，默認’swing’, 可用參數(shù) 'linear’
fn: 回調(diào)函數(shù)，動畫執(zhí)行完后會執(zhí)行這個函數(shù)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>下拉滑動</button>
    <button>上拉滑動</button>
    <button>切換滑動</button>
    <div></div>
    <script>
        $(function () {
            // 下滑
            $('button').eq(0).mouseover(function () {
                $('div').slideDown(1000);
            })
            // 上滑
            $('button').eq(1).mouseover(function () {
                $('div').slideUp();
            })

            // 切換滑動
            $('button').eq(2).mouseover(function () {
                $('div').slideToggle();
            })

        })

    </script>
</body>

</html>

示例代碼

淡入淡出

fadeIn(speed, [easing], [fn]) 淡入
fadeOut(speed, [easing], [fn]) 淡出
fadeToggle(speed, [easing], [fn]) 淡入出切換

參數(shù)都可以省略
speed, 顯示速度的字符串，有（’slow’, 'normal’, 'fast’）或者動畫的時長,單位為毫秒，如1000
easing，指切換的效果，默認’swing’, 可用參數(shù) 'linear’
fn: 回調(diào)函數(shù)，動畫執(zhí)行完后會執(zhí)行這個函數(shù)

fadeTo(speed, opacity,[easing], [fn]) 漸進方式調(diào)整到指定不透明

opacity 透明度必須寫，取值 0~ 1 之間
speed, 顯示速度的字符串，有（’slow’, 'normal’, 'fast’）或者動畫的時長,單位為毫秒，如1000

easing，指切換的效果，默認’swing’, 可用參數(shù) 'linear’
fn: 回調(diào)函數(shù)，動畫執(zhí)行完后會執(zhí)行這個函數(shù)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切換</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function () {
            // 淡入
            $('button').eq(0).click(function () {
                $('div').fadeIn(1000)
            })

            // 淡出
            $('button').eq(1).click(function () {
                $('div').fadeOut(1000)
            })

            // 淡入淡出切換
            $('button').eq(2).click(function () {
                $('div').fadeToggle(1000)
            })

            // 修改透明度
            $('button').eq(3).click(function () {
                $('div').fadeTo(1000, 0.5)
            })
        })

    </script>
</body>

</html>

示例代碼

stop()阻止動畫排隊現(xiàn)象

stop() 阻止動畫排隊現(xiàn)象
hover 事件切換復(fù)合寫法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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 src="jquery.min.js"></script>
</head>

<body>
    <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>
    <script>
        $(function () {
            // 第一種
            // 鼠標(biāo)經(jīng)過nav下的親li 顯示他的ul兒子們
            // $('.nav>li').mouseover(function () {
            //     $(this).children('ul').slideDown()
            // })

            // // 鼠標(biāo)離開，隱藏他的ul兒子們
            // $('.nav>li').mouseout(function () {
            //     $(this).children('ul').slideUp();
            // })

            // 第二鐘
            // 事件切換 hover 就是鼠標(biāo)經(jīng)過和離開的復(fù)合寫法
            // $('.nav>li').hover(function () {
            //     $(this).children('ul').slideDown(200);
            // }, function () {
            //     $(this).children('ul').slideUp(200);
            // })

            // 這里發(fā)現(xiàn)快速移動的話，其他的ul也顯示

            // 第三種，阻止這個bug  stop阻止
            $('.nav>li').hover(function () {
                $(this).children('ul').stop().slideToggle(200)
            })

        })


    </script>
</body>

</html>

示例代碼

自定義動畫

animate(params, opacity,[easing], [fn])

speed, 顯示速度的字符串，有（’slow’, 'normal’, 'fast’）或者動畫的時長,單位為毫秒，如1000

easing，指切換的效果，默認’swing’, 可用參數(shù) 'linear’
fn: 回調(diào)函數(shù)，動畫執(zhí)行完后會執(zhí)行這個函數(shù)
params 想要更改樣式的屬性，以對象的形式，必須寫，屬性名可以不帶引號，如果符合屬性，采用駝峰命名，其他后面的參數(shù)可以省略

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>動起來</button>
    <div></div>
    <script>
        $(function () {
            $("button").click(function () {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>

</body>

</html>

示例代碼

事件切換

hover([over, ], out) 其中over和out為兩個函數(shù)

over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)（相當(dāng)于mouseenter）
out:鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于mouseleave）
如果只寫一個函數(shù)，則鼠標(biāo)經(jīng)過和離開都會觸發(fā)它

$(".nav>li").hover(function() {
        // stop 方法必須寫到動畫的前面
        $(this).children("ul").stop().slideToggle();
});

示例代碼

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手風(fēng)琴案例</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        ul {
            list-style: none;
        }

        .king {
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }

        .king ul {
            overflow: hidden;
        }

        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }

        .king li.current {
            width: 224px;
        }

        .king li.current .big {
            display: block;
        }

        .king li.current .small {
            display: none;
        }

        .big {
            width: 224px;
            display: none;
        }

        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>

</head>

<body>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1. 鼠標(biāo)經(jīng)過某個小li, 兩步操作
            $('.king li').mouseover(function () {
                // 1.1 當(dāng)前小li 寬度變?yōu)?224px， 同時里面的小圖片淡出，大圖片淡入
                $(this).stop().animate({
                    width: 224
                }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();

                // 1.2 其他兄弟li 變成69px， 小圖片淡入，大圖片淡出
                $(this).siblings('li').stop().animate({
                    width: 69
                }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();
            })
        })
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>




</body>

</html>