35 jQuery-Codefragmente, die Programmierer kennen müssen

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

Durch Ändern des Werts von scrollTop kann der Abstand zwischen der Rückkehr und der Oberseite angepasst werden, und der zweite Parameter von animate ist die Zeit, die zum Ausführen der Rückkehraktion erforderlich ist (Einheit: Millisekunden). ).

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++) {
  $(&#39;&#39;).attr(&#39;src&#39;, arguments[i]);
 }
};
$.preloadImages(&#39;img/hover1.png&#39;, &#39;img/hover2.png&#39;);

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');
});

Sie können img durch eine andere ID oder Klasse ersetzen, um zu überprüfen, ob das angegebene Bild geladen ist.

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');
});

Auch wenn Ihre Website keine defekten Bildlinks enthält, kann das Hinzufügen dieses Codes nicht schaden.

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'); 
});

Hinweis: Verwenden Sie CSS direkt, um dies zu erreichen Dieser Effekt ist möglicherweise eine bessere Lösung, Sie müssen jedoch die Methode kennen.

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);

Sie müssen lediglich die Methode „removeAttr“ ausführen und das zu entfernende Attribut als Parameter übergeben:

$('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);

Dieser Code durchläuft eine Gruppe von Elementen und setzt deren Höhe auf die maximale Höhe unter den Elementen.

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视频教程！