『總結』jQuery經常使用函數方法

時間 2019-12-07

標籤總結 jquery 經常使用函數方法欄目 JQuery 简体版

原文原文鏈接

1.delay(duration,[queueName])

設置一個延時來推遲執行隊列中以後的項目。
jQuery 1.4新增。用於將隊列中的函數延時執行。他既能夠推遲動畫隊列的執行，也能夠用於自定義隊列。javascript

duration:延時時間，單位：毫秒css

queueName:隊列名詞，默認是Fx，動畫隊列。html

例：java

頭部與底部延遲加載動畫效果node

$(document).ready(function() {
    $('#header') .css({ 'top':-50 }) .delay(1000).animate({'top': 0}, 800);
    $('#footer') .css({ 'bottom':-15 }) .delay(1000).animate({'bottom': 0}, 800);  
});

2.jQuery on( ) 委派事件實現

jquery1.7及其以上版本；jquery1.7版本出現以後用於替代bind()，live()綁定事件方式；jquery

live()方法在jquery1.9以後被刪除。segmentfault

on() 爲指定的元素,添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。使用 on() 方法的事件處理程序適用於當前或將來的元素（好比由腳本建立的新元素）。api

使用方式:數組

　$(selector).on(event,childselector,data,function)瀏覽器

　　event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；

單事件處理：例如 $(selector).on("click",childselector,data,function);

多事件處理：

1.利用空格分隔多事件，例如 $(selector).on("click dbclick mouseout",childseletor,data,function);

2.利用大括號靈活定義多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector);　

3.空格相隔方式：綁定較爲死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數狀況；

大括號替代方式：綁定較爲靈活，能夠給事件單獨綁定函數；　

　　childSelector: 可選；須要添加事件處理程序的元素，通常爲selector的子元素；　　

　　data：可選；須要傳遞的參數；

　　function：必需；當綁定事件發生時，須要執行的函數；

下面看個例子就明白了：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery中on()綁定事件方式</title>
    <style type="text/css">
        .container
        {
            width: 300px;
            height: 300px;
            border: 1px #ccc solid;
            background-color: Green;
        }
        .btn-test
        {
            border: 1px #ccc solid;
            padding: 5px 15px;
            cursor: pointer;
        }
    </style>
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            /*********添加單個事件處理*********/

            $(".header").on("click", ".btn-test", function () {
                //顯示隱藏div
                $(".container").slideToggle();
            });

            /********添加多個事件處理********/

            //空格相隔方式
            $(".header").on("mouseout click", ".btn-test", function () {
                //顯示隱藏div
                $(".container").slideToggle();
            });

            //大括號替代方式
            $(".header").on({
                "mouseout": function () {
                    alert("這是mouseout事件!");
                },
                "click": function () {
                    $(".container").slideToggle();
                }
            }, ".btn-test");

            //刪除事件
            $(".header").off("click", ".btn-test");

        });
    </script>
</head>
<body>
    <div class="header">
        <input type="button" value="按鈕" class="btn-test" />
    </div>
    <div class="container">
    </div>
</body>
</html>

3.JQuery offset()，position()得到絕對,相對位置的座標方法

獲取頁面某一元素的絕對X,Y座標，能夠用offset()方法：（body屬性設置margin :0;padding:0;）

var X = $('#DivID').offset().top; 
var Y = $('#DivID').offset().left;

例如：

$(".produc a span").click(function(){
 $('body, html').animate({scrollTop:$('#buy').offset().top }, 'slow');
 });

獲取相對(父元素)位置:

var X = $('#DivID').position().top; 
var Y = $('#DivID').position().left; 

var left = $("selector").offset().left;//元素至關於文檔的左邊的偏移量
var top = $("selector").offset().top;//元素相對於文檔的上邊的偏移量
var pleft = $("selector").scrollLeft();//元素相對於滾動條左邊的偏移量
var pTop = $("selector").scrollTop();//元素相對於滾動條頂部的偏移量

參考地址：http://www.w3school.com.cn/jq...

4.jquery獲取鼠標位置

$(function () {
            //e爲事件名；
            $(document).mousemove(function (e) {
                $("p").text("X:" + e.pageX + "   Y:" + e.pageY);
            });

        });

5.jquery判斷某個元素是否含有某個class,是否存在某些屬性，怎樣移除某些屬性。

在JQuery編碼中,咱們會判斷元素是否存在某個屬性.好比是否包含 class="new" 的樣式呢.JQuery判斷就很是簡單了,由於有 hasClass這個方法 $("input[name=new]").hasClass("new") 便可判斷.
這時就沒有現成的方法了. 若是存在某個屬性 $("#aid").attr("rel") 會返回 rel的值,若是不存在 rel屬性則會返回"undefined"
undefined 就是 undefined類型 , if($("#aid").attr("rel")=="undefined") 這個判斷可能不成立.
由於類型不相同.
建議使用 if(typeof($("#aid").attr("rel"))=="undefined") 便可。

jquery移除某個jquery對象的某個屬性： $(".main").removeAttr("style");

6.jquery stop()的用法（清除動畫積累的有效方法）

一、stop([stopAll], [gotoEnd])方法有兩個參數（固然能夠不傳或直傳一個），其中stopAll的意思是清除以後的全部動畫。gotoEnd的意思是，執行完當前動畫。

二、stopAll == true時，中止隊列中的全部動畫， stopAll ==false時，只中止隊列中的當前動畫，後續動畫繼續執行。

三、gotoEnd == true時，當即跳到當前動畫的末尾， gotoEnd ==false時，停在當前狀態。且gotoEnd只有在設置了stopAll的時候才起做用

四、在項目中，若是不進行動畫隊列清理，就會產生動畫積累的問題。所以在寫入動畫時，最好先清除隊列中的重複動畫。

在項目中，例如作下拉二級導航效果，用到jquery的slideDown()與slideUp()方法，當鼠標快速晃動後，若是不進行動畫隊列清理，就會產生動畫積累，出現問題。
例如：

$(".nav li.has_list").hover(function(){
    $(this).children("a").addClass("curr");
    $(".nav li.has_list").children("div").stop(false,true);
    $(this).children("div").slideDown(400).end();                            
},function(){
    $(this).children("a").removeClass("curr");
    $(".nav li.has_list").children("div").stop(false,true);
    $(this).children("div").slideUp(400).end();
    
   }
);

7.jquery中的size()方法

jQuery 對象中元素的個數。

這個函數的返回值與 jQuery 對象的'<span title="Core/length">length</span>' 屬性一致。

例如：計算文檔中全部圖片數量

html代碼：

<img src="test1.jpg"/> <img src="test2.jpg"/>

jquery代碼：

$("img").size();

結果固然是2.

8.jquery中的$.inArray方法

語法：jQuery.inArray( value, array [, fromIndex ] )

value:要查找的值，array：一個數組，經過它來查找，fromIndex：數組索引值，表示從哪裏在開始查找。默認值是0，這將查找整個數組。

$.inArray()方法相似於JavaScript的原生.indexOf()方法，沒有找到匹配元素時它返回-1。若是數組第一個元素匹配value（參數），那麼$.inArray()返回0。

由於JavaScript將0視爲false(即 0 == false, 可是 0 !== false)，要檢查在array中是否存在value，你須要檢查它是否不等於（或大於）-1。

值之間的比較是嚴格比較（愚人碼頭注：即，===或!==比較）。下面這段代碼返回 -1 (沒有找到) ，由於字符串數組中不可能找到一個數字：

例如：

$.inArray( 5 + 5, [ "8", "9", "10", 10 + "" ] );

獲得的結果是-1，數組中有字符串"10"，可是沒有數字10.

參考地址：http://www.css88.com/jqapi-1....

9.jquery中的$.toArray()方法

toArray() 方法以數組的形式返回 jQuery 選擇器匹配的元素

例如：將 li 元素轉換爲數組，而後輸出該數組元素的 innerHTML ：

html代碼：

<button>輸出每一個列表項的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>

js代碼：

$("button").click(function(){
  x=$("li").toArray()
  for (i=0;i<x.length;i++)
    {
    alert(x[i].innerHTML);
    }
});

10.jquery的DOM元素方法get()

語法：$(selector).get(index)

get() 方法得到由選擇器指定的 DOM 元素。

例如：得到第一個 p 元素的名稱和值：

$("button").click(function(){
  x=$("p").get(0);
  $("div").text(x.nodeName + ": " + x.innerHTML);
});

參考地址：http://www.w3school.com.cn/jq...

11.toggleClass()方法

這個方法的參數接受一個或多個樣式類名做爲參數。
在第一個版本中，若是在匹配的元素集合中的該元素上存在該樣式名，則移除它，不然就加上。
例如：

$('div.tumble').toggleClass('bounce')

若是.tumble元素上存在class爲bounce，則移除；不存在則加上。
在第二個版本中，該方法第二個參數是判斷樣式類名是否被添加仍是被刪除。若是是true，這添加；若是是false，則移除。
例如：

$( "#foo" ).toggleClass( className, addOrRemove );

相似於：

if ( addOrRemove ) {
  $( "#foo" ).addClass( className );
} else {
  $( "#foo" ).removeClass( className );
}

從 jQuery 1.4 開始, 若是不將任何參數傳遞給 .toggleClass() 方法,那麼匹配元素上的全部樣式會在該方法第一次執行時被移除，第二次執行時被還原，如此往復。一樣的，從 jQuery 1.4 開始,能夠用一個函數做爲參數，返回應該顯示的樣式：

$( "div.foo" ).toggleClass(function() {
  if ( $( this ).parent().is( ".bar" ) ) {
    return "happy";
  } else {
    return "sad";
  }
});

若是匹配元素的父級元素有bar樣式類名，這個例子將爲<div class="foo">元素切換 happy 樣式類；不然他將切換 sad 樣式類。

12.val()方法

.val()方法主要用於獲取表單元素的值，如input, select 和 textarea。當在一個空集合上調用，它返回undefined。

當該集合中第一個元素是一個select-multiple（即，select元素設置了multiple屬性），.val()返回一個包含每一個選擇項值的數組。在jQuery 3.0中，若是沒有選項被選中，它將返回一個空數組；在jQuery 3.0以前的版本中，它將返回null。

對於選擇框（select），複選框（checkbox）和單選按鈕（radio），可使用:checked選擇器來獲取值，如：

// 在下拉列表中獲取所選選項的值
$( "select#foo option:checked" ).val();
 
// 直接從下拉列表中選擇值
$( "select#foo" ).val();
 
// 從複選框獲取選中值
$( "input[type=checkbox][name=bar]:checked" ).val();
 
// 從一組單選按鈕獲取選中值
$( "input[type=radio][name=baz]:checked" ).val();

注意: 經過 .val() 方法從 <textarea> 元素中獲取的值是不含有回車（r）字符的。可是若是該值是經過 XHR 傳遞給服務器的，回車（r）字符會被保留（或者是被瀏覽器添加的，可是在原始數據中並不包含回車（r））。可使用下面的 valHook 方法解決這個問題：

$.valHooks.textarea = {
  get: function( elem ) {
    return elem.value.replace( /\r?\n/g, "\r\n" );
  }
};

13.noConflict() 方法

語法：jQuery.noConflict(removeAll)
removeAll：布爾值。指示是否容許完全將 jQuery 變量還原。

noConflict() 方法讓渡變量的控制權。該方法釋放對

變量的控制。該方法也可用於爲 jQuery 變量規定新的自定義名稱。

例1，將 $ 引用的對象映射回原始的對象：

jQuery.noConflict();
jQuery("div p").hide();    // 使用 jQuery
$("content").style.display = "none";    // 使用其餘庫的 $()

例2，能夠將 jQuery.noConflict() 與簡寫的 ready 結合，使代碼更緊湊：

jQuery.noConflict()(function(){
    // 使用 jQuery 的代碼
});
... // 其餘庫使用 $ 作別名的代碼

例3，建立一個新的別名用以在接下來的庫中使用 jQuery 對象：

var j = jQuery.noConflict();
j("div p").hide();    // 基於 jQuery 的代碼
$("content").style.display = "none";    // 基於其餘庫的 $() 代碼

例4，徹底將 jQuery 移到一個新的命名空間：

var dom = {};
dom.query = jQuery.noConflict(true);

dom.query("div p").hide();    // 新 jQuery 的代碼
$("content").style.display = "none";    // 另外一個庫 $() 的代碼
jQuery("div > p").hide();    // 另外一個版本 jQuery 的代碼

14.$.proxy() 方法

$.proxy 方法接受一個已有的函數，並返回一個帶特定上下文的新的函數。

該方法一般用於向上下文指向不一樣對象的元素添加事件。

語法 1: $(selector).proxy(function,context)
例子：

<div>這是一個 div 元素。</div>
$(document).ready(function(){
    test=function(){ 
        this.txt="這是一個對象屬性";
        $("div").click($.proxy(this.myClick,this));
    };

    test.prototype.myClick = function(event){
        console.log(this.txt);
        console.log(event.currentTarget.nodeName);
    };

    var x = new test();
});

語法2:$(selector).proxy(context,name)

參數	描述
fuction	要被調用的已有的函數。
context	函數所在的對象的名稱。
name	已有的函數，其上下文將被改變（應該是 context 對象的屬性）。

例子：

$(document).ready(function(){
  var objPerson = {
    name: "John Doe",
    age: 32,
    test: function(){
      $("p").after("Name: " + this.name + "<br> Age: " + this.age);
    }
  };
  $("button").click($.proxy(objPerson,"test"));
});

15.$.isWindow()方法

判斷傳入的參數是否爲 window對象

$.isWindow() 函數用於判斷指定參數是不是一個window窗口。

語法：$.isWindow( object ) 其中object爲任意類型須要進行判斷的任意值。

$(function () { 
    $("b").append( "" + $.isWindow(window) );
})

16.jQuery.data() 方法

data() 方法向被選元素附加數據，或者從被選元素獲取數據。

先看個實例，向元素附加數據，而後取回該數據：

$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});

從元素返回數據：$(selector).data(name)
參數name:可選。規定要取回的數據的名稱。若是沒有規定名稱，則該方法將以對象的形式從元素中返回全部存儲的數據。

向元素附加數據:$(selector).data(name,value)
參數name：必需。規定要設置的數據的名稱。
參數value：必需。規定要設置的數據的值。

使用對象向元素附加數據：$(selector).data(object)
參數object：必需。規定包含名稱/值對的對象。

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

從jQuery 1.4.3起， HTML 5 data- 屬性將自動被引用到jQuery的數據對象中。嵌入式破折號處理屬性（ attributes）的方式在 jQuery 1.6 中已經改變，以使之符合W3C HTML5 規範.

舉個例子, 給定下面的HTML:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

下面全部的 jQuery 代碼都能運行。

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";

以上代碼的第二條語句正確是表述了該元素的data-last-value屬性。若是沒有傳遞key參數的數據存儲， jQuery將在元素的屬性中搜索，將駝峯式字符串轉化爲中橫線字符串，而後在結果前面加上data-。因此，該字符串lastValue將被轉換爲data-last-value。

17.$.expr自定義僞類選擇器

例如：

<div id="con1"></div>
<div id="con2"></div>
<div id="con3"></div>

$(function() {
        //初始測試數據
        var init=function(){
            $("#con1").add("#con3").data("key","10001");
        };
        init();
        var select="newSelect";
        var name="key";
        //定義一個新選擇器
        $.expr[ ":" ][ select ] = function( elem ) {
            return $.data( elem, name );
        };
        //使用
        $("div:newSelect").each(function(){
            console.log(this.id);//結果:con1 con3
        })
    });

18.$.map()

例1，原數組中大於 0 的元素加 1 ，不然刪除。：

$.map( [0,1,2], function(n){
  return n > 0 ? n + 1 : null;
});

結果：[2, 3]

例2：

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

具體參考地址：《jquery中的map()方法與js中的map()方法》

19.is()方法

定義：is() 根據選擇器、元素或 jQuery 對象來檢測匹配元素集合，若是這些元素中至少有一個元素匹配給定的參數，則返回 true。

語法：.is(selector)

說明：與其餘篩選方法不一樣，.is() 不建立新的 jQuery 對象。相反，它容許咱們在不修改 jQuery 對象內容的狀況下對其進行檢測。這在 callback 內部一般比較有用，好比事件處理程序。

假設咱們有一個列表，其中兩個項目包含子元素：

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

您能夠向 <ul> 元素添加 click 處理程序，而後把代碼限制爲只有當列表項自己，而非子元素，被點擊時才進行觸發：

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

如今，當用戶點擊的是第一個列表項中的單詞 "list" 或第三個列表項中的任何單詞時，被點擊的列表項會被設置爲紅色背景。不過，當用戶點擊第一個列表項中的 item 1 或第二個列表項中的任何單詞時，都不會有任何變化，這是由於這上面的狀況中，事件的目標分別是 是 <span>。

20.wrap(),unwrap(),wrapAll(),wrapInner(),unwrap()

wrap() 方法把每一個被選元素放置在指定的 HTML 內容或元素中。

wrapAll() 在指定的 HTML 內容或元素中放置全部被選的元素。

wrapInner() 方法使用指定的 HTML 內容或元素，來包裹每一個被選元素中的全部內容 (inner HTML)。

unwrap() 方法刪除被選元素的父元素。

下面舉例子：

<div class="content">
    <p>我是第一條文本內容。</p>
    <p>我是第二條文本內容。</p>
</div>

使用wrap()方法：

$("p").wrap("<strong></strong>");

結果：

<div class="content">
    <strong><p>我是第一條文本內容。</p></strong>
    <strong><p>我是第二條文本內容。</p></strong>
</div>

使用wrapAll()方法：

$("p").wrapAll("<strong></strong>");

結果：

<div class="content">
    <strong><p>我是第一條文本內容。</p><p>我是第二條文本內容。</p></strong>
</div>

使用wrapInner()方法：

$("p").wrapInner("<strong></strong>");

結果：

<div class="content">
    <p><strong>我是第一條文本內容。</strong></p>
    <p><strong>我是第二條文本內容。</strong></p>
</div>

使用unwrap()方法：

$("p").unwrap();

結果：

<p>我是第一條文本內容。</p>
<p>我是第二條文本內容。</p>

在來一個例子，每隔4個label用一個class爲same的div元素包裹，html代碼：

<div class="city">
 <label>北京</label>
 <label>上海</label>
 <label>北京</label>
 <label>上海</label>
 
 <label>北京</label>
 <label>上海</label>
 <label>北京</label>
 <label>上海</label>
 
 <label>北京</label>
 <label>上海</label>
 <label>北京</label>
 <label>上海</label>
 
 <label>北京</label>
 <label>上海</label>
</div>

js代碼：

$(function(){
    $(".city label").each(function(i){
        $(".city label").slice(i*4,i*4+4).wrapAll("<div class='same'></div>");
    });
})

結果：

<div class="city">
 <div class="same"><label>北京</label><label>上海</label><label>北京</label><label>上海</label></div>
 <div class="same"><label>北京</label><label>上海</label><label>北京</label><label>上海</label></div>
 <div class="same"><label>北京</label><label>上海</label><label>北京</label><label>上海</label></div>
 <div class="same"><label>北京</label><label>上海</label></div>
</div>

21.jQuery 事件 - target 屬性

target 屬性規定哪一個 DOM 元素觸發了該事件

例如，顯示哪一個 DOM 元素觸發了事件：

<h1>這是一個標題</h1>
<h2>這是另外一個標題</h2>
<p>這是一個段落</p>
<button>這是一個按鈕</button>
<p>標題、段落和按鈕元素定義了一個點擊事件。若是您觸發了事件，下面的 div 會顯示出哪一個元素觸發了該事件。</p>
<div></div>
<script type="text/javascript">
$(document).ready(function(){
  $("p, button, h1, h2").click(function(event){
    $("div").html("點擊事件由一個 " + event.target.nodeName + " 元素觸發");
  });
});
</script>

運行結果如圖：

event.target
說明：引起事件的DOM元素。

this和event.target的區別
js中事件是會冒泡的，因此this是能夠變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；

this和event.target的相同點
this和event.target都是dom對象，若是要使用jquey中的方法能夠將他們轉換爲jquery對象：和
(event.target);

//對於沒有子項的菜單，統一設置

$("li:not(:has(ul))").css({
    "cursor":"default",
    "list-style-image":"none"
});

22.not()方法

定義：not() 從匹配元素集合中刪除元素。

例如，從包含全部段落的集合中刪除 id 爲 "selected" 的段落：

<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<p id="selected">This is a paragragh.</p>
<p>This is a paragragh.</p>
<p>This is a paragragh.</p>

<script>
$("p").not("#selected").css('background-color', 'red');
</script>

結果如圖：

23.has()方法

定義：has() 將匹配元素集合縮減爲擁有匹配指定選擇器或 DOM 元素的後代的子集。
語法：.has(selector)

說明：若是給定一個表示 DOM 元素集合的 jQuery 對象，.has() 方法用匹配元素的子集來構造一個新的 jQuery 對象。所使用的選擇器用於檢測匹配元素的後代；若是任何後代元素匹配該選擇器，該元素將被包含在結果中。

請思考下面這個帶有嵌套列表的頁面：

<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>
  <li>list item 4</li>
</ul>

咱們能夠對列表項集合應用該方法，就像這樣：

$('li').has('ul').css('background-color', 'red');

該調用的結果是，項目 2 的背景被設置爲紅色，這是由於該項目是後代中惟一擁有 <ul> 的 <li>。

未完待後續慢慢補充。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。