jQuery雜項方法

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/06/07/6959616.html
-Advertisement-
Play Games

[1]數據操作 [2]隊列操作 [3]集合操作 [4]索引過濾 [5]內容過濾 ...


前面的話

　　雜項方法其實也是工具類方法，但由於其不是定義在jQuery構造函數上的方法，所以不能稱為工具方法。本文將詳細介紹jQuery中的雜項方法

 

數據操作

【data()】

　　該方法用於在匹配元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值

data( key, value )
data( obj )
data( key )
data()
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });

console.log($("body").data("foo"));//52
console.log($("body").data());//{foo: 52, bar: Object, baz: Array(3)}

　　如果使用原生javascript，相當於

document.body.foo = 52;
console.log(document.body.foo);//52

【removeData()】

　　removeData()方法允許移除用.data()綁定的值。當帶name參數調用的時候，.removeData()將刪除那個特有的值，當不帶任何參數的時候，所有的值將被移除。從jQuery的內部.data() 緩存不影響任何在文檔中的HTML5的data-屬性，使用.removeAttr()可以移除這些屬性

　　當使用.removeData("name")時，如果沒有這個屬性名字是在內部數據緩存，jQuery將試圖在元素上找到一個 data-的屬性。為了避免重覆查詢 data- 屬性，將這個名稱設置為無論是null 或 undefined的值(例如 .data("name", undefined))，而不是使用.removeData()

removeData( [name] ) // [name]:String 要移除的存儲數據名
removeData( [list] ) // [list]:Array,String 一個數組或空間分隔的字元串命名要刪除的數據塊
$('body').data("test1", "VALUE-1")
         .data("test2", "VALUE-2");
console.log($('body').data());//{test1: "VALUE-1", test2: "VALUE-2"}
$('body').removeData("test1");
console.log($('body').data());//{test1: "VALUE-1", test2: "VALUE-2"}

　　如果使用原生javascript，相當於

document.body.foo = 52;
console.log(document.body.foo);//52
delete document.body.foo;
console.log(document.body.foo);

 

隊列操作

【queue()】

　　顯示或操作匹配的元素上已經執行的函數隊列

queue( [queueName ] ) //queueName : String 一個含有隊列名的字元串。預設是 fx，標準的動畫隊列
queue( [queueName ], newQueue ) //newQueue:Array 一個替換當前列隊內容的函數數組
queue( [queueName ], callback( next ) )//callback( next ):Function() 將要添加到隊列中的新函數。當該函數被調用時，會從彈出隊列中的下一個元素
var div = $("div");
div.show("slow");
div.animate({left:'+=200'},2000);
var n = div.queue('fx');
console.log(n.length);//2

【clearQueue()】

　　從列隊中移除所有未執行的項

clearQueue( [queueName ] )

 

集合操作

【each()】

　　遍歷一個jQuery對象，為每個匹配元素執行一個函數

each( function(index, function(index, Element)) )
$( "li" ).each(function( index ) {
  console.log( index + ": "" + $(this).text() );
});

【add()】

　　add()方法添加元素到匹配的元素集合。add()方法的參數可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用

add( selector )
add( elements )
add( html )
add( jQuery object )
add( selector, context )
$('li').add('p')
$('li').add('<p id="new">new paragraph</p>')
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<div>div</div>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').add('div').css('background', 'lightgreen');
})
</script>

【get()】

　　通過檢索匹配jQuery對象得到對應的DOM元素

get( [index ] ) index:Number 從0開始計數，用來確定獲取哪個元素
$( "li" ).get( 0 )

【index()】

　　從匹配的元素中搜索給定元素的索引值，從0開始計數

index( [selector或element] )

　　如果不傳遞任何參數給 .index() 方法，則返回值就是jQuery對象中第一個元素相對於它同輩元素的位置

　　如果在一組元素上調用 .index() ，並且參數是一個DOM元素或jQuery對象， .index() 返回值就是傳入的元素相對於原先集合的位置。

　　如果參數是一個選擇器， .index() 返回值就是原先元素相對於選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1

$('#bar').index();
listItem.index('li');
$('li').index($('li:gt(0)'));

【toArray()】

　　返回一個包含jQuery對象集合中的所有DOM元素的數組

toArray() 這個方法不接受任何參數
//[<li id="foo">, <li id="bar">]
alert($('li').toArray());

 

索引過濾

　　索引選擇器是jQuery過濾選擇器的一部分。與此同時，也存在功能相似的索引相關的方法，包括eq()、first()、last()

【eq()】

　　eq()方法匹配元素的集合為指定的索引的哪一個元素。eq()方法可以接受一個整數作為參數，以0為基數。若整數為負數，則從集合中的最後一個元素開始計數　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="btn3">按鈕三</button>
<script>
$('#btn1').click(function(){
    $('li').eq(0).css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('li').eq(-1).css('border','1px solid blue');    
})
$('#btn3').click(function(){
    $('li').eq(2).css('border','1px solid green');    
})
</script>

【first()】

　　first()方法獲取匹配元素集合中第一個元素，該方法不接受參數

【last()】

　　last()方法獲取匹配元素集合中最後一個元素，該方法不接受參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<script>
$('#btn1').click(function(){
    $('li').first().css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('li').last().css('border','1px solid blue');    
})
</script>

【end()】

　　終止在當前鏈的最新過濾操作，並返回匹配的元素的以前狀態

end() 這個方法不接受任何參數

　　end() 方法主要用於 jQuery 的鏈式屬性中。當沒有使用鏈式用法時，我們通常只是調用變數名上的前一個對象，所以我們不需要操作棧。使用 end() 時，我們可以一次性調用所有需要的方法

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

　　在上面的代碼中，首先在鏈式用法中只在第一個列表中查找樣式為 foo 的項目，並將其背景色變成紅色。然後 end() 返回調用 find() 之前的狀態。因此，第二次 find() 將只會查找 <ul class="first"> 中的 '.bar'，而不是繼續在 <li class="foo"> 中進行查找，結果是將匹配到的元素的背景色變成綠色

 

內容過濾

　　jQuery選擇器中包括內容過濾選擇器，而jQuery中也存在功能類似的內容過濾的方法，包括has()、filter()、is()、not()、map()、slice()

【has()】

　　has()方法用於篩選匹配元素集合中有相匹配的選擇器或DOM元素的後代元素的父元素

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
    </li>
    <li>list item 3</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').has('ul').css('border', '1px solid lightblue');
})
</script>

【map()】

　　map()方法通過一個函數匹配當前集合中的每個元素

　　作為參數的函數有兩個參數，第一個參照是匹配集合中的元素索引，第二個參數是當前索引的DOM元素對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input value="text">
<input value="text">
<input value="text">
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('input').map(function(index,dom){
        dom.value += index;
    });
})
</script>

【filter()】

　　filter()方法從匹配的元素集合中篩選出指定的元素，參數可以是一個選擇器字元串、一個或多個DOM元素、jQuery對象或一個函數　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').filter(':even').css('border','1px solid lightgreen')
})
</script>

　　filter()方法中作為參數的函數有兩個參數，第一個參照是匹配集合中的元素索引，第二個參數是當前索引的DOM元素對象。如果函數返回值為true，則該元素保留；否則，該元素在匹配集合中被去除 

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').filter(function(index,dom){
        if(!(index % 3)){
            $(dom).css('border','1px solid lightgreen')
            return true;
        }
    })
})
</script>

【not()】

　　not()方法與filter()方法正好相反，它從匹配的元素集合中移除指定的元素，參數可以是一個選擇器字元串、一個或多個DOM元素、jQuery對象或一個函數　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').not(':even').css('border','1px solid lightgreen')
})
</script>

　　not()方法中作為參數的函數有兩個參數，第一個參照是匹配集合中的元素索引，第二個參數是當前索引的DOM元素對象。如果函數返回值為true，則該元素被去除；否則，該元素在匹配集合中保留

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<button id="btn">按鈕</button>
<script>
$('#btn').click(function(){
    $('li').not(function(index,dom){
        if(!(index % 3)){
            $(dom).css('border','1px solid lightgreen')
            return true;
        }
    })
})
</script>

【is()】

　　is()方法用於判斷當前元素是否與參數相匹配，如果匹配，則返回true；否則，返回false。參數可以是一個選擇器，DOM元素，jQuery對象或函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script>
$('li').click(function(){
    if($(this).is(':contains("2")')){
        $(this).css('border','1px solid black')
    }
})
</script>

　　is()方法中作為參數的函數有兩個參數，第一個參照是匹配集合中的元素索引，第二個參數是當前索引的DOM元素對象。如果函數返回true，is()方法也返回true，如果函數返回false，is()方法也返回false

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<div id="result"></div>
<script>
var i = 0;
$('li').click(function(){
    ++i;
    if($(this).is(function(index,dom){
        $('#result').html(dom.innerHTML);
        if(i%2){
            return true;    
        }
    })){
         $(this).css('border','1px solid black')
    }
})
</script>

【slice()】

　　slice()方法根據指定的下標範圍，過濾匹配的元素集合，並生成一個新的jQuery對象　

　　slice(start[,end])方法接受兩個參數：start和end

　　start是一個整數，從0開始計數的下標。代表將要被選擇的元素的起始下標。如果指定的下標是一個負數，那麼代表從末尾開始計數

　　end是一個整數，從0開始計數的下標。代表將要被選擇的元素的結束下標。如果指定的下標是一個負數，那麼代表從末尾開始計數。如果忽略此參數，則選擇的範圍是從start開始，一直到最後

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用React改版網站後的一些感想
    文章轉載：http://www.jianshu.com/p/8f74cfb146f7 網站是畢業設計的作品，開發這個網站的目的主要用於記錄一些筆記，以及聚合一些資訊信息，也算自己在網路世界中的一塊靜地吧，可以在這裡一些技術上想法的實踐。 網站最初前端使用vue開發，在前段時間由於項目的開發進度已經不 ...
  • js獲取url中參數名也參數值
    要撮利用js獲取url中參數名也參數值這個不多見了，但我今天需要這樣操作，下麵我來給大家介紹一下具體的實例方法。 在已知參數名的情況下，獲取參數值，使用正則表達式能很容易做到。 js的實現方法如下： function getValue(url, name) { var reg = new RegEx ...
  • nodeJS實現簡單網頁爬蟲功能
    [1]網頁源碼 [2]篩選數據 [3]cheerio [4]爬蟲代碼 [5] ...
  • jQuery 添加樣式屬性的優先順序別
    jQuery類中添加多個屬性 jQuer為元素添加類 HTML code 可以看到jQuery類中添加多個屬性渲染效果是以內嵌樣式出現的。 而jQuer為元素添加的類沒有內嵌樣式的優先順序高 可以看到渲染效果中沒有funny的 background color: gray ; 和 color: yel ...
  • css類選擇器類名覆蓋優先順序
    code 渲染效果 最初以為更改元素中class類裡面的類名順序，渲染效果就會根據類名順序依次渲染 code 渲染效果 更改元素class裡面類名的順序並不能影響渲染順序 code 渲染效果 更改樣式表裡類的順序 渲染順序受到影響 結論：兩個類中有同樣的屬性覆蓋順序是css樣式表從下往上的順序 ...
  • jQuery+ajax實現局部刷新
    在項目中，經常會用到ajax，比如實現局部刷新，比如需要前後端交互等，這裡呢分享局部刷新的兩種方法，主要用的是ajax裡面的.load()。 第一種： 當某幾個頁面都有相同的頭部、導航、底部的時候，點擊導航鏈接可以在幾個頁面中切換，此時想要的效果是點擊鏈接後只切換內容部分，其他不再重新載入。上代碼。 ...
  • jQuery常用工具方法
    [1]元素相關 [2]數據相關 [3]類型檢測 [4]數組相關 [5]其他 ...
  • JavaScript忍者閱讀隨筆（一）：函數聲明、調用
    在JavaScript中，函數是作為一等成員而存在的，由此，非常有必要掌握JavaScript中函數的知識，最近幾天閱讀了JavaScript忍者的第三章和第四章前面的部分，做一個總結。 JavaScript函數聲明： JavaScript函數是使用 函數字面量 進行聲明 從而創建函數的。 形如 函 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類