Zusammenfassung der Jquery-Tipps_jquery-js-Tutorial-php.cn

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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("&#8210; ");
 // how to use
 ul.Replaced { list-style : none; }
});

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren