Kongsi 12 kod jQuery snippet_jquery praktikal

jQuery ialah perpustakaan JavaScript yang sangat terkenal di kalangan pembangun WEB dan pereka web Ia membantu pereka web membangunkan banyak halaman WEB yang kreatif dan cantik.

Artikel ini terutamanya berkongsi 12 kemahiran jQuery yang berguna, kandungan khusus adalah seperti berikut

Berikut ialah beberapa petua yang saya kumpulkan yang akan membantu anda meningkatkan kreativiti dan kefungsian reka letak dan aplikasi tapak web anda.

1 Buka pautan dalam tetingkap baharu

Menggunakan kod ini, apabila anda mengklik pautan hiperteks, ia akan dibuka dalam tetingkap baharu, memberikan pengguna pengalaman yang lebih baik:

$(document).ready(function() {
 //select all anchor tags that have http in the href
 //and apply the target=_blank
 $("a[href^='http']").attr('target','_blank');
});
 

2. Tetapkan pemasa

$(document).ready(function() {
 window.setTimeout(function() {
 // some code
 }, 500);
});

3. Tetapkan lajur ketinggian yang sama

Gunakan kod berikut untuk menjadikan setiap lajur dalam aplikasi web anda mempunyai ketinggian yang sama:

<div class="equalHeight" style="border:1px solid">
 <p>First Line</p>
 <p>Second Line</p>
 <p>Third Line</p>
</div>
<div class="equalHeight" style="border:1px solid">
 <p>Column Two</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 equalHeight('.equalHeight');
});
//global variable, this will store the highest height value
var maxHeight = 0;
function equalHeight(col) {
 //Get all the element with class = col
 col = $(col);
 //Loop all the col
 col.each(function() {
 //Store the highest value
 if ($(this).height() > maxHeight) {
 maxHeight = $(this).height();
 }
 });
 //Set the height
 col.height(maxHeight);
}
</script>

4. imej pramuat jQuery

Helah ini boleh mempercepatkan pemuatan imej pada halaman web:

jQuery.preloadImagesInWebPage = function() {
 for (var ctr = 0; ctr & lt; arguments.length; ctr++) {
 jQuery("").attr("src", arguments[ctr]);
 }
}
// 使用方法：
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
// 检查图片是否被加载
$('#imageObject').attr('src', 'image1.gif').load(function() {
 alert('The image has been loaded…');
});

5 Letakkan elemen di tengah-tengah halaman

<div id="foo" style="width:200px;height: 200px;background: #ccc;"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
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;
}
//Use the above function as:
$('#foo').center();
</script>
 

6. Lumpuhkan butang kanan tetikus

$(document).ready(function() {
 //catch the right-click context menu
 $(document).bind("contextmenu", function(e) {
 //warning prompt - optional
 alert("No right-clicking!");
 //delete the default context menu
 return false;
 });
});

7. Kira bilangan sub-elemen

<div id="foo">
 <div id="bar"></div>
 <div id="baz">
 <div id="biz"></div>
 <span><span></span></span>
 </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
 //jQuery code to count child elements $("#foo > div").size()
alert($("#foo > div").size())
</script>

8. Tukar senarai gaya

Kod ini akan membantu anda menukar senarai gaya.

 $(document).ready(function() {
 $("a.cssSwap").click(function() { 
 //swap the link rel attribute with the value in the rel 
 $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
 }); 
 });

9 Gunakan jQuery untuk menetapkan saiz teks

Dengan menambahkan kod ini, pengguna boleh menetapkan semula saiz teks (bertambah atau berkurang) mengikut keperluan mereka.

 $(document).ready(function() {
 //find the current font size
 var originalFontSize = $('html').css('font-size');

//Increase the text size
 $(".increaseFont").click(function() {
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNumber = parseFloat(currentFontSize, 10);

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

//Decrease the Text Size
 $(".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;
 });

// Reset Font Size
 $(".resetFont").click(function(){
 $('html').css('font-size', originalFontSize);
 });
 });

10. Kesan koordinat tetikus semasa

Menggunakan kod JS ini, anda boleh mendapatkan koordinat tetikus dalam mana-mana penyemak imbas.

 $(document).ready(function() {
 $().mousemove(function(e)
 {
 $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
 });

11 Dapatkan paksi X/Y penuding tetikus

 $().mousemove(function(e){
 //display the x and y axis values inside the P element
 $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });

12. Kembali ke pautan atas

Kod ini sangat praktikal untuk halaman yang agak panjang Pengguna tidak perlu menarik bar skrol untuk kembali ke atas, tetapi boleh terus klik "Kembali ke Atas".

 $(document).ready(function() {
 //when the id="top" link is clicked
 $('#top').click(function() {
 //scoll the page back to the top
 $(document).scrollTo(0,500);
 }
 });

jQuery ialah salah satu perpustakaan terbaik untuk JavaScript, menyokong pelanggan skrip Ajax dan HTML Ia digunakan terutamanya untuk pemprosesan acara dan pengeluaran animasi. Selain itu, jQuery juga mempunyai pelbagai pemalam yang membolehkan pembangun membuat halaman web dalam masa yang paling pantas.

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan jquery.