Kemahiran praktikal jQuery yang penting (Bahagian 2)

Kemahiran praktikal jQuery yang penting (Bahagian 2)_jquery

WBOY

Lepaskan： 2016-05-16 15:33:47

asal

1294 orang telah melayarinya

Contoh dalam artikel ini meringkaskan teknik pembangunan kod jQuery klasik dan praktikal. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
23. Fungsi pemuatan tertunda jQuery

Mahu menangguhkan sesuatu?

$(document).ready(function() {
 window.setTimeout(function() {
  // do something
 }, 1000);
});

Salin selepas log masuk

24. Alih keluar fungsi perkataan

Ingin mengalih keluar perkataan tertentu?

$(document).ready(function() {
 var el = $('#id');
 el.html(el.html().replace(/word/ig, ""));
});

Salin selepas log masuk

25 Sahkan sama ada elemen itu wujud dalam koleksi objek jquery

Cuma uji dengan sifat .length jika unsur itu wujud.

$(document).ready(function() {
 if ($('#id').length) {
 // do something
 }
});

Salin selepas log masuk

26 Jadikan keseluruhan DIV boleh diklik

Ingin menjadikan div lengkap boleh diklik?

$(document).ready(function() {
 $("div").click(function(){
  //get the url from href attribute and launch the url
  window.location=$(this).find("a").attr("href"); return false;
 });
// how to use
<DIV><A href="index.html">home</A></DIV>

});

Salin selepas log masuk

27 Penukaran antara ID dan Kelas

Apabila menukar saiz Tetingkap, tukar antara ID dan Kelas

$(document).ready(function() {
 function checkWindowSize() {
 if ( $(window).width() > 1200 ) {
  $('body').addClass('large');
 }
 else {
  $('body').removeClass('large');
 }
 }
$(window).resize(checkWindowSize);
});

Salin selepas log masuk

28 Klon objek

Mengklon div atau elemen lain.

$(document).ready(function() {
 var cloned = $('#id').clone();
// how to use
<DIV id=id></DIV>

});

Salin selepas log masuk

29 Letakkan elemen di tengah-tengah skrin

　Pusat elemen di tengah skrin anda.

$(document).ready(function() {
 jQuery.fn.center = function () {
  this.css("position","absolute");
  this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
  this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
  return this;
 }
 $("#id").center();
});

Salin selepas log masuk

30 Tulis pemilih anda sendiri

Tulis pemilih anda sendiri.

$(document).ready(function() {
 $.extend($.expr[':'], {
  moreThen1000px: function(a) {
   return $(a).width() > 1000;
  }
 });
 $('.box:moreThen1000px').click(function() {
  // creating a simple js alert box
  alert('The element that you have clicked is over 1000 pixels wide');
 });
});

Salin selepas log masuk

31 Kira bilangan elemen

Kira unsur.

$(document).ready(function() {
 $("p").size();
});

Salin selepas log masuk

32 Gunakan Peluru anda sendiri

Ingin menggunakan peluru anda sendiri dan bukannya menggunakan peluru standard atau imej?

$(document).ready(function() {
 $("ul").addClass("Replaced");
 $("ul > li").prepend("&#8210; ");
 // how to use
 ul.Replaced { list-style : none; }
});

Salin selepas log masuk

33 Rujuk perpustakaan kelas Jquery pada hos Google

　Biar Google mengehoskan skrip jQuery untuk anda. Ini boleh dilakukan dalam 2 cara.

//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
 // do something
});
</SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

 // Example 2:(the best and fastest way)
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

Salin selepas log masuk

34 Lumpuhkan kesan Jquery (animasi)

Lumpuhkan semua kesan jQuery

$(document).ready(function() {
 jQuery.fx.off = true;
});

Salin selepas log masuk

35 Penyelesaian kepada konflik dengan perpustakaan Javascript lain

Untuk mengelakkan konflik dengan perpustakaan lain di tapak web anda, anda boleh menggunakan Kaedah jQuery ini dan menetapkan nama pembolehubah yang berbeza dan bukannya tanda dolar.

$(document).ready(function() {
 var $jq = jQuery.noConflict();
 $jq('#id').show();
});

Salin selepas log masuk

Di atas adalah mengenai kemahiran praktikal jQuery, saya harap ia akan membantu pembelajaran semua orang.