Ringkasan Jquery tips_jquery

Disenaraikan di bawah adalah beberapa petua penggunaan Jquery. Sebagai contoh, terdapat fungsi seperti melumpuhkan klik kanan, menyembunyikan teks kotak teks carian, membuka pautan dalam tetingkap baharu, mengesan penyemak imbas, pramuat imej, menukar gaya halaman, ketinggian yang sama bagi semua lajur, mengawal saiz fon halaman secara dinamik dan mendapatkan Nilai X dan nilai Y penuding tetikus , sahkan sama ada elemen itu kosong, gantikan elemen, beban malas, sahkan sama ada elemen itu wujud dalam koleksi Jquery, jadikan DIV boleh diklik, klon objek, pusatkan elemen, kirakan. bilangan elemen, gunakan perpustakaan kelas Jquery pada hos Google, lumpuhkan Jquery Kesannya adalah untuk menyelesaikan masalah konflik antara perpustakaan kelas Jquery dan perpustakaan kelas Javascript yang lain.

1. Mengklik kanan adalah dilarang

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

2. Sembunyikan teks kotak teks carian
Sembunyikan apabila diklik dalam medan carian, nilainya.(contoh boleh didapati di bawah dalam medan ulasan)

$(document).ready(function() {
$("input.text1").val("Enter your search text here");
  textFill($('input.text1'));
});
 
  function textFill(input){ //input focus text function
  var originalvalue = input.val();
  input.focus( function(){
    if( $.trim(input.val()) == originalvalue ){ input.val(''); }
  });
  input.blur( function(){
    if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
  });
}

3. Buka pautan dalam tetingkap baharu
XHTML 1.0 Strict tidak membenarkan atribut ini dalam kod, jadi gunakan ini untuk memastikan kod itu sah.

$(document).ready(function() {
  //Example 1: Every link will open in a new window
  $('a[href^="http://"]').attr("target", "_blank");
 
  //Example 2: Links with the rel="external" attribute will only open in a new window
  $('a[@rel$='external']').click(function(){
   this.target = "_blank";
  });
});
// how to use
<A href="http://www.opensourcehunter.com" rel=external>open link</A>

4. Kesan penyemak imbas
Nota: Dalam versi jQuery 1.4, $.support menggantikan pembolehubah $.browser

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
  // do something
}
 
// Target Safari
if( $.browser.safari ){
  // do something
}
 
// Target Chrome
if( $.browser.chrome){
  // do something
}
 
// Target Camino
if( $.browser.camino){
  // do something
}
 
// Target Opera
if( $.browser.opera){
  // do something
}
 
// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
  // do something
}
 
// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
  // do something
}
});

5. Pramuat imej
Sekeping kod ini akan menghalang pemuatan semua imej, yang boleh berguna jika anda mempunyai tapak dengan banyak imej.

$(document).ready(function() {
jQuery.preloadImages = function()
{
 for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(&#63;<img { i++)>").attr("src", arguments[i]);
 }
}
// how to use
$.preloadImages("image1.jpg");
});

6. Penukaran gaya halaman

$(document).ready(function() {
  $("a.Styleswitcher").click(function() {
    //swicth the LINK REL attribute with the value in A REL attribute
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
  });
// how to use
// place this in your header
<LINK rel=stylesheet type=text/css href="default.css">
// the links
<A class="Styleswitcher" href="#" rel=default.css>Default Theme</A>
<A class="Styleswitcher" href="#" rel=red.css>Red Theme</A>
<A class="Styleswitcher" href="#" rel=blue.css>Blue Theme</A>
});

7. Lajur dengan ketinggian yang sama
Jika dua lajur CSS digunakan, kaedah ini boleh digunakan untuk menjadikan ketinggian dua lajur itu sama.

$(document).ready(function() {
function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}
// how to use
$(document).ready(function() {
  equalHeight($(".left"));
  equalHeight($(".right"));
});
});

8. Kawal saiz fon halaman secara dinamik
Pengguna boleh menukar saiz fon halaman

$(document).ready(function() {
 // Reset the font size(back to default)
 var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
 });
 // Increase the font size(bigger font0
 $(".increaseFont").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $('html').css('font-size', newFontSize);
  return false;
 });
 // Decrease the font size(smaller font)
 $(".decreaseFont").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $('html').css('font-size', newFontSize);
  return false;
 });
});

9. Kembali ke bahagian atas halaman
Untuk perjalanan yang lancar(animasi) kembali ke atas(atau mana-mana lokasi).

$(document).ready(function() {
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
  var $target = $(this.hash);
  $target = $target.length && $target
  || $('[name=' + this.hash.slice(1) +']');
  if ($target.length) {
 var targetOffset = $target.offset().top;
 $('html,body')
 .animate({scrollTop: targetOffset}, 900);
  return false;
  }
 }
 });
// how to use
// place this where you want to scroll to
<A name=top></A>
// the link
<A href="#top">go to top</A>
});

11. Dapatkan nilai XY penunjuk tetikus
Ingin tahu di mana kursor tetikus anda?

$(document).ready(function() {
  $().mousemove(function(e){
   //display the x and y axis values inside the div with the id XY
  $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
// how to use
<DIV id=XY></DIV>
 
});

12. Sahkan sama ada elemen itu kosong
Ini akan membolehkan anda menyemak sama ada elemen kosong.

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

13. Gantikan elemen
Ingin menggantikan div, atau sesuatu yang lain?

$(document).ready(function() {
  $('#id').replaceWith('
<DIV>I have been replaced</DIV>
 
');
});

14. fungsi pemuatan tertunda jQuery
Ingin menangguhkan sesuatu?

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

15. Alih keluar fungsi perkataan
Mahu mengalih keluar perkataan tertentu?

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

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

17. Jadikan keseluruhan DIV boleh diklik
Mahu 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>
 
});

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

19. Klon objek
Klonkan div atau elemen lain.

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

20. Letakkan elemen di tengah-tengah skrin
Pusatkan 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();
});

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

22. Kira bilangan elemen
Kira unsur.

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

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

24. Rujuk perpustakaan kelas Jquery pada hos Google
Biarkan Google mengehoskan skrip jQuery untuk anda Ini boleh dilakukan dalam 2 cara.

[kod]//Contoh 1
[/code">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">[/code ]

25. Lumpuhkan kesan Jquery (animasi)
Lumpuhkan semua kesan jQuery

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

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