Zusammenfassung der Jquery-Tipps_jquery

Nachfolgend finden Sie einige Tipps zur Verwendung von Jquery. Es gibt beispielsweise Funktionen wie das Deaktivieren des Rechtsklicks, das Ausblenden von Suchtextfeldtexten, das Öffnen von Links in neuen Fenstern, das Erkennen von Browsern, das Vorladen von Bildern, das Wechseln von Seitenstilen, gleiche Höhen aller Spalten, das dynamische Steuern der Seitenschriftgröße und das Abrufen der X-Wert und Y-Wert des Mauszeigers, überprüfen, ob das Element leer ist, das Element ersetzen, Lazy Load, überprüfen, ob das Element in der JQuery-Sammlung vorhanden ist, das DIV anklickbar machen, das Objekt klonen, das Element zentrieren, zählen Anzahl der Elemente, Verwendung der JQuery-Klassenbibliothek auf dem Google-Host, Deaktivierung von JQuery Der Effekt besteht darin, das Konfliktproblem zwischen der JQuery-Klassenbibliothek und anderen Javascript-Klassenbibliotheken zu lösen.

1. Rechtsklick ist verboten

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

2. Suchtextfeldtext ausblenden
Beim Anklicken im Suchfeld wird der Wert ausgeblendet. (Beispiel finden Sie weiter unten in den Kommentarfeldern)

$(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. Link in neuem Fenster öffnen
XHTML 1.0 Strict lässt dieses Attribut im Code nicht zu. Verwenden Sie es daher, um den Code gültig zu halten.

$(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 use
<A href="http://www.opensourcehunter.com" rel=external>open link</A>

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
}
 
// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
  // do something
}
});

5. Bilder vorab laden
Dieser Code verhindert das Laden aller Bilder, was nützlich sein kann, wenn Sie eine Website mit vielen Bildern haben.

$(document).ready(function() {
jQuery.preloadImages = function()
{
 for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(&#63;<img { i++)>").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
<LINK rel=stylesheet type=text/css href="default.css">
// the links
<A class="Styleswitcher" href="#" rel=default.css>Default Theme</A>
<A class="Styleswitcher" href="#" rel=red.css>Red Theme</A>
<A class="Styleswitcher" href="#" rel=blue.css>Blue Theme</A>
});

7. Spalten mit gleicher Höhe
Wenn zwei CSS-Spalten verwendet werden, kann diese Methode verwendet werden, um die Höhen der beiden Spalten anzugleichen.

$(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 zum Seitenanfang
Für eine reibungslose (animierte) Fahrt zurück nach oben (oder an einen beliebigen Ort).

$(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
<A name=top></A>
// the link
<A href="#top">go to top</A>
});

11. Mauszeiger-XY-Wert abrufen
Möchten Sie wissen, wo sich Ihr Mauszeiger befindet?

$(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
<DIV id=XY></DIV>
 
});

12. Überprüfen Sie, ob das Element leer ist
Dadurch können Sie überprüfen, ob ein Element leer ist.

$(document).ready(function() {
 if ($('#id').html()) {
  // do something
  }
});

13. Elemente ersetzen
Möchten Sie ein Div oder etwas anderes ersetzen?

$(document).ready(function() {
  $('#id').replaceWith('
<DIV>I have been replaced</DIV>
 
');
});

14. jQuery-Funktion zum verzögerten Laden
Möchten Sie etwas verzögern?

$(document).ready(function() {
  window.setTimeout(function() {
   // do something
  }, 1000);
});

15. Wortfunktion entfernen
Möchten Sie bestimmte Wörter entfernen?

$(document).ready(function() {
  var el = $('#id');
  el.html(el.html().replace(/word/ig, ""));
});

16. Überprüfen Sie, ob das Element in der JQuery-Objektsammlung vorhanden ist
Testen Sie einfach mit der Eigenschaft .length, ob das Element existiert.

$(document).ready(function() {
  if ($('#id').length) {
 // do something
 }
});

17. Machen Sie das gesamte DIV anklickbar
Möchten Sie die komplette Div anklickbar machen?

$(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 use
<DIV><A href="index.html">home</A></DIV>
 
});

18. Umrechnung zwischen ID und Klasse.
Wechseln Sie beim Ändern der Fenstergröße zwischen ID und Klasse

$(document).ready(function() {
  function checkWindowSize() {
  if ( $(window).width() > 1200 ) {
    $('body').addClass('large');
  }
  else {
    $('body').removeClass('large');
  }
  }
$(window).resize(checkWindowSize);
});

19. Objekt klonen
Klonen Sie ein Div oder ein anderes Element.

$(document).ready(function() {
  var cloned = $('#id').clone();
// how to use
<DIV id=id></DIV>
 
});

20. Positionieren Sie das Element in der Mitte des Bildschirms
Zentrieren Sie ein Element in der Mitte Ihres Bildschirms.

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

21. Schreiben Sie Ihren eigenen Selektor
Schreiben Sie Ihre eigenen Selektoren.

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

22. Zählen Sie die Anzahl der Elemente
Zähle ein Element.

$(document).ready(function() {
  $("p").size();
});

23. Verwenden Sie Ihre eigenen Kugeln
Möchten Sie Ihre eigenen Aufzählungszeichen anstelle der Standard- oder Bildaufzählungszeichen verwenden?

$(document).ready(function() {
  $("ul").addClass("Replaced");
  $("ul > li").prepend("‒ ");
 // how to use
 ul.Replaced { list-style : none; }
});

24. Verweisen Sie auf die Jquery-Klassenbibliothek auf dem Google-Host
Lassen Sie Google das jQuery-Skript für Sie hosten. Dies kann auf zwei Arten erfolgen.

[Code]//Beispiel 1
[/code">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">[/code ]

25. Deaktivieren Sie den JQuery-Effekt (Animation)
Deaktivieren Sie alle jQuery-Effekte

$(document).ready(function() {
  jQuery.fx.off = true;
});

26. Lösung für Konflikte mit anderen Javascript-Bibliotheken
Um Konflikte mit anderen Bibliotheken auf Ihrer Website zu vermeiden, können Sie diese jQuery-Methode verwenden und einen anderen Variablennamen anstelle des Dollarzeichens zuweisen.

$(document).ready(function() {
  var $jq = jQuery.noConflict();
  $jq('#id').show();
});