Rumah > hujung hadapan web > tutorial js > jQuery 1.9.1 Siri Analisis Kod Sumber (14) jQuery Tools_jquery yang biasa digunakan

jQuery 1.9.1 Siri Analisis Kod Sumber (14) jQuery Tools_jquery yang biasa digunakan

WBOY
Lepaskan: 2016-05-16 15:28:03
asal
1181 orang telah melayarinya

Untuk bersedia untuk bab seterusnya menganalisis pemprosesan animasi, mari kita lihat beberapa alatan dahulu. Alat giliran sering digunakan dalam pemprosesan animasi.

jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback )) (Mendapatkan atau menetapkan baris gilir fungsi untuk dilaksanakan pada elemen padanan semasa. Jika objek jQuery semasa sepadan berbilang elemen : Apabila mendapatkan baris gilir, hanya dapatkan baris gilir pada elemen padanan pertama apabila menetapkan baris gilir (ganti gilir, tambah fungsi), tetapkan secara berasingan untuk setiap elemen padanan jika anda perlu mengalih keluar dan melaksanakan yang pertama dalam baris gilir; ., sila gunakan fungsi dequeue() Anda juga boleh menggunakan fungsi clearQueue() untuk mengosongkan baris gilir yang ditentukan)

jQuery.fn. dequeue([ dequeueName ]) (mengalih keluar fungsi pertama dalam baris gilir yang ditentukan bagi setiap elemen padanan dan melaksanakan fungsi yang dialih keluar. Anda juga boleh menggunakan fungsi clearQueue() untuk mengosongkan baris gilir yang ditentukan (Fungsi dalam ia tidak akan dilaksanakan))

jQuery.fn. clearQueue([ dequeueName ]) (kosongkan semua item yang tidak dilaksanakan dalam baris gilir yang ditentukan bagi setiap elemen yang sepadan)

jQuery.error(msg) (Melemparkan pengecualian yang mengandungi maklumat rentetan yang ditentukan.)

jQuery.each(objek, panggil balik) (merentasi objek dan tatasusunan yang ditentukan, dan menggunakan setiap sifat objek (atau setiap ahli tatasusunan) sebagai konteks untuk melintasi dan melaksanakan fungsi yang ditentukan. Konteks yang dipanggil bermakna Penunjuk ini di dalam fungsi merujuk kepada elemen Fungsi ini kepunyaan objek jQuery global Perhatikan bahawa ini berbeza daripada setiap () fungsi objek jQuery (contoh), tetapi setiap () pelaksanaan jQuery. objek (contoh) juga memanggil jQuery.each )

jQuery.proxy() (Tukar konteks fungsi. Anda boleh menghantar fungsi yang ditentukan ke dalam fungsi ini, yang akan mengembalikan fungsi baharu. Kod pelaksanaannya kekal tidak berubah, tetapi konteks (ini) di dalam fungsi telah diubah. Untuk nilai yang dinyatakan

 Penggunaan 1:

jQuery.proxy( function, context [, additionalArguments ] )
Salin selepas log masuk

Tukar objek konteks fungsi fungsi kepada konteks yang ditentukan.

Penggunaan 2:

jQuery.proxy( context, name [, additionalArguments ] )
Salin selepas log masuk

Tukar konteks nama fungsi kepada konteks yang ditentukan. Nama fungsi hendaklah menjadi atribut objek konteks.

jQuery.map(objek, panggil balik) (Gunakan fungsi yang ditentukan untuk memproses setiap elemen dalam tatasusunan (atau setiap atribut objek), dan merangkum hasil pemprosesan sebagai tatasusunan baharu dan mengembalikannya. Terdapat juga jQuery perpustakaan dengan nama yang sama kaedah Instance jQuery.fn.map(), yang hanya digunakan untuk melintasi elemen yang dipadankan dengan objek jQuery semasa)

jQuery.fn.data([ key [, value ] ]) (akses data pada semua elemen yang dipadankan dengan objek jQuery semasa)

jQuery.fn.removeData(keys) (mengalih keluar item data dengan kunci yang ditentukan disimpan pada setiap elemen yang dipadankan dengan objek jQuery semasa)

jQuery.support (mengembalikan maklumat ciri atau pepijat penyemak imbas yang sedang digunakan oleh pengguna. Sifat ini ialah objek. Sifat objek ini tidak boleh diubah dan jQuery tidak menjamin bahawa sifat yang dinyatakan akan tersedia pada masa hadapan versions. , sifat ini digunakan terutamanya oleh pembangun pemalam atau kernel)

jQuery.contains(container, contained) (tentukan sama ada elemen yang ditentukan mengandungi elemen lain. Ringkasnya, fungsi ini digunakan untuk menentukan sama ada elemen DOM lain adalah turunan daripada elemen DOM yang ditentukan)

jQuery.extend([ deep ], target , object1 [, objectN... ]) (Gabungkan kandungan satu atau lebih objek ke dalam objek sasaran. Fungsi ini boleh menambah sifat ahli dan kaedah satu atau lebih objek Salin kepada objek yang ditentukan, parameter dalam digunakan untuk menunjukkan sama ada untuk bergabung secara rekursif secara mendalam)

jQuery.fn.extend(objek) (melanjutkan satu atau lebih sifat dan kaedah contoh untuk jQuery (terutamanya digunakan untuk kaedah sambungan))

jQuery.globalEval(kod) (melaksanakan sekeping kod JavaScript secara global. Fungsi ini serupa dengan fungsi JavaScript eval() biasa. Perbezaannya ialah skop kod yang dilaksanakan oleh jQuery.globalEval() ialah global skop)

jQuery.grep(array, function [, invert ]) (menggunakan fungsi yang ditentukan untuk menapis elemen dalam tatasusunan dan mengembalikan tatasusunan yang ditapis. Tatasusunan sumber tidak akan terjejas dan hasil penapisan hanya ditunjukkan dalam tatasusunan hasil dikembalikan )

jQuery.inArray(value, array [, fromIndex ]) (Cari nilai yang ditentukan dalam tatasusunan dan kembalikan nilai indeksnya. Jika nilai itu tidak wujud dalam tatasusunan, ia mengembalikan -1)

jQuery.isArray(objek) (menentukan sama ada parameter yang ditentukan ialah tatasusunan)

jQuery.isEmptyObject(objek) (menentukan sama ada parameter yang ditentukan ialah objek kosong. Apa yang dipanggil "objek kosong" tidak termasuk sebarang atribut (tersuai) yang boleh dikira. Ringkasnya, objek itu tidak mempunyai atribut. Lelaran melalui untuk ...dalam)

jQuery.isPlainObject(objek) (menentukan sama ada parameter yang ditentukan ialah objek tulen. Apa yang dipanggil "objek tulen" bermaksud objek itu dicipta melalui "{}" atau "Objek baharu")

jQuery.isFunction(objek) (menentukan sama ada parameter yang ditentukan ialah fungsi)

jQuery.isNumeric(nilai) (menentukan sama ada parameter yang ditentukan ialah nilai angka)

jQuery.isWindow(objek) (menentukan sama ada parameter yang ditentukan ialah tetingkap)

jQuery.isXMLDoc(nod) (menentukan sama ada nod DOM terletak dalam dokumen XML, atau ia sendiri adalah dokumen XML. Fungsi ini digunakan terutamanya untuk menentukan sama ada dokumen yang ditentukan ialah dokumen XML atau HTML (atau XHTML ) dokumen)

jQuery.makeArray(objek) (menukar objek seperti tatasusunan kepada objek tatasusunan sebenar. Apa yang dipanggil "objek seperti tatasusunan" ialah objek Objek biasa, tetapi ia sangat serupa dengan objek tatasusunan: ia mempunyai atribut panjang dan berakhir dengan 0 , 1, 2, 3... dan nombor lain sebagai nama atribut Walau bagaimanapun, ia bukan tatasusunan lagi, dan tiada kaedah terbina dalam yang diwarisi daripada objek prototaip tatasusunan (. contohnya: push(), sort(), dsb.)

jQuery.noop() (adalah fungsi kosong, ia tidak melakukan apa-apa. Apabila kadangkala anda perlu memasukkan parameter fungsi dan mahu ia tidak melakukan apa-apa, anda boleh menggunakan fungsi ini, dan tidak perlu Buat kosong baharu fungsi)

jQuery.now() (mengembalikan bilangan milisaat sejak tengah malam pada 1 Januari 1970. Fungsi ini serupa dengan Date().getTime()) baru

jQuery.parseHTML(htmlString [, context ] [, keepScripts ]) (menghuraikan rentetan HTML ke dalam tatasusunan nod DOM yang sepadan. Fungsi ini akan menggunakan fungsi penciptaan elemen DOM asli untuk menukar rentetan HTML menjadi Koleksi elemen DOM, anda boleh memasukkan elemen DOM ini ke dalam dokumen)

jQuery.parseJSON(jsonString) (Tukar rentetan JSON yang terbentuk dengan baik kepada objek JavaScript yang sepadan. Apa yang dipanggil "terbentuk dengan baik" bermakna rentetan yang ditentukan mesti mematuhi format JSON yang ketat, contohnya: atribut nama mesti Tambah petikan berganda, dan nilai rentetan juga mesti menggunakan petikan berganda Jika rentetan JSON dengan format yang tidak lengkap dihantar, pengecualian JS akan dilemparkan)

.

jQuery.parseXML(XMLString) (menghuraikan rentetan ke dalam dokumen XML yang sepadan. Fungsi ini akan menggunakan fungsi penghuraian terbina dalam penyemak imbas untuk mencipta dokumen XML yang sah, yang boleh dihantar ke dalam fungsi jQuery() untuk mencipta Objek jQuery biasa, membenarkan ia dilalui atau dimanipulasi)

jQuery.trim(str) (Alih keluar aksara ruang putih di kedua-dua hujung rentetan. Fungsi ini boleh mengalih keluar aksara ruang putih di kedua-dua hujung rentetan (sehingga rentetan bukan ruang putih pertama ditemui). Ia akan mengosongkan termasuk simbol baris baharu , ruang, tab dan aksara ruang putih biasa yang lain)

jQuery.type(object)(确定JavaScript内置对象的类型,并返回小写形式的类型名称。JavaScript也自带有一个typeof运算符,可以确定数据的类型。不过,对于绝大多数对象而言,typeof运算符都返回"object",无法区分具体的类型。jQuery.type()可以更加精确地确定JS内置对象的类型。例如:对于new Number(5),typeof返回"object",jQuery.type()返回"number";对于new Date(),typeof返回"object",jQuery.type()返回"date"。type的返回的结果有"Boolean Number String Function Array Date RegExp Object Error"的小写)

jQuery.unique(array)(根据元素在文档中出现的先后顺序对DOM元素数组进行排序,并移除重复的元素。

  注意:该函数仅作用于DOM元素数组,而不是数字、字符串或其他类型。此外,这里的重复指的是两个元素实际上是同一个元素(通过全等"==="来判断),而不是指两个属性相同的元素。

  警告:通过实际测试发现,该函数并不能按照预期返回正确的结果。在不同的浏览器中、在不同版本的jQuery中,其返回结果可能不一致(请参考下面的演示代码))

jQuery.fn.promise([type,] obj)(获取已解决的延时对象的promise,并和obj对象合并。并给指定类型的队列清空的时候(默认的类型是FX)添加解决处理)

a.jQuery.trim源码详解

  trim函数有两个分支,第一个分支是:如果浏览器支持trim函数,则使用浏览器本地的trim函数;否则走第二个分支使用正则去除前后两边的空白。

//如果可以则使用浏览器支持的trim函数
// core_version.trim
jQuery.trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
function( text ) {
  return text == null ?
  "" :
  core_trim.call( text );
} :
//否则使用正则去除前后两端的空白符
//rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
function( text ) {
  return text == null ?
  "" :
  ( text + "" ).replace( rtrim, "" );
},
Salin selepas log masuk

b. 队列(queue)详解

jQuery.fn.queue( type, data )
  处理步骤如下:
  默认队列是fx类型的标准动画效果队列。如果队列类型不是字符串,则需要按默认类型调整数据。
if ( typeof type !== "string" ) {
  data = type;
  type = "fx";
  setter--;
}
Salin selepas log masuk

  根据参数判断是获取还是设置指定类型的队列。

  如果是获取直接获取当前jQuery匹配的元素的第一个元素对应类型的队列;

//获取指定类型的队列
if ( arguments.length < setter ) {
  return jQuery.queue( this[0], type );
}
Salin selepas log masuk

  如果是设置,则遍历当前jQuery匹配的元素,给每个元素都设置指定类型的队列,并给每一个元素设置相应的hooks(用来做拓展处理,比如最后清除队列使用)

return data === undefined &#63;
this :
//每一个jQuery的元素都添加队列
this.each(function() {
  var queue = jQuery.queue( this, type, data );
  //确保队列有一个hooks。执行完这段代码以后保存了一个清空队列的函数empty
  jQuery._queueHooks( this, type );
  //如果为"fx"(表示jQuery中的标准动画效果队列),并且队列中第一个函数没有正在执行
  //则执行队列中第一个函数。可见动画队列添加后会立马执行动画
  if ( type === "fx" && queue[0] !== "inprogress" ) {
    jQuery.dequeue( this, type );
  }
})
Salin selepas log masuk

  函数中使用了低级api jQuery.queue函数,是获取/设置队列的基础接口,源码如下

queue: function( elem, type, data ) {
  var queue;
  if ( elem ) {
    //先获取相应类型的队列
    type = ( type || "fx" ) + "queue";
    queue = jQuery._data( elem, type );
    //在队列末尾添加函数
    if ( data ) {
      if ( !queue || jQuery.isArray(data) ) {
        queue = jQuery._data( elem, type, jQuery.makeArray(data) );
      } else {
        queue.push( data );
      }
    }
    return queue || [];
  }
}
Salin selepas log masuk

c.jQuery.fn.dequeue

  移除每个匹配元素的指定队列中的第一个函数,并执行被移除的函数。内部调用jQuery.dequeue来实现。jQuery.dequeue的源码如下

  jQuery.dequeue中需要特别注意的是对FX动画队列的处理

dequeue: function( elem, type ) {
  type = type || "fx";
  var queue = jQuery.queue( elem, type ),
    startLength = queue.length,
    fn = queue.shift(),//取出队列中第一个函数
    hooks = jQuery._queueHooks( elem, type ),
    next = function() {
      jQuery.dequeue( elem, type );
    };
  //如果FX队列中出列,总是取出进度点
  if ( fn === "inprogress" ) {
    fn = queue.shift();
    startLength--;
  }
  hooks.cur = fn;
  if ( fn ) {
    // 添加进度定点,以防止FX队列自动dequeue
    if ( type === "fx" ) {
      queue.unshift( "inprogress" );
    }
    // 清理最后一个队列停止函数
    delete hooks.stop;
    //next和hooks会传递给回调
    fn.call( elem, next, hooks );
  }
  //队列长度为0且hooks存在,则删除队列
  if ( !startLength && hooks ) {
    hooks.empty.fire();
  }
}
Salin selepas log masuk

  注意执行队列中函数传递的参数( elem, next, hooks )。

以上所述就是小编给大家分享的jQuery 1.9.1源码分析系列(十四)之常用jQuery工具,希望大家喜欢。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan