Kemahiran praktikal jQuery yang penting (Bahagian 2)_jquery

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);
});

24. Alih keluar fungsi perkataan

Ingin mengalih keluar perkataan tertentu?

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

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
 }
});

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>

});

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);
});

28 Klon objek

Mengklon div atau elemen lain.

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

});

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();
});

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');
 });
});

31 Kira bilangan elemen

Kira unsur.

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

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("‒ ");
 // how to use
 ul.Replaced { list-style : none; }
});

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>

34 Lumpuhkan kesan Jquery (animasi)

Lumpuhkan semua kesan jQuery

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

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();
});

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