Ringkasan Jquery tips_jquery-tutorial js-php.cn

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

14. fungsi pemuatan tertunda jQuery
Ingin menangguhkan sesuatu?

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

19. Klon objek
Klonkan div atau elemen lain.

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

22. Kira bilangan elemen
Kira unsur.

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk