Teilen Sie 12 praktische jQuery-Code-Snippets_jquery

jQuery ist eine hervorragende JavaScript-Bibliothek, die unter WEB-Entwicklern und Webdesignern sehr bekannt ist. Sie hilft Webdesignern bei der Entwicklung vieler kreativer und schöner WEB-Seiten.

In diesem Artikel werden hauptsächlich 12 nützliche jQuery-Fähigkeiten vorgestellt. Der spezifische Inhalt ist wie folgt

Hier sind einige Tipps, die ich gesammelt habe, die Ihnen helfen werden, die Kreativität und Funktionalität Ihrer Website-Layouts und -Anwendungen zu verbessern.

1. Öffnen Sie den Link in einem neuen Fenster

Wenn Sie mit diesem Code auf einen Hypertext-Link klicken, wird dieser in einem neuen Fenster geöffnet, was den Benutzern ein besseres Erlebnis bietet:

$(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. Timer einstellen

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

3. Stellen Sie Spalten mit gleicher Höhe ein

Verwenden Sie den folgenden Code, damit jede Spalte in Ihrer Webanwendung die gleiche Höhe hat:

<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. jQuery vorinstallierte Bilder

Dieser Trick kann das Laden von Bildern auf Webseiten beschleunigen:

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. Positionieren Sie das Element in der Mitte der Seite

<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. Deaktivieren Sie die rechte Maustaste

$(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. Berechnen Sie die Anzahl der Unterelemente

<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. Stilliste ändern

Dieser Code hilft Ihnen, die Stilliste zu ändern.

 $(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. Verwenden Sie jQuery, um die Textgröße festzulegen

Durch Hinzufügen dieses Codes können Benutzer die Textgröße entsprechend ihren Anforderungen zurücksetzen (vergrößern oder verkleinern).

 $(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. Aktuelle Mauskoordinaten erkennen

Mit diesem JS-Code können Sie Mauskoordinaten in jedem Browser abrufen.

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

11. Ermitteln Sie die X/Y-Achse des Mauszeigers

 $().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. Zurück zum oberen Link

Dieser Code ist für relativ lange Seiten sehr praktisch. Benutzer müssen nicht an der Bildlaufleiste ziehen, um nach oben zurückzukehren, sondern können direkt auf „Zurück nach oben“ klicken.

 $(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 ist eine der besten Bibliotheken für JavaScript und unterstützt Ajax- und HTML-Skript-Clients. Sie wird hauptsächlich für die Ereignisverarbeitung und Animationsproduktion verwendet. Darüber hinaus verfügt jQuery auch über verschiedene Plug-Ins, mit denen Entwickler Webseiten in kürzester Zeit erstellen können.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die die JQuery-Programmierung erlernen.