Rumah > hujung hadapan web > tutorial js > Kemahiran praktikal jQuery yang penting (Bahagian 1)

Kemahiran praktikal jQuery yang penting (Bahagian 1)

PHPz
Lepaskan: 2018-09-28 16:20:21
asal
989 orang telah melayarinya

Artikel ini terutamanya meringkaskan kemahiran pembangunan kod jQuery yang klasik dan praktikal. boleh bantu semua orang berkembang dengan cepat. Rakan-rakan yang berminat boleh rujuk . Butirannya adalah seperti berikut:

1 Klik kanan adalah dilarang

$(document).ready(function(){
 $(document).bind("contextmenu",function(e){
 return false;
 });
});
Salin selepas log masuk
<. 🎜>

2. Sembunyikan teks kotak teks carianSembunyikan 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($(&#39;input.text1&#39;));
});
 
 function textFill(input){ //input focus text function
 var originalvalue = input.val();
 input.focus( function(){
  if( $.trim(input.val()) == originalvalue ){ input.val(&#39;&#39;); }
 });
 input.blur( function(){
  if( $.trim(input.val()) == &#39;&#39; ){ 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
 $(&#39;a[href^="http://"]&#39;).attr("target", "_blank");
 
 //Example 2: Links with the rel="external" attribute will only open in a new window
 $(&#39;a[@rel$=&#39;external&#39;]&#39;).click(function(){
 this.target = "_blank";
 });
});
// how to useopen link
Salin selepas log masuk

4. Kesan pelayar
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
}
});
Salin selepas log masuk

5 Pramuat imejKod 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(?").attr("src", arguments[i]);
 }
}
// how to use
$.preloadImages("image1.jpg");
});
Salin selepas log masuk

Penukaran gaya halaman

$(document).ready(function() {
 $("a.Styleswitcher").click(function() {
 //swicth the LINK REL attribute with the value in A REL attribute
 $(&#39;link[rel=stylesheet]&#39;).attr(&#39;href&#39; , $(this).attr(&#39;rel&#39;));
 });
// how to use
// place this in your header// the linksDefault ThemeRed ThemeBlue Theme});
Salin selepas log masuk

7 Ketinggian lajur adalah sama Jika dua lajur CSS digunakan, kaedah ini. boleh digunakan untuk Lajur adalah sama tinggi.

$(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 dinamikPengguna boleh menukar saiz fon halaman

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

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

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

10 Dapatkan nilai kursor 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
 $(&#39;#XY&#39;).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
// how to use});
Salin selepas log masuk

11 Butang Kembali ke atas
Anda boleh menggunakan animasi dan tatal Atas untuk melaksanakan animasi kembali ke atas tanpa menggunakan yang lain. pemalam.

// Back to top
$(&#39;a.top&#39;).click(function () {
 $(document.body).animate({scrollTop: 0}, 800);
 return false;
});
Back to top
Salin selepas log masuk
Menukar nilai scrollTop boleh melaraskan jarak antara pemulangan dan bahagian atas, dan parameter kedua bagi animasi ialah masa yang diperlukan untuk melakukan tindakan pemulangan (unit: milisaat ).

Hari ini saya akan memperkenalkan beberapa kemahiran jQuery kepada anda Untuk lebih banyak tutorial berkaitan, sila lawati

Tutorial Video jQuery!

Label berkaitan:
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