Grundlegende praktische jQuery-Kenntnisse (Teil 1)

Dieser Artikel fasst hauptsächlich die klassischen und praktischen Fähigkeiten zur Entwicklung von jQuery-Code zusammen. kann jedem helfen, sich schnell weiterzuentwickeln. Interessierte Freunde können sich an wenden. Die Details lauten wie folgt:

1. Rechtsklick ist verboten

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

2. Den Text des Suchtextfelds ausblenden
Beim Klicken in das Suchfeld wird der Wert ausgeblendet (Beispiel finden Sie 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. Öffnen Sie den Link in einem neuen Fenster

XHTML 1.0 Strict erlaubt dieses Attribut nicht Code, also verwenden Sie diesen, 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 useopen link

4. Browser erkennen
Hinweis: In Version jQuery 1.4, $.support Die Variable $.browser ersetzt

$(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
Dieser Code wird Verhindern Sie 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(?").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, ist diese Methode kann verwendet werden, um die Säulen auf die gleiche Höhe zu bringen.

$(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. Die Schriftgröße der Seite dynamisch steuern
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. Funktion „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// the linkgo to top});

10. Holen Sie sich den Mauszeigerwert
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});

11. Schaltfläche „Zurück zum Anfang“
Sie können animate und scrollTop verwenden, um die Animation der Rückkehr nach oben zu implementieren, ohne andere zu verwenden Plug-Ins.

// 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). ).

Heute werde ich Ihnen einige jQuery-Kenntnisse vorstellen. Weitere verwandte Tutorials finden Sie im jQuery-Video-Tutorial!