Praktische Tipps zu jQuery

Dieser Artikel ist hauptsächlich ein Artikel über die praktischen Fähigkeiten von jQuery. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und werfen wir einen Blick darauf. Die folgenden zehn jQuery-Beispiele können jedem helfen, die Effizienz seiner Webdesign-Projekte zu verbessern.

IE-Browser erkennen

Beim Entwerfen von CSS ist der IE-Browser für Entwickler sehr nützlich und das ist er auch zweifellos ein Problem für Designer. Obwohl das dunkle Zeitalter des IE6 vorbei ist und die Popularität der IE-Browserfamilie abnimmt, müssen wir es noch erkennen. Natürlich kann der folgende Snippet auch zur Erkennung anderer Browser verwendet werden.

$(document).ready(function() { 
 
      if (navigator.userAgent.match(/msie/i) ){ 
 
        alert('I am an old fashioned Internet Explorer'); 
 
      } 
 
});

Sanft zum Seitenanfang scrollen

Der folgende jQuery-Effekt tritt am häufigsten auf: Klicken Sie auf einen Link, um sanft zum Seitenanfang zu scrollen . Obwohl es überhaupt nichts Neues gibt, kann es fast jeder Entwickler nutzen.

$("a[href='#top']").click(function() { 
 
  $("html, body").animate({ scrollTop: 0 }, "slow"); 
 
  return false; 
 
});

Immer im Vordergrund bleiben

Mit dem folgenden Codeausschnitt kann ein Element immer im Vordergrund der Seite stehen. Wie Sie sich vorstellen können, ist es ideal für die Handhabung von Navigationsmenüs, Symbolleisten oder anderen wichtigen Informationen.

$(function(){ 
 
var $win = $(window) 
 
var $nav = $('.mytoolbar'); 
 
var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top; 
 
var isFixed=0; 
 
processScroll() 
 
$win.on('scroll', processScroll) 
 
function processScroll() { 
 
var i, scrollTop = $win.scrollTop() 
 
if (scrollTop >= navTop && !isFixed) { 
 
isFixed = 1 
 
$nav.addClass('subnav-fixed') 
 
} else if (scrollTop <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>HTML-Tags ersetzen</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">jQuery kann HTML-Tags problemlos ersetzen, und dies wird uns auch mehr neue Möglichkeiten eröffnen. </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('li').replaceWith(function(){ 
 
  return $("<p></p>").append($(this).contents()); 
 
});

Erkennung der Bildschirmbreite

Da mobile Geräte mittlerweile immer beliebter werden als herkömmliche Computer, ist es sehr wichtig, die Größe kleiner Bildschirme zu erkennen . Glücklicherweise können wir diese Funktionalität mit jQuery problemlos erreichen.

var responsive_viewport = $(window).width(); 
 
/* if is below 481px */ 
 
if (responsive_viewport <p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);"><strong>Beschädigte Bilder automatisch reparieren</strong></p><p style="margin-bottom:25px;line-height:28.8px;color:rgb(64,64,64);">Wenn Ihre Website sehr groß ist und mehrere Jahre online war, werden mehr oder weniger beschädigte Bilder vorhanden sein. Diese Funktion erkennt beschädigte Bilder und ersetzt sie entsprechend unserer Wahl. </p><pre style="overflow:auto;" class="brush:php;toolbar:false;">$('img').error(function(){ 
 
$(this).attr('src', 'img/broken.png'); 
 
});

Erkennen Sie Kopier-, Einfüge- und Ausschneidevorgänge

Mit jQuery können Sie Kopier-, Einfüge- und Ausschneidevorgänge ausgewählter Elemente einfach erkennen.

$("#textA").bind('copy', function() { 
 
    $('span').text('copy behaviour detected!') 
 
}); 
 
$("#textA").bind('paste', function() { 
 
    $('span').text('paste behaviour detected!') 
 
}); 
 
$("#textA").bind('cut', function() { 
 
    $('span').text('cut behaviour detected!') 
 
});

Attribut „target="blank"“ automatisch zu externen Links hinzufügen

Wenn Sie auf externe Websites verlinken, möchten Sie möglicherweise das Attribut „target="blank"“ verwenden Stellen Sie sicher, dass Sie die Seite in einem neuen Tab öffnen. Das Problem besteht darin, dass das Attribut target="blank" nicht W3C-zertifiziert ist. Dabei kann jQuery eine große Hilfe sein: Das folgende Snippet erkennt, ob der aktuelle Link nach außen zeigt und fügt in diesem Fall automatisch das Attribut target="blank" hinzu.

var root = location.protocol + '//' + location.host; 
 
$('a').not(':contains(root)').click(function(){ 
 
    this.target = "_blank"; 
 
});

Ein-/Ausblenden bei Hover

Ein weiterer „klassischer“ Effekt, den Sie mit dem folgenden Clip jederzeit nutzen können.

$(document).ready(function(){ 
 
    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads 
 
    $(".thumbs img").hover(function(){ 
 
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover 
 
    },function(){ 
 
        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout 
 
    }); 
 
});

Leerzeichen in der Text-/Passworteingabe deaktivieren

Viele gängige Felder erfordern keine Leerzeichen, egal ob E-Mail, Benutzername oder Passwort. Der folgende Code deaktiviert ganz einfach alle Leerzeichen in der ausgewählten Eingabe.

$('input.nospace').keydown(function(e) { 
 
if (e.keyCode == 32) { 
 
return false; 
 
} 
 
});

Das obige ist der detaillierte Inhalt vonPraktische Tipps zu jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!