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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類