jquery選擇器案例

時間  2019-11-26
標籤 jquery 選擇器 案例 欄目 JQuery 简体版
原文   原文鏈接

1、預期效果

實現一個效果，以下。javascript

 品牌列表默認精簡顯示，單擊「顯示所有品牌」按鈕顯示所有品牌，同時列表將推薦的品牌的名字高亮顯示，按鈕裏的文字變成「精簡顯示品牌」。再次點擊「精簡顯示品牌」回到初始頁面。css

2、實現過程

html結構以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .SubCategoryBox{
            width:800px;
            border:1px solid #ccc;
            overflow: hidden;
            font-size: 16px;
        }
        .SubCategoryBox li{
            float: left;
            width: 240px;
            list-style: none;
        }
        .showmore{
            clear: both;
            text-align: center;
            padding: 5px 0 5px;
        }
        .showmore a{
            display: inline-block;
            border:1px solid green;
            padding:5px;

        }
        .showmore a:hover{
            background-color: light-green;
        }
    </style>
</head>
<body>
    <div class="SubCategoryBox">
        <ul>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">索尼</a><i>(27220)</i></li>
            <li><a href="#">三星</a><i>(20808)</i></li>
            <li><a href="#">尼康</a><i>(17821)</i></li>
            <li><a href="#">松下</a><i>(12289)</i></li>
            <li><a href="#">卡西歐</a><i>(8242)</i></li>
            <li><a href="#">富士</a><i>(14894)</i></li>
            <li><a href="#">柯達</a><i>(9520)</i></li>
            <li><a href="#">賓得</a><i>(2195)</i></li>
            <li><a href="#">理光</a><i>(4114)</i></li>
            <li><a href="#">奧林巴斯</a><i>(12205)</i></li>
            <li><a href="#">明基</a><i>(1466)</i></li>
            <li><a href="#">愛國者</a><i>(3091)</i></li>
            <li><a href="#">其餘品牌相機</a><i>(7275)</i></li>
        </ul>
        <div class="showmore">
            <a href="more.html"><span>顯示所有品牌</span></a>
        </div>
    </div>
</body>
</html>
View Code

一、初始狀態

頁面加載的時候，只顯示前5個品牌和最後一個「其餘品牌相機」。因此從第6個開始隱藏後面的品牌（最後一條「其它品牌相機」）除外。java

jquery庫用1.8.3：jquery

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //獲取元素
$category.hide(); //隱藏

二、點擊「顯示所有品牌」，執行如下操做

顯示隱藏的品牌。若是瀏覽器禁用了javascript，就會跳到一個more.html來顯示更多信息，不然return false，禁止跳轉。api

var $toggleBtn=$("div.showmore>a");//獲取點擊按鈕
$toggleBtn.click(function() {
    $category.show(); //顯示隱藏的品牌
    return false; //阻止瀏覽器跳轉
});

此時須要將「顯示所有品牌變爲「精簡顯示品牌」。瀏覽器

$(this).find("span") .text("精簡顯示品牌");

 接下來高亮推薦品牌。app

$(".SubCategoryBox li")
                .filter(":contains('佳能'),:contains('尼康'),:contains('奧林巴斯')")//找到品牌
                .addClass("promoted");//添加高亮樣式

使用filter方法篩選出複覈要求的品牌。dom

至此所有代碼以下：ide

    <script>
    $(function() { //等待DOM加載完畢
        var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //得到索引值大於4的品牌集合對象（除最後一條）
        $category.hide(); //隱藏匹配元素
        var $toggleBtn = $("div.showmore>a"); //獲取「顯示所有品牌」按鈕
        $toggleBtn.click(function() {
            $category.show(); //顯示$category
            $(this).find("span").text("精簡顯示品牌"); //改變按鈕文字
            $(".SubCategoryBox li")
                .filter(":contains('佳能'),:contains('尼康'),:contains('奧林巴斯')")
                .addClass("promoted"); //推薦品牌高亮顯示
            return false; //超連接不跳轉
        });
    });
    </script>

此時用戶點擊「顯示所有品牌」 ，正常顯示所有品牌。

三、點擊「精簡顯示品牌」執行如下操做

由於單擊同一按鈕，事件仍然在剛纔的按鈕上。要將切換兩種狀態的效果在一個按鈕上進行，能夠經過判斷元素的顯示和隱藏實現。

if(元素顯示){
    //元素隱藏
}else{
    //元素顯示
} 

「元素顯示」部分的代碼就是第二步中的，如今只要完成元素隱藏的代碼便可。

元素隱藏和顯示功能恰好相反，代碼以下。

if( $category.is(":visible")){
                //元素隱藏
                $category.hide(); //隱藏匹配元素
                $(this).find("span").text("顯示所有品牌"); //改變按鈕文字
                $(".SubCategoryBox li").removeClass("promoted"); //所有元素去掉"promoted"
            }

至此任務完成完整的代碼爲：

  <script>
    $(function() { //等待DOM加載完畢
        var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //得到索引值大於4的品牌集合對象（除最後一條）
        $category.hide(); //隱藏匹配元素
        var $toggleBtn = $("div.showmore>a"); //獲取「顯示所有品牌」按鈕
        $toggleBtn.click(function() {
            if ($category.is(":visible")) {
                //元素隱藏
                $category.hide(); //隱藏匹配元素
                $(this).find("span").text("顯示所有品牌"); //改變按鈕文字
                $(".SubCategoryBox li").removeClass("promoted"); //所有元素去掉"promoted"
            } else {
                //元素顯示
                $category.show(); //顯示$category
                $(this).find("span").text("精簡顯示品牌"); //改變按鈕文字
                $(".SubCategoryBox li")
                    .filter(":contains('佳能'),:contains('尼康'),:contains('奧林巴斯')")
                    .addClass("promoted"); //推薦品牌高亮顯示
            }
            return false; //超連接不跳轉
        });
    });
    </script>

四、優化代碼

jquery<=1.8.3中有一個方法更適合以上情境，它能給一個按鈕添加一組交互事件，而不須要像上面同樣作不少判斷

$toggleBtn.click(function() {
            if ($category.is(":visible")) {
                //元素隱藏
            } else {
                //元素顯示
            }
            return false; //超連接不跳轉
        });

等價爲toggtle方法：toggle n.開關 觸發器

$toggleBtn.toggle(function(){
    //顯示元素
},function(){
    //隱藏元素
});

因此最終代碼爲：

<script>
    $(function() { //等待DOM加載完畢
        var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //得到索引值大於4的品牌集合對象（除最後一條）
        $category.hide(); //隱藏匹配元素
        var $toggleBtn = $("div.showmore>a"); //獲取「顯示所有品牌」按鈕
        $toggleBtn.toggle(function() {
                //元素顯示
                $category.show(); //顯示$category
                $(this).find("span").text("精簡顯示品牌"); //改變按鈕文字
                $(".SubCategoryBox li")
                    .filter(":contains('佳能'),:contains('尼康'),:contains('奧林巴斯')")
                    .addClass("promoted"); //推薦品牌高亮顯示
                return false; //超連接不跳轉
            },
            function() {
                //元素隱藏
                $category.hide(); //隱藏匹配元素
                $(this).find("span").text("顯示所有品牌"); //改變按鈕文字
                $(".SubCategoryBox li").removeClass("promoted"); //所有元素去掉"promoted"
                return false; //超連接不跳轉
            });
    });
    </script>

所有代碼：

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
.SubCategoryBox {
        width: 800px;
        border: 1px solid #ccc;
        overflow: hidden;
        font-size: 16px;
    }
    
    .SubCategoryBox li {
        float: left;
        width: 240px;
        list-style: none;
    }
    
    .showmore {
        clear: both;
        text-align: center;
        padding: 5px 0 5px;
    }
    
    .showmore a {
        display: inline-block;
        border: 1px solid green;
        padding: 5px;
    }
    
    .promoted {
        font-weight: 700;
        color: red;
    }
}
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>

<body>
    <div class="SubCategoryBox">
        <ul>
            <li><a href="#">佳能</a><i>(30440)</i></li>
            <li><a href="#">索尼</a><i>(27220)</i></li>
            <li><a href="#">三星</a><i>(20808)</i></li>
            <li><a href="#">尼康</a><i>(17821)</i></li>
            <li><a href="#">松下</a><i>(12289)</i></li>
            <li><a href="#">卡西歐</a><i>(8242)</i></li>
            <li><a href="#">富士</a><i>(14894)</i></li>
            <li><a href="#">柯達</a><i>(9520)</i></li>
            <li><a href="#">賓得</a><i>(2195)</i></li>
            <li><a href="#">理光</a><i>(4114)</i></li>
            <li><a href="#">奧林巴斯</a><i>(12205)</i></li>
            <li><a href="#">明基</a><i>(1466)</i></li>
            <li><a href="#">愛國者</a><i>(3091)</i></li>
            <li><a href="#">其餘品牌相機</a><i>(7275)</i></li>
        </ul>
        <div class="showmore">
            <a href="more.html"><span>顯示所有品牌</span></a>
        </div>
    </div>
    <script>
    $(function() { //等待DOM加載完畢
        var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //得到索引值大於4的品牌集合對象（除最後一條）
        $category.hide(); //隱藏匹配元素
        var $toggleBtn = $("div.showmore>a"); //獲取「顯示所有品牌」按鈕

        $toggleBtn.toggle(function() {
                //元素顯示
                $category.show(); //顯示$category
                $(this).find("span").text("精簡顯示品牌"); //改變按鈕文字
                $(".SubCategoryBox li")
                    .filter(":contains('佳能'),:contains('尼康'),:contains('奧林巴斯')")
                    .addClass("promoted"); //推薦品牌高亮顯示
                return false; //超連接不跳轉
            },
            function() {
                //元素隱藏
                $category.hide(); //隱藏匹配元素
                $(this).find("span").text("顯示所有品牌"); //改變按鈕文字
                $(".SubCategoryBox li").removeClass("promoted"); //所有元素去掉"promoted"
                return false; //超連接不跳轉
            });

    });
    </script>
</body>

</html>
View Code

3、總結

一、.filter（）方法簡介

.filter（expr） :篩選出與指定表達式匹配的元素集合，其中expr能夠是多個選擇器的組合。

.filter(expr)和.find()對比。

  • .find()會在元素內尋找匹配元素，對子元素集合操做。
  • .filter()是篩選元素，對自身集合元素篩選。

一個工做中用到.filter()的例子

需求和實現以下：

  1. 「應收」和「實收」兩列高亮顯示。                 $("table tr:not(thead>tr) td").filter(":nth-child(5),:nth-child(6)").css("background","#F4F9FF");
  2. 「週六」和「週日」的單元格顏色高亮顯示。　　$("td").filter(":contains('週六'),:contains('週日')").css("color","#CC6600");
  3. 「週六」和「週日」兩行高亮顯示。                 $("tr").filter(":contains('週六'),:contains('週日')").css("background","#dff0d8");

二、dom加載完成執行

$(document).ready(function() {}能夠替換爲等價且更簡單的寫法：$(function(){});

三、jquery判斷元素是否顯示或隱藏

$("#id").is(':visible');            //true 爲顯示 false 爲隱藏
$("#id").is(":hidden");         //true 爲隱藏 false 爲顯示

jquery中的is(expr|obj|ele|fn)根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，若是其中至少有一個元素符合這個給定的表達式就返回true。

經常使用：

// 是不是隱藏的
$('#test').is(':visible');
// 判斷input元素是否被選中
$('input[name=chkNoChecked]').is(':checked')；
// 是不是第一個子元素
$(this).is(":first-child");
// 是否包含.blue,.red的class
$(this).is(".blue,.red");
// 文本中是否包含Peter這個詞
$(this).is(":contains('Peter')");

更多可參考官網文檔：http://api.jquery.com/is/

四、鏈式操做

下面代碼，點擊按鈕時改變內容

$(".showmore").click(function() { $(".showmore a span").html("精簡顯示品牌"); });

可進一步寫成：

$(".showmore").click(function() { $(this).find("span").text("精簡顯示品牌"); });

若是須要同時操做樣式可寫爲：

$(".showmore").click(function() { $(this).find("span") .css("background","url(url(img/up.gif) no-repeat 0 0)") .text("精簡顯示品牌"); });

五、不一樣jqurey版本toggle()方法說明

jquery<=1.8.3的toggle()方法能夠實現以上效果。由於它有兩種功能。

一、.toggle(function, function, … )

當指定元素被點擊時，在兩個或多個函數之間輪流切換。若是規定了兩個以上的函數，則 toggle() 方法將切換全部函數。例如，若是存在三個函數，則第一次點擊將調用第一個函數，第二次點擊調用第二個函數，第三次點擊調用第三個函數。第四次點擊再次調用第一個函數，以此類推。

$(selector).toggle(function1(),function2(),functionN(),...)

function1()：必需。規定元素偶數次被點擊時要運行的函數。

function2():必需。規定當元素在奇數次被點擊時要運行的函數。

functionN(),...可選。規定須要切換的其餘函數。

效果能夠看w3school:http://www.w3school.com.cn/tiy/t.asp?f=jquery_effect_toggle_function

.toggle(function, function, … )在jquery1.9被刪除，以減小混亂和提升模塊化程度。具體參考：http://jquery.com/upgrade-guide/1.9/

 jQuery Migrate（遷移）插件能夠恢復此功能。也能夠把原來那塊代碼拿出來，寫成一個插件，以下：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>
</head>
<body>
<button>test click me</button>
<script>
    $(document).ready(function(){
        $("button").toggle(function(){
            $("body").css("background-color", "green");
        }, function(){
            $("body").css("background-color", "red");
        }, function(){
            $("body").css("background-color", "yellow");
        });
    });

    $.fn.toggle = function( fn ) {
        // Save reference to arguments for access in closure
        var args = arguments,
                guid = fn.guid || jQuery.guid++,
                i = 0,
                toggler = function( event ) {
                    // Figure out which function to execute
                    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
                    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );

                    // Make sure that clicks stop
                    event.preventDefault();

                    // and execute the function
                    return args[ lastToggle ].apply( this, arguments ) || false;
                };

        // link all the functions, so any of them can unbind this click handler
        toggler.guid = guid;
        while ( i < args.length ) {
            args[ i++ ].guid = guid;
        }

        return this.click( toggler );
    }
</script>
</body>
</html>
View Code

二、.toggle()切換元素的可見狀態。

語法：

$(selector).toggle(speed,callback,switch)

參數都是可選的。

例子：切換p的顯隱。

 $(".btn1").click(function(){
  $("p").toggle();
  });

 

文中案例來自《鋒利的jquery》，可是書中內容不免過期，但也不能因噎廢食，知道一些技術的歷史，哪怕是過期的，新舊結合，也能夠幫助咱們更全面的認識掌握技術。

 

本文做者starof,因知識自己在變化，做者也在不斷學習成長，文章內容也不定時更新，爲避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/5416895.html有問題歡迎與我討論，共同進步。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程