《鋒利的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
  • 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# ...
所有分類