8 kod fungsi jQuery super praktikal untuk share_jquery

Dalam artikel ini, kami akan berkongsi 8 petua super praktikal untuk pengguna jQuery. jQuery ialah salah satu perpustakaan terbaik untuk JavaScript Ia digunakan terutamanya untuk animasi dan pemprosesan acara, dan menyokong klien skrip Ajax dan HTML. Selain itu, jQuery juga mempunyai pelbagai pemalam untuk membantu pembangun membuat laman web/halaman web dengan cepat dalam masa yang paling singkat.

Saya harap anda akan menyukai kod praktikal yang dikongsi dalam artikel ini.

1) Lumpuhkan fungsi klik kanan
Jika anda ingin menyimpan maklumat tapak web untuk pengguna, maka pembangun boleh menggunakan kod ini - lumpuhkan fungsi klik kanan.

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi() {
//tangkap menu konteks klik kanan
$(document).bind("contextmenu",fungsi(e) {  
//gesaan amaran - pilihan
alert("Tiada klik kanan!");

//padam menu konteks lalai
pulangkan palsu;
});
});

2) Gunakan jQuery untuk menetapkan saiz teks

Menggunakan kod ini, pengguna boleh mengubah saiz teks (bertambah atau berkurang) mengikut keperluan mereka.

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi() {
//cari saiz fon semasa
var originalFontSize = $('html').css('font-size');

//Tingkatkan saiz teks
$(".increaseFont").klik(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNumber = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2;
$('html').css('font-size', newFontSize);
pulangkan palsu;
});

//Kurangkan Saiz Teks
$(".decreaseFont").klik(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
pulangkan palsu;
});

// Tetapkan Semula Saiz Fon
$(".resetFont").klik(function(){
$('html').css('font-size', originalFontSize);
});
});

3) Buka pautan dalam tetingkap baharu

Menggunakan kod ini akan membantu pengguna membuka pautan dalam tetingkap baharu dan memberikan pengguna pengalaman pengguna yang lebih baik.

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi() {
//pilih semua tag anchor yang mempunyai http dalam href
//dan gunakan sasaran=_blank
$("a[href^='http']").attr('target','_blank');
});

4) Tukar senarai gaya

Gunakan kod ini untuk membantu anda menukar senarai gaya.

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi() {
$("a.cssSwap").klik(fungsi() {
//tukar atribut link rel dengan nilai dalam rel
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
});
});

5) Kembali ke pautan atas

Kod ini sangat berguna untuk klik jangka panjang pada satu halaman Anda boleh mengklik fungsi "Kembali ke Atas" pada persimpangan penting.

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi() {
//apabila pautan id="top" diklik
$('#top').klik(function() {
//imbas halaman kembali ke atas
$(document).scrollTo(0,500);
}
});

6) Dapatkan paksi X/Y penuding tetikus

Salin kod Kod adalah seperti berikut:

$().mousemove(fungsi(e){
//paparkan nilai paksi x dan y di dalam elemen P
$('p').html("X Axis : " e.pageX " | Y Axis " e.pageY);
});

7) Kesan koordinat tetikus semasa

Menggunakan skrip ini, anda boleh mendapatkan koordinat tetikus dalam mana-mana pelayar web.

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi() {
$().mousemove(fungsi(e)
{
$('# MouseCoordinates ').html("Kedudukan Paksi X = " e.pageX " dan Kedudukan Paksi Y = " e.pageY);
});

8) Pramuat imej

Kod ini membantu pengguna memuatkan imej atau halaman web dengan cepat.

Salin kod Kod adalah seperti berikut:

jQuery.preloadImagesInWebPage = function()
{
for(var ctr = 0; ctr {
jQuery("").attr("src", arguments[ctr]);
}
}
Untuk menggunakan kaedah di atas, anda boleh menggunakan sekeping kod berikut:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
Untuk menyemak sama ada imej telah dimuatkan, anda boleh menggunakan sekeping kod berikut:
$('#imageObject').attr('src', 'image1.gif').load(function() {
alert('Imej telah dimuatkan…');
});