《鋒利的JQ》摘抄（一） jq基礎篇

来源:https://www.cnblogs.com/AodoDay/archive/2019/03/25/Sharp_jQuery.html
-Advertisement-
Play Games

前言：第一次寫博客有點緊張233333，我會在博客里放一下在賭這本書過程中遇到的一些有用的知識點，希望等幫助到大家。好了正題開始（只要是我不知道該說啥了= =） 一，資源（在w3cfuns資源中可以找到第一版和第二版） 《鋒利的jquery》： http://pan.baidu.com/share/ ...


前言：第一次寫博客有點緊張233333，我會在博客里放一下在賭這本書過程中遇到的一些有用的知識點，希望等幫助到大家。好了正題開始（只要是我不知道該說啥了= =） 

一，資源（在w3cfuns資源中可以找到第一版和第二版）

         《鋒利的jquery》： http://pan.baidu.com/share/link?shareid=1725756399&uk=4245516461 （PDF）

                                       http://www.readfar.com/books/5520ce503063e1f304000696（ebup）

二、個人整理的一些內容

　　1.解決Jq與其他庫的衝突問題

　　　　在jQuery庫中，幾乎所有插件都被限制在自己的命名空間里。通常，全局對象都被很好的存在jQuery命名空間里，與其他js庫共用時一般不會產生衝突如（Prototype、MooTools、YUI）

　　　　1.jQuery庫在其他庫之後導入（這裡指<head>引用js庫的順序）

　　　　  （1）如果想確保jQuery不會與其他庫衝突，又想自定義一個快捷方式，可以進行如下操作

　　　　　　    自定義一個快捷方式，將$轉讓給其他庫使用

var $j = jQuery.noConflict();     //自定義一個快捷方式
$j(function(){                          //使用jQuery，利用自定義快捷方式$j
    $j("p").click(function(){
           alert( $j(this).text() );   
    })     
}) 
$("XX").style.display = 'none' ;  //使用prototype.js

                （2）如果不想備用名稱，還想使用$,且不相與其他庫衝突，可以進行如下操作

　　　　　　        1）轉讓$給其他庫，然後在jQuery設定頁面內使用jQuery的 ' $ ' ,在外部使用其他庫的 ' $ '

jQuery.noConflict():              //將變數$的控制權轉讓
jQuery(function($){             //在使用jQuery的頁面載入時時執行的函數
   $("p").click(functin(){      //在函數內部繼續使用$()方法
      alert( $(this).text() );
   })  
}）
$("XX").style.display = 'none'; //在函數外部使用prototype.js

　　　　　　　      2）定義匿名函數並設置形參為$

jQuery.noConflict();          //將變數$的控制權轉讓給其他庫
(function($){                   //定義匿名函數，形參為$
     $(function(){              //匿名函數內的$均為jQuery
          $("p").click(function(){
                alert( $(this).text() );  //繼續使用jQuery的$()方法
           })；
     })；
})(jQuery);                      //執行匿名函數且傳遞實參jQuery
$("XX").style.display = 'none';  //使用prototype.js

　　　　 2.jQuery庫在其他庫之前導入

　　　　　　直接使用”jQuery“來使用jQuery庫的函數，同時" $() "方法作為其他庫的快捷方式，無需調用noConflict()函數

jQuery(function(){      //直接使用jQuery，無需調用 "jQuery.noConflict()" 函數
       jQuery("p").click({
              alert( jQuery(this),text() );
       }) 
})
$("XX").style.display = 'none';  //在jQuery函數外部使用prototype.js

        2.jQuery選擇器

              jQuery選擇器完全繼承了CSS的風格，利用jQuery選擇器，可以非常便捷的找出特定 DOM 元素。

　　　　1.完善的處理機制

　　　　    （1）使用jQuery選擇器可以避免因使用傳統的getElementById()等函數因無法找到頁面元素而報錯的情況，jQuery選擇器即使獲取不到元素也不會報錯

.demo{  //給class為demo的元素添加樣式
}
$(".demo").click(function(){ //給class為demo的元素添加點擊事件
})

//傳統函數
if(document.getElementById("XX")){  //為避免找不到元素而進行非空檢測
      document.getElementById("XX"),style.color = "red"; 
}
//jQuery選擇器
$(’#XX‘).css("color","red");        //無需判斷是否存在

                   （2） 判斷網頁上是否存在元素時，應註意$('#XX')獲取的永遠是對象

 //錯誤實例
if($('#XX ')){
      //Do something
}

//根據獲取到元素的長度判斷
if( $('#XX').length>0 ){
      //Do something
}
//或者轉化為DOM對象判斷
if( $('#XX')[0] ){
      //Do something
}

              2.一些神奇的選擇器與jQuery等價方法

　　           （2-6）選取prev元素後的下一個<div>同輩元素，(2-7)選取id為 "prev" 的元素後面所有的<div>同輩元素

           

             

              3.過濾選擇器

                   通過特定的過濾規則篩選所需DOM元素，與CSS的偽類選擇器語法校內溝通，都以（:）開頭。

　　　　　 1.基本過濾選擇器

           

                   

                    2.內容過濾選擇器

         

                   

                    3.屬性過濾器

[attribute] 一一選取擁有此屬性的元素            
[attribute1][attribute2][attribute3]選擇滿足多個條件的元素（每選擇一次，縮小範圍一次）

[arrtibute XX value]中XX為如下符號是分別代表不同的涵義
 
"="   一一屬性的值為value                  "*="  一一屬性的值含有value 

"^="  一一屬性的值以value開始               "$="  一一屬性的值以value結束   

"!="  一一屬性的值不等於value（沒有屬性arrtibute的元素也會被選取）    
           
"~="  一一選取屬性用空格分隔的值中包含一個給定的元素（例如 $('div'[title~="uk"]') 選取<div title="uo uk Aodo"/>元素）

 

 

                    4.表單對象屬性過濾

           

              4.選擇器中的一些註意事項

                      1.選擇器中含有 “.”、“#”、“(”、“]” 等特殊字元

<div id="id#b">bb</div>           //錯誤：$("#id#b")  正確：$("#id\\#b");
<div id="id[1]">cc</div>          //錯誤：$("#id[1]")  正確：$("#id\\[1\\] ");

                       2.選擇器中“空格”的坑

                      有如下代碼

<div class = "test">
    <div style = "display:none;">aa</div>
    <div style = "display:none;">bb</div>
    <div style = "display:none;">cc</div>
    <div class = "test" style = "display:none;">dd</div>
</div>
<div class = "test" style = "display:none;">ee</div>
<div class = "test" style = "display:none;">ff</div>

                     使用jQuery選擇器獲取他們，會獲取不同的結果。之所以會出現這種情況是因為後代選擇器和過濾選擇器的不同

var $t_a = $('.test :hidden');    //帶空格的jQuery選擇器（後代選擇器，選擇class為“test”的後代元素里hidden的元素）
var $t_b = $('.test:hidden');     //不帶空格的jQuery選擇器(過濾選擇器，選擇隱藏的class為“test”的元素)
var len_a = $t_a.length;
var len_b = $t_b.length;
alert(" $('.test :hidden') = " + len_a);   //輸出 4
alert(" $('.test:hidden') = " + len_b);    //輸出 3

三、實例

               實現品牌列表的精簡顯示和全部顯示效果圖如下。單擊“顯示全部商品”按鈕時，顯示全部品牌，列表部分高亮顯示；單擊“精簡顯示品牌”按鈕時，隱藏部分品牌，高亮顯示消失。

 

 

               html頁面

<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>(20284)</i></li>
        <li><a href="#">尼康</a><i>(56210)</i></li>
        <li><a href="#">松下</a><i>(261230)</i></li>
        <li><a href="#">卡西歐</a><i>(9440)</i></li>
        <li><a href="#">富士</a><i>(20540)</i></li>
        <li><a href="#">柯達</a><i>(29446)</i></li>
        <li><a href="#">賓得</a><i>(16444)</i></li>
        <li><a href="#">理光</a><i>(30450)</i></li>
        <li><a href="#">奧林巴斯</a><i>(30120)</i></li>
        <li><a href="#">明基</a><i>(12340)</i></li>
        <li><a href="#">愛國者</a><i>(15440)</i></li>
        <li><a href="#">其他品牌相機</a><i>(3440)</i></li>
    </ul>
    <div class="showmore">
        <a href="more.html"><span>顯示全部品牌</span></a>
    </div>
</div>

               css部分

* {
    margin: 0;
    padding: 0;
}

.clearfix {
    content: "";
    clear: both;
}

.SubCategoryBox {
    width: 600px;
    border: 1px solid #ccc;

    padding: 10px;
    position: relative;
    left: 30%;
}

    .SubCategoryBox ul {
        list-style: none;
    }

        .SubCategoryBox ul li {
            float: left;
            width: 33.3%;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

            .SubCategoryBox ul li a {
                text-decoration: none;
                color: #000;
            }

.showmore {
    width: 100%;
    height: 30px;
    text-align: center;
}

    .showmore a {
        display: inline-block;
        width: 100px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        padding: 2px;
        text-decoration: none;
        color: #000;
    }

.promoted {
    color: red;
}

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • oppo設備怎麼樣無需root激活XPOSED框架的教程
    在非常多部門的引流或業務操作中，基本上都需要使用安卓的強大XPOSED框架，近期，我們部門購來了一批新的oppo設備，基本上都都是基於7.0以上版本，基本上都不能夠獲得root的su超級許可權，即使一部分能夠但比較麻煩，甚至也有獲得root的su超級許可權後重啟設備就恢復無root狀態的情況出現，很是憂 ...
  • oppo8.0系統怎麼無需Root激活Xposed框架的經驗
    在較多部門的引流，或業務操作中，基本都需要使用安卓的神一般的xposed框架，近期我們部門購來了一批新的oppo8.0系統，基本都都是基於7.0以上版本，基本都不能夠刷入root的su許可權，雖說一部分能夠但非常麻煩，甚至也有刷入root的su許可權後重啟設備就恢復無root狀態的情況出現，很是絕望的一 ...
  • oppo5.0以上系統怎麼樣不Root激活Xposed框架的經驗
    在非常多單位的引流或者業務操作中，基本上都需要使用安卓的黑高科技術Xposed框架，前幾天我們單位購來了一批新的oppo5.0以上系統，基本上都都是基於7.0以上版本，基本上都不能夠獲取root超級許可權，雖然有一些能但很是麻煩，甚至也有獲取root超級許可權後重啟設備就恢復無root狀態的情況發生，很 ...
  • Flutter 實現原理及在馬蜂窩的跨平臺開發實踐
    一直以來，跨平臺開發都是困擾移動客戶端開發的難題。 在馬蜂窩旅游 App 很多業務場景里，我們嘗試過一些主流的跨平臺開發解決方案， 比如 WebView 和 React Native，來提升開發效率和用戶體驗。但這兩種方式也帶來了新的問題。 比如使用 WebView 跨平臺方式，優點確實非常明顯。基 ...
  • v4v7升級到androidx過程
    因為原項目應用的都是v4v7包，谷歌改成androidx後就升級了一番，首先在properties文件 然後在菜單里點擊升級，studio會幫你把報名什麼的都改掉 打開項目，發現都自動改掉了，完美，然而做為一個android開發，我懷疑可能沒有那麼簡單，做好心理準備，我們不能太年輕了，應該成熟點了 ...
  • iOS 字典轉模型Model
    基本原理 利用 runtime 原理，獲取模型中所有實例變數列表，根據實例變數以此獲取模型中成員變數的名稱和屬性類型，區分Foundation和自定義屬性，需要對NSDictionary和NSArray類型做單獨處理。 下麵代碼是一個簡單的原理實現Demo，真正的框架中需要考慮很多問題，例如可以設置 ...
  • vue（8）—— 模塊化開發 - webpack（2）
    webpack的常用loder和插件 loder和插件是什麼，現在暫且不表，看到後面你就懂了 引入css問題 直接用link標簽導入css 在前面的講解中，相信已經對webpack有一定瞭解了，相比很多朋友已經躍躍欲試了，準備要搞一個自己的小 ...
  • 如何成為一名合格的web前端開發工程師
    因喜歡互聯網這個行業，關註了互聯網和科技大咖，看到了喬布斯曾經說過的一句話就是web就是未來，當時不理解什麼是web上網查詢後得知web是一個職業，不單單是一個技術行業，可以說一門藝術了！後來辭職就開始學習web前端也自學過，報過一些前端班級，可總覺得少了點什麼，因為是零基礎。特別喜歡用代碼來實現一 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類