天天看點
傳回

jQuery常用方法歸納總結

jQuery常用方法歸納總結

​

$.grep() 

$.grep( array, function(elementOfArray, indexInArray) [, invert ] )

功能：查找滿足過濾函數的數組元素：

<script src="js/jquery1.42.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var arr = [23,45,5,1,4,67,8,100,-2];
            var arrGrep = $.grep(arr, function (element,index) {
                return (index<5)&&(element != 4);//整體傳回一個數組
            })
            alert(arrGrep);//23,45,5,1
        })
</script>

$.map() 

$.map( array, callback(elementOfArray, indexInArray) )

功能：将一個數組中的所有元素轉換到另一個數組中。

<script src="js/jquery1.42.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var arr = [5,1,4,67,8,100,-2];
            var arrMap = $.map(arr, function (element,index) {
                //  return (index<3)&&(element != 4);這裡按布爾值傳回
                if(index<3 && element< 4){
                    return element;
                }
            });
            alert(arrMap);//1
        })
</script>

mouseover()/mouserout()

當滑鼠進入/離開某個元素或它的後代元素時觸發​

​mouseover/mouseout​

​​事件。

​​

​mouseover​

​​事件大多數時候會與 ​

​mouseout​

​ 事件一起使用。

​

​mouseover/mouserout​

​事件由于冒泡機制，經常在不需要的時候不小心觸發，進而導緻一些腳本問題。

mouseenter()/mouseleave()

​

​mouseenter/mouseleave​

​當且僅當滑鼠進入被選元素時才觸發，當滑鼠穿過任何子元素時不會觸發。它不關心目标元素是否有子元素。

focusin()和focusout()

​

​.focusin()​

​​：一個元素或它的子元素​

​得到​

​​焦點時觸發此事件

​​

​.focusout()​

​​：一個元素或它的子元素​

​失去​

​焦點時觸發此事件

與 ​

​focus()​

​​ 方法不同的是，​

​focusin()​

​ 方法在任意子元素獲得焦點時也會觸發。

<body>
    <p><input type="text"> <span>focusin fire</span></p>
    <p><input type="password"> <span>focusin fire</span></p>
    <script>
    $( "p" ).focusin(function() {
    $( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
    });
</script>
</body>

eq()和get()

​

​.get()​

​​：通過​

​jQuery​

​​對象擷取一個對應的DOM元素。

​​

​.eq()​

​​：從集合的一個元素中構造新的​

​jQuery​

​對象

​

​eq​

​​傳回的是一個​

​jQuery​

​對象，get傳回的是一個DOM對象。舉個例子：

$( "li" ).get( 0 ).css("color", "red"); //錯誤
$( "li" ).eq( 0 ).css("color", "red"); //正确

那麼，什麼是DOM對象，什麼又是jQuery對象呢？

DOM對象就是用js獲得的對象，而​

​juqery​

​​對象是用​

​jQuery​

​類庫的選擇器獲得的對象。

如：​

​var $obj = $("div");//jQuery對象​

​

​

​get​

​​方法本質上是把​

​jQuery​

​​對象轉換成​

​DOM​

​​對象，但是css屬于​

​jQuery​

​​構造器的，DOM是不存在這個方法的，如果需要用​

​jQuery​

​的方法，我們必須這樣寫：

var li = $("li").get(0);
$(li).css("color","black");//用$包裝

filter() 

filter()方法:篩選出與指定表達式比對的元素集合。

這個方法用于縮小比對的範圍。用逗号分隔多個表達式。

​

​filter(expression)：​

​（字元串|函數）如果參數是字元串，則制定jQuery選擇器，用于從包裝集裡删除所有與選擇器不比對的元素，最後留下與選擇器比對的元素；如果參數是函數，則用于确定篩選條件。為包裝集裡的每一個元素各調用一次該函數，函數調用傳回值為false的任何元素都會從包裝集裡删除。

以下代碼意為：保留第一個以及帶有​

​select​

​類的元素

HTML 代碼:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery 代碼:

$("p").filter(".selected, :first")

結果:

<p>Hello</p>, <p class="selected">And Again</p>

再看一個​

​function​

​​的例子，一個函數用來作為測試元素的集合。它接受一個參數​

​index​

​​，這是元素在jQuery集合的索引。在函數， ​

​this​

​​指的是目前的​

​DOM​

​元素。

HTML 代碼:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代碼:

$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

結果:

<p>How are you?</p>

.bind()、.live()和.delegate()方法

​

​.bind()​

​​：綁定事件處理函數的最基本方式是使用​

​.bind()​

​​方法。它和​

​live()​

​方法一樣，接受兩個參數：

.bind(event type, event handler)

兩種綁定事件處理函數的方法：

$(document).ready(function(){
    $('.mydiv').bind('click',test);
    
    function test(){
        alert("Hello World!");
    }
});

事件處理函數也可以使用匿名函數，如下所示：

$(document).ready(function(){
        $("#mydiv").bind("click",function(){
            alert("Hello World!");
        })
    });

​

​.live()​

​​：live方法和bind方法的唯一差別在于​

​.live()​

​不僅作用于DOM中目前存在的元素，還作用于将來可能存在（動态生成）的元素

$(document).ready(function(){
        $('.box').live('click',function(){
            $(this).clone().appendTo('.container');
        });
    });
    
    <div class="container">
        <div class="box"></div>
    </div>

使用​

​live​

​​方法綁定事件的缺點在于它無法使用鍊式調用，那有沒有既可以像live方法那樣綁定事件，又可以支援鍊式調用的方法呢？答案就是下面的​

​delegate​

​方法。

​

​delegate()方法：​

​為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程式，

并規定當這些事件發生時運作的函數。從jQuery 1.7開始，`.delegate()`已經被`.on()`方法取代。

文法：

$(selector).delegate(childSelector,event type,function)

參數說明：

​

​childSelector​

​ 必需。規定要附加事件處理程式的一個或多個子元素。

​

​event​

​ 必需。規定附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。

​

​function​

​ 必需。規定當事件發生時運作的函數。

$(document).ready(function(){
        $('.container').delegate('.box','click',function(){
            $(this).clone().appendTo('.container');
        });
    });

​

​delegate()​

​會在以下兩個情況下使用到：

1、如果你有一個父元素，需要給其下的子元素添加事件，這時你可以使用​

​delegate()​

​了，代碼如下：

$("ul").delegate("li", "click", function(){


$(this).hide();


});

2、當元素在目前頁面中不可用時，可以使用​

​delegate()​

​

end()方法 

end()方法：在jquery指令鍊内調用，以便退回到前一個包裝集。

每次​

​過濾方法​

​​都會被壓入棧中。當我們需要傳回到前一個狀态時，我們可以使用​

​end()​

​ 進行出棧操作，來傳回棧中的前一個狀态。

​

​end()​

​ 方法結束目前鍊條中的最近的篩選操作，并将比對元素集還原為之前的狀态。

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <ul class="one">
    <li class="two">item 1</li>
    <li>item 2</li>
    <li class="three">item 3</li>
</ul>


<script type="text/javascript">
    $('ul.one').find(".two").css("color","red").find('.three').css("background","blue");
</script>

在上面的代碼例子中，我們隻會看到item 1的字型顔色改變了，而背景顔色沒有改變。這是因為

第二個​​

​find()​

​​方法之前的狀态傳回的是紅色字型的​

​class​

​​值為​

​two​

​​的對象，是以，第二次​

​find()​

​​隻會查找​

​<ul class="one">​

​​ 中的​

​.two​

​​，使用​

​end()​

​方法修改該鍊式操作的代碼如下：

<script type="text/javascript">
    $('ul.one').find(".two").css("color","red").end().find('.three').css("background","blue");
</script>

​

​end()​

​​方法在這裡是 傳回調用 ​

​find()​

​​ 之前的狀态，也就是​

​$('ul.one')​

​

toggleClass() 

`toggleClass()方法：`如果在元素中指定類名稱不存在，則添加指定類名稱；如果元素已經擁有指定
類名稱，則從元素中删除指定類名稱。      
css(name,value)方法：設定指定的值到每個已比對元素的指定的css樣式屬性

wrap()和wrapInner() 

`wrap()和wrapInner()：`前者把所有比對的元素用其他元素的結構化标記包裹起來；
後者将每一個比對的元素的子内容(包括文本節點)用一個HTML結構包裹起來。

看下面一個wrap()的例子：

用原先div的内容作為新div的class，并将每一個元素包裹起來

HTML 代碼:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

jQuery 代碼:

$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

結果:

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

接着再看下面一個​

​wrapInner()​

​的例子:

用原先​

​div​

​​的内容作為新​

​div​

​​的​

​class​

​，并将每一個元素包裹起來

HTML 代碼:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

jQuery 代碼:

$('.inner').wrapInner(function() {
  return '<div class="' + $(this).text() + '" />';
});

結果:

<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

detach、empty和remove方法

​

​.detach( [selector ] )​

​​：從DOM中去掉所有比對的元素。當需要移走一個元素，不久又将該元素插入​

​DOM​

​​時，就需要用到​

​detach​

​方法。

​

​.empty()​

​​：這個方法不僅移除子元素（和其他後代元素），同樣移除元素裡的文本。因為，根據說明，元素裡任何文本字元串都被看做是該元素的​

​子節點​

​。

​

​.remove( [selector ] )​

​​：将元素從DOM中移除，同時移除元素上的事件及 ​

​jQuery​

​ 資料

​

​empty()​

​的例子：

<ul class="one">
    <li class="two">item 1</li>
    <li>item 2</li>
    <li class="three">item 3</li>
</ul>


<script type="text/javascript">
    $(".two").empty();//item 1 文本節點被移除，li的小圓點還在，證明li沒有被移除
</script>

看下面一個​

​remove()​

​例子：

描述：從DOM中把所有段落删除

HTML 代碼:

<p>Hello</p> how are <p>you?</p>

jQuery 代碼:

$("p").remove();

結果:

how are

val()方法 

val()：獲得比對元素的目前值。

描述:擷取文本框中的值

jQuery 代碼:

​

​$("input").val();​

​

jQuery 代碼:

$("input").val("hello world!");

each()和map() 

each()和map()方法：each傳回的是原來的數組，并不會新建立一個數組。而map方法會傳回一個
新的數組。如果在沒有必要的情況下使用map，則有可能造成記憶體浪費。

​

​each​

​方法：

定義一個空數組，通過each方法，往數組添加ID值；最後将數組轉換成字元串後，alert這個值；

$(function(){
    var arr = [];
    $(":checkbox").each(function(index){
        arr.push(this.id);
    });
    var str = arr.join(",");
    alert(str);
})

​

​map​

​方法:

将每個:checkbox執行return this.id；并将這些傳回值，自動的儲存為jQuery對象，然後用get方法将其轉換成原生​

​Javascript​

​​數組，再使用​

​join​

​方法轉換成字元串，最後alert這個值；

$(function(){
    var str = $(":checkbox").map(function() {
        return this.id;
    }).get().join();
    alert(str);
})

當有需一個數組的值的時候，用map方法，很友善。

更加詳細的讨論，請點選我的另一篇文章：詳解jQuery内置函數map()和each()的使用

$.each()

​

​jQuery​

​​的​

​$(selector).each()​

​​函數可以周遊循環選中的子元素，而jQuery的​

​$.each()​

​函數則可以周遊任何集合，包括對象和數組，它接收要周遊的集合以及一個回調函數，回調函數每次傳遞一個數組的下标和這個下标所對應的數組的值。

$.each(array,callback);


$.each(object,callback);

數組執行個體 

$.each( [ "one", "two", "three" ], function( i, l ){
    alert( "index #" + i + ": " + l );
});
callback(索引,索引值)

DEMO：

index 0: one
index 1: two;
index 2: three

對象執行個體 

$.each({ name: "trigkit4", lang: "JS" }, function( k, v ) {
    alert( "Key: " + k + ", Value: " + v );
});
callback(鍵,值)

Demo:

Key: name, Value: trigkit4
 Key: lang, Value: JS

.trigger()

描述: 根據綁定到比對元素的給定的事件類型執行所有的處理程式和行為。

當相應的事件發生時，任何通過​

​.on()​

​​、​

​.bind()​

​​或一個快捷方法綁定的事件處理程式将被觸發。但是，它們可以用​

​.trigger()​

​方法手動觸發。

<script type="text/javascript">
    $(document).bind('abc',function(){
            console.log('hello');
});
    $(document).trigger('abc');
    //Output  'hello';
</script>

.attr()和.prop()

​

​.attr()​

​：擷取比對的元素集合中的第一個元素的屬性的值 或 設定每一個比對元素的一個或多個屬性。

​

​.prop()​

​​：同上

jQuery 1.6之前 ，​​

​.attr()​

​​方法在取某些 ​

​attribute​

​​ 的值時，會傳回 ​

​property​

​​ 的值，這就導緻了結果的不一緻。從 jQuery 1.6 開始， ​

​.prop()​

​​方法 方法傳回 ​

​property​

​​ 的值,而 ​

​.attr()​

​​ 方法傳回 ​

​attributes​

​ 的值。

例如, ​

​selectedIndex​

​​, ​

​tagName​

​​, ​

​nodeName​

​​, ​

​nodeType​

​​, ​

​ownerDocument​

​​, ​

​defaultChecked​

​​, 和 ​

​defaultSelected​

​​ 應使用​

​.prop()​

​方法進行取值或指派。

他們沒有相應的屬性（​

​attributes​

​​），隻有特性(​

​property​

​)。

.after()和.insertAfter()

1.after()

描述:

在所有段落中後插入一個jQuery對象(類似于一個DOM元素數組)。

HTML 代碼:

<b>Hello</b><p>I would like to say: </p>

jQuery 代碼:

$("p").after( $("b") );

結果:

<p>I would like to say: </p><b>Hello</b>

2.insertAfter()

描述:

把所有段落插入到一個元素之後。與 ​​

​$("#foo").after("p")​

​相同

HTML 代碼:

<p>I would like to say: </p><div id="foo">Hello</div>

jQuery 代碼:

$("p").insertAfter("#foo");

結果:

<div id="foo">Hello</div><p>I would like to say: </p>

.before()和.insertBefore()

3.before()

描述:

在所有段落中前插入一個jQuery對象(類似于一個DOM元素數組)。

HTML 代碼:

<p>I would like to say: </p><b>Hello</b>

jQuery 代碼:

$("p").before( $("b") );

結果:

<b>Hello</b><p>I would like to say: </p>

.append()和.appendTo()

4.append()

描述：向所有段落中追加一些HTML标記。

HTML 代碼:

<p>I would like to say: </p>

jQuery 代碼:

$("p").append("<b>Hello</b>");

結果:

<p>I would like to say: <b>Hello</b></p>

5.appendTo()

描述：建立段落追加div中并加上一個class

HTML 代碼:

<div></div><div></div>

jQuery 代碼:

$("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");

結果:

<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

.prepend()和.prependTo()

6.prepend()

描述：向所有段落中前置一個jQuery對象(類似于一個DOM元素數組)。

HTML 代碼:

​

​<p>I would like to say: </p><b>Hello</b>​

​

jQuery 代碼:

$("p").prepend( $("b") );

結果:

<p><b>Hello</b>I would like to say: </p>

7.prependTo()

描述：把所有段落追加到ID值為foo的元素中。

HTML 代碼:

<p>I would like to say: </p><div id="foo"></div>

jQuery 代碼:

$("p").prependTo("#foo");

結果:

<div id="foo"><p>I would like to say: </p></div>

總結 

1. .insertAfter()和.after()：在現存元素的外部，從後面插入元素
 
2. .insertBefore()和.before()：在現存元素的外部，從前面插入元素


3. .appendTo()和.append()：在現存元素的内部，從後面插入元素


4. .prependTo()和.prepend()  ：在現存元素的内部，從前面插入元素

.data( key, value )

​

​.data()​

​​ 方法允許我們在​

​DOM​

​元素上綁定任意類型的資料,

$("div").data("test", { first: 16, last: "pizza!" });

.promise( [type ] [, target ] )

在 ​

​Javascript​

​​ 中，有外一種異步處理模式被叫做 ​

​Promises​

​​， ​

​CommonJS​

​​ 标準委員會于是釋出了一個規範，就把這個 ​

​API​

​​ 叫做 ​

​Promises​

​ 了。

​

​Promise​

​ 背後的概念非常簡單，有兩部分:

Deferreds，定義工作單元，
Promises，從 Deferreds 傳回的資料。

​

​Promise​

​​ 不同于回調的很重要的一個點是，你可以在 ​

​Promise​

​​ 狀态變成執行(​

​resolved​

​)之後追加處理句柄。這就允許你傳輸資料，而忽略它是否已經被應用擷取，然後緩存它，等等之類的操作，是以你可以對資料執行操作，而不管它是否已經或者即将可用。

<!-- lang: js -->
promise
  .then(doSomething)
  .then(doSomethingElse)
  .then(doSomethingMore)
  .catch(logError);
jquery 數組 css
上一篇: CentOs -- 解除安裝系統自帶的Jdk
下一篇: 7個你可能不知道但有用的HTML屬性

繼續閱讀