jquery選擇器案例

来源:http://www.cnblogs.com/starof/archive/2016/04/27/5433822.html
-Advertisement-
Play Games

一、預期效果 實現一個效果，如下。 品牌列表預設精簡顯示，單擊“顯示全部品牌”按鈕顯示全部品牌，同時列表將推薦的品牌的名字高亮顯示，按鈕里的文字變成“精簡顯示品牌”。再次點擊“精簡顯示品牌”回到初始頁面。 二、實現過程 html結構如下： <!DOCTYPE html> <html lang="en ...


一、預期效果

實現一個效果，如下。

 品牌列表預設精簡顯示，單擊“顯示全部品牌”按鈕顯示全部品牌，同時列表將推薦的品牌的名字高亮顯示，按鈕里的文字變成“精簡顯示品牌”。再次點擊“精簡顯示品牌”回到初始頁面。

二、實現過程

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

1、初始狀態

頁面載入的時候，只顯示前5個品牌和最後一個“其他品牌相機”。所以從第6個開始隱藏後面的品牌（最後一條“其它品牌相機”）除外。

jquery庫用1.8.3：

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

2、點擊“顯示全部品牌”，執行以下操作

顯示隱藏的品牌。如果瀏覽器禁用了javascript，就會跳到一個more.html來顯示更多信息，否則return false，禁止跳轉。

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

此時需要將“顯示全部品牌變為“精簡顯示品牌”。

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

 接下來高亮推薦品牌。

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

使用filter方法篩選出覆核要求的品牌。

至此全部代碼如下：

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

此時用戶點擊“顯示全部品牌” ，正常顯示全部品牌。

3、點擊“精簡顯示品牌”執行以下操作

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

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>

4、優化代碼

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

三、總結

1、.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");

2、dom載入完成執行

$(document).ready(function() {}可以替換為等價且更簡單的寫法：$(function(){});

3、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/

4、鏈式操作

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

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

可進一步寫成：

$(".showmore").click(function() {
    $(
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 信息系統實踐手記5-CACHE設計一例
    說明：信息系統實踐手記系列是系筆者在平時研發中先後遇到的大小的問題，也許朴實和細微，但往往卻是經常遇到的問題。筆者對其中比較典型的加以收集，描述，歸納和分享。 摘要：此文描述了筆者接觸過的部分信息系統或平臺之間的對接構型和情況，掛一漏萬的總結分享之。 正文 系列隨筆目錄：信息系統實踐手記 （http ...
  • Qt 如何處理密集型耗時的事情
    有時候需要處理一些跟界面無關的但非常耗時的事情，這些事情跟界面在同一個線程中，由於時間太長，導致界面無法響應，處於“假死”狀態。例如：在應用程式中保存文件到硬碟上，從開始保存直到文件保存完畢，程式不響應用戶的任何操作，視窗也不會重新繪製，從而處於“無法響應”狀態，這是一個非常糟糕的體驗 。 在這種情... ...
  • 設計模式之筆記--命令模式（Command）
    命令模式（Command） 定義 命令模式（Command），將一個請求封閉為一個對象，從而使你可以用不同的請求對客戶進行參數化；對請求排除或記錄請求日誌，以及支持可撤銷的操作。 類圖 描述 Command：定義命令的統一介面； ConcreteCommand：Command介面的實現者，要執行的具 ...
  • Dubbo架構設計詳解
    Dubbo是Alibaba開源的分散式服務框架，它最大的特點是按照分層的方式來架構，使用這種方式可以使各個層之間解耦合（或者最大限度地松耦合）。從服務模型的角度來看，Dubbo採用的是一種非常簡單的模型，要麼是提供方提供服務，要麼是消費方消費服務，所以基於這一點可以抽象出服務提供方（Provider ...
  • 設計模式---代理模式
    ...
  • jQuery事件之on()方法綁定多個選擇器,多個事件
    on()方法綁定多個事件 用on()方法綁定多個選擇器、多個事件 ...
  • 編寫jQuery 插件
    編寫jQuery Plugin，要設置預設值，並允許用戶修改預設值，或者運行是傳入其他值。 最終，我們得出編寫一個jQuery插件的原則： 1. 給$.fn綁定函數，實現插件的代碼邏輯； 2. 插件函數最後要 以支持鏈式調用； 3. 插件函數要有預設值，綁定在 上； 4. 用戶在調用時可傳入設定值以 ...
  • Angular.js入門(1)
    1.Angular優點 1. 模板功能強大豐富，並且是聲明式的，自帶了豐富的Angular指令； 2. 是一個比較完善的前端MVC框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴註入等所有功能； 3. 自定義Directive，比jQuery插件還靈活，但是需要深入瞭解Directiv ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類