Rumah > hujung hadapan web > tutorial js > Ringkasan fungsi jquery biasa dan kaedah_jquery

Ringkasan fungsi jquery biasa dan kaedah_jquery

WBOY
Lepaskan: 2016-05-16 15:41:15
asal
1124 orang telah melayarinya

1.kelewatan(tempoh,[Nama gilir])

Tetapkan kelewatan untuk menangguhkan pelaksanaan item berikutnya dalam baris gilir.

Baharu dalam jQuery 1.4. Digunakan untuk menangguhkan pelaksanaan fungsi dalam baris gilir. Ia boleh sama ada menangguhkan pelaksanaan baris gilir animasi atau digunakan dalam baris gilir tersuai.

tempoh: masa tunda, unit: milisaat

Nama giliran: kata nama baris gilir, lalai ialah Fx, baris gilir animasi.

Contoh:

Kesan animasi pemuatan tertangguh kepala dan bawah

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

2.jQuery secara langsung(jenis, fn) pelaksanaan acara yang diwakilkan

Kaedah baharu dalam Pertanyaan 1.3. Ikat pengendali acara (seperti acara klik) kepada semua elemen padanan semasa dan akan datang. Acara tersuai juga boleh terikat.

Pada masa ini menyokong klik, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.

Kabur, fokus, masukkan tetikus, biarkan tetikus, tukar, serahkan

belum disokong lagi

Berbeza daripada bind(), live() hanya boleh mengikat satu acara pada satu masa.

Kaedah ini sangat serupa dengan pengikatan tradisional Perbezaannya ialah menggunakan acara langsung untuk mengikat akan mengikat acara kepada semua elemen semasa dan akan datang pada halaman (menggunakan perwakilan). Contohnya, jika anda menggunakan secara langsung untuk mengikat acara klik pada semua li pada halaman. Kemudian apabila li ditambahkan pada halaman ini pada masa hadapan, acara klik li yang baru ditambah ini masih tersedia. Tidak perlu untuk mengikat semula acara dengan elemen yang baru ditambah ini.

.live() sangat serupa dengan pemalam liveQuery yang popular, tetapi mempunyai perbezaan utama berikut:

.live pada masa ini hanya menyokong subset semua acara Sila rujuk penerangan di atas untuk senarai yang disokong.

.live tidak menyokong fungsi panggil balik gaya "tanpa kesudahan" yang disediakan oleh liveQuery. .live hanya boleh mengikat fungsi pengendalian acara.

.live tidak mempunyai proses "persediaan" dan "pembersihan". Kerana semua acara diwakilkan dan bukannya terikat secara langsung kepada elemen.

Untuk mengalih keluar acara yang terikat dengan langsung, sila gunakan kaedah mati

Contoh penggunaan:

<div class=”myDiv”></div>
Salin selepas log masuk

jquery:

$(“.myDiv”).live(“click”, function(){
alert(“clicked!”);
});
Salin selepas log masuk

Jika anda menggunakan javascript untuk mencipta elemen secara dinamik dengan kelas mydiv, pop timbul masih akan muncul apabila anda mengklik pada elemen tersebut. Mengapa ia berlaku selepas menggunakan secara langsung? Ini kerana jquery menggunakan mekanisme menggelegak acara untuk mengikat acara secara langsung pada dokumen, dan kemudian mencari sumber acara melalui event.target. Ini berbeza daripada pemalam jquery.livequery menyemak setiap 20 milisaat dan mengikat semula acara jika ada yang baharu.

Sudah tentu ada kelebihan dan kekurangan untuk menggunakan secara langsung:

Kelebihannya ialah: tidak perlu mentakrifkan peristiwa berulang kali apabila elemen dikemas kini.

Kelemahannya ialah: mengikat acara pada dokumen akan memanggilnya sekali untuk setiap elemen pada halaman Jika digunakan secara tidak betul, ia akan menjejaskan prestasi dengan serius.

Dan ia tidak menyokong kabur, fokus, masukkan tetikus, biarkan tetikus, tukar, serahkan.

2. Alih keluar acara terikat langsung

Dalam Jquery, gunakan secara langsung untuk mengikat acara Jika anda ingin mengalih keluar acara, gunakan kaedah mati.

Contohnya:

$(“.myDiv”).die("click");
Salin selepas log masuk

Ini akan mengalih keluar acara klik terikat.

Kaedah 3.JQuery offset(), position() untuk mendapatkan koordinat kedudukan mutlak dan relatif

Untuk mendapatkan koordinat X, Y mutlak elemen pada halaman, anda boleh menggunakan kaedah offset(): (margin tetapan atribut badan: 0; padding: 0;)

var X = $('#DivID').offset().top; 
var Y = $('#DivID').offset().left; 
Salin selepas log masuk

Contohnya:

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

Dapatkan kedudukan relatif (elemen induk):

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();//元素相对于滚动条顶部的偏移量
Salin selepas log masuk

4.jquery untuk mendapatkan kedudukan tetikus

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

    });
Salin selepas log masuk

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()的用法(清除动画积累的有效方法)

1、stop([stopAll], [gotoEnd])方法有两个参数(当然可以不传或直传一个),其中stopAll的意思是清除之后的所有动画。gotoEnd的意思是,执行完当前动画。

2、stopAll == true时,停止队列中的所有动画, stopAll ==false时,只停止队列中的当前动画,后续动画继续执行。

3、gotoEnd == true时,立即跳到当前动画的末尾, gotoEnd ==false时,停在当前状态。且gotoEnd只有在设置了stopAll的时候才起作用

4、在项目中,如果不进行动画队列清理,就会产生动画积累的问题。因此在写入动画时,最好先清除队列中的重复动画。

在项目中,例如做下拉二级导航效果,用到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();
  }
);
Salin selepas log masuk

以上内容就是本文关于jquery常用函数与方法汇总,希望大家喜欢。

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