jQuery ist mittlerweile die beliebteste JavaScript-Bibliothek in der Webentwicklung. Mit jQuery und einer großen Anzahl von Plug-Ins können Sie ganz einfach verschiedene großartige Effekte erzielen. Dieser Artikel führt Sie in einige praktische jQuery-Kenntnisse ein und soll Ihnen dabei helfen, jQuery effizienter zu nutzen.
35 jQuery-Tipps/Codeausschnitte gesammelt, die Ihnen bei der schnellen Entwicklung helfen.
1. Rechtsklick deaktivieren
$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });
2. Den Suchtextfeldtext ausblenden
Hide when clicked in the search field, the value.(example can be found below in the comment fields) $(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); } }); }
3. Öffnen Sie den Link in einem neuen Fenster
XHTML 1.0 Strict doesn't allow this attribute in the code, so use this to keep the code valid. $(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 useopen link
4. Browser erkennen
Hinweis: In Version jQuery 1.4 ersetzte $.support die Variable $.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 } });
5. Bilder vorladen
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images. $(document).ready(function() { jQuery.preloadImages = function() { for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?").attr("src", arguments[i]); } } // how to use $.preloadImages("image1.jpg"); });
6. Seitenstilwechsel
$(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// the linksDefault ThemeRed ThemeBlue Theme});
7. Die Spaltenhöhen sind gleich
Wenn zwei CSS-Spalten verwendet werden, kann diese Methode verwendet werden, um die Höhen der beiden Spalten anzupassen Dasselbe .
$(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")); }); });
8. Steuern Sie die Schriftgröße der Seite dynamisch
Benutzer können die Schriftgröße der Seite ändern
$(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; }); });
9. Zurück zur oberen Funktion der Seite
For a smooth(animated) ride back to the top(or any location). $(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// the linkgo to top});
10 🎜>
Want to know where your mouse cursor is? $(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});
11. Schaltfläche „Zurück nach oben“
Sie können animate und scrollTop verwenden, um die Animation für die Rückkehr nach oben zu implementieren ohne andere Plug-Ins zu verwenden.// Back to top $('a.top').click(function () { $(document.body).animate({scrollTop: 0}, 800); return false; }); Back to top
12. Bilder vorab laden
Wenn Ihre Seite viele unsichtbare Bilder verwendet (z. B. Hover-Anzeige), müssen Sie diese möglicherweise vorab laden:$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('').attr('src', arguments[i]); } }; $.preloadImages('img/hover1.png', 'img/hover2.png');
13. Überprüfen Sie, ob das Bild geladen ist
Manchmal müssen Sie sicherstellen, dass das Bild geladen ist, um die folgenden Vorgänge auszuführen:$('img').load(function () { console.log('image load successful'); });
14. Defekte Bilder automatisch ändern
Wenn Sie auf Ihrer Website einen defekten Bildlink finden, können Sie ihn durch ein Bild ersetzen, das nicht einfach ersetzt werden kann . Das Hinzufügen dieses einfachen Codes kann Ihnen viel Ärger ersparen:$('img').on('error', function () { $(this).prop('src', 'img/broken.png'); });
15. Mauszeiger (Hover) zum Wechseln des Klassenattributs
Wenn Sie den Effekt ändern möchten, wenn der Benutzer mit der Maus über ein anklickbares Element fährt, verwenden Sie den folgenden Code kann ein Klassenattribut hinzufügen, wenn es mit der Maus über ein Element fährt, und das Klassenattribut automatisch löschen, wenn der Benutzer mit der Maus wegfährt:$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }); 你只需要添加必要的CSS代码即可。如果你想要更简洁的代码,可以使用 toggleClass 方法: $('.btn').hover(function () { $(this).toggleClass('hover'); });
16. Eingabefelder deaktivieren
Manchmal müssen Sie möglicherweise die Schaltfläche „Senden“ eines Formulars oder ein Eingabefeld deaktivieren, bis der Benutzer eine Aktion ausführt (z. B. „Lesen“ aktivieren). Kontrollkästchen „Bedingungen aktivieren“). Sie können das deaktivierte Attribut hinzufügen, bis Sie es aktivieren möchten:$('input[type="submit"]').prop('disabled', true);
$('input[type="submit"]').removeAttr('disabled');
17. Verhindern Sie das Laden von Links
Manchmal möchten Sie nicht auf eine Seite verlinken oder sie neu laden, sondern möchten vielleicht, dass sie etwas anderes tut oder etwas auslösen. Für andere Skripte können Sie Folgendes tun:$('a.no-link').click(function (e) { e.preventDefault(); });
18. Fade/Slide umschalten
Fade und Slide sind das, was wir verwenden. Animationseffekte werden in jQuery häufig verwendet, um Elemente besser erscheinen zu lassen. Wenn Sie jedoch möchten, dass der erste Effekt verwendet wird, wenn das Element angezeigt wird, und der zweite Effekt, wenn es verschwindet, können Sie Folgendes tun:// Fade $('.btn').click(function () { $('.element').fadeToggle('slow'); }); // Toggle $('.btn').click(function () { $('.element').slideToggle('slow'); });
19. Einfacher Akkordeoneffekt
Hier ist eine schnelle und einfache Möglichkeit, einen Akkordeoneffekt zu erzielen:// Close all panels $('#accordion').find('.content').hide(); // Accordion $('#accordion').find('.accordion-header').click(function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; });
20. Stellen Sie sicher, dass zwei DIVs die gleiche Höhe haben
Manchmal müssen Sie zwei Divs auf die gleiche Höhe bringen, unabhängig vom Inhalt darin. Sie können das folgende Code-Snippet verwenden:var $columns = $('.column'); var height = 0; $columns.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $columns.height(height);
21. Überprüfen Sie, ob das Element leer ist
This will allow you to check if an element is empty. $(document).ready(function() { if ($('#id').html()) { // do something } });
22. Ersetzen Sie das Element
$(document).ready(function() { $('#id').replaceWith('I have been replaced'); });
23. jQuery-Funktion zum verzögerten Laden
$(document).ready(function() { window.setTimeout(function() { // do something }, 1000); });
24. Wortentfernungsfunktion
$(document).ready(function() { var el = $('#id'); el.html(el.html().replace(/word/ig, "")); });
25. Überprüfen Sie, ob das Element in der JQuery-Objektsammlung vorhanden ist
$(document).ready(function() { if ($('#id').length) { // do something } });
26 . Machen Sie das gesamte DIV anklickbar
$(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 usehome});
27. ID与Class之间转换
当改变Window大小时,在ID与Class之间切换
$(document).ready(function() { function checkWindowSize() { if ( $(window).width() > 1200 ) { $('body').addClass('large'); } else { $('body').removeClass('large'); } } $(window).resize(checkWindowSize); });
28. 克隆对象
$(document).ready(function() { var cloned = $('#id').clone(); // how to use});
29. 使元素居屏幕中间位置
$(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(); });
30. 写自己的选择器
$(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'); }); });
31. 统计元素个数
$(document).ready(function() { $("p").size(); });
32. 使用自己的 Bullets
$(document).ready(function() { $("ul").addClass("Replaced"); $("ul > li").prepend("‒ "); // how to use ul.Replaced { list-style : none; } });
33. 引用Google主机上的Jquery类库
//Example 1
34. 禁用Jquery(动画)效果
$(document).ready(function() { jQuery.fx.off = true; });
35. 与其他Javascript类库冲突解决方案
$(document).ready(function() { var $jq = jQuery.noConflict(); $jq('#id').show(); });
以上就是本章的全部内容,更多相关教程请访问jQuery视频教程!