10 jQuery-Codefragmente für eine effektive Webentwicklung

In den letzten Jahren war jQuery die am weitesten verbreitete JavaScript-Skriptbibliothek. Heute stellen wir Webentwicklern die 10 praktischsten jQuery-Codeschnipsel zur Verfügung, die Entwickler in Not speichern können. Anfänger können es auch zum Erlernen von jQuery~

1 verwenden. Erkennen Sie die Internet Explorer-Version
Wenn es um CSS-Design geht, für Entwickler und Designer hat Internet Explorer war schon immer ein Problem. Auch wenn die dunklen Zeiten des IE6 vorbei sind und der IE immer unbeliebter wird, ist es immer noch gut, ihn leicht zu erkennen. Natürlich kann der folgende Code auch zur Erkennung anderer Browser verwendet werden.

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

2. Schieben Sie sanft zum Seitenanfang
Dies ist der am häufigsten verwendete jQuery-Effekt: Klicken Sie auf einen Link und die Seite wird sanft nach oben verschoben. Hier gibt es nichts Neues, aber jeder Entwickler muss gelegentlich ähnliche Funktionen schreiben

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

3. Oben behoben
Sehr nützlicher Code Snippet, mit dem ein Element oben fixiert werden kann. Super nützlich für Navigationsschaltflächen, Symbolleisten oder wichtige Infoboxen.

$(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 <= navTop && isFixed) {
 isFixed = 0
  $nav.removeClass(&#39;subnav-fixed&#39;)
 }
}

4. Ersetzen Sie das HTML-Tag durch anderen Inhalt
jQuery macht es einfach, das HTML-Tag durch ein anderes zu ersetzen. Die Möglichkeiten sind endlos.

$('li').replaceWith(function(){
 return $("<div />").append($(this).contents());
});

5. Fensterbreite erkennen
Da mobile Geräte jetzt häufiger vorkommen als veraltete Computer, ist es einfacher, eine kleinere zu erkennen Die Breite des Ansichtsfensters kann hilfreich sein. Zum Glück ist das mit jQuery ganz einfach.

var responsive_viewport = $(window).width();
/* if is below 481px */
if (responsive_viewport < 481) {
  alert(&#39;Viewport is smaller than 481px.&#39;);
} /* end smallest screen */

6. Beschädigte Bilder automatisch finden und reparieren
Wenn Ihre Website groß und bereits online ist Wenn Sie es viele Jahre lang laufen lassen, werden Sie mehr oder weniger irgendwo auf der Benutzeroberfläche auf ein beschädigtes Bild stoßen. Diese nützliche Funktion kann dabei helfen, ein beschädigtes Bild zu erkennen und es durch Ihr bevorzugtes Bild zu ersetzen, um Besucher über das Problem zu informieren.

$('img').error(function(){
 $(this).attr('src', 'img/broken.png');
});

7. Erkennen Sie Kopier-, Einfüge- und Ausschneidevorgänge
Mit jQuery können Sie ganz einfach Kopieren, Einfügen und nach Ihren Anforderungen erkennen Schnittoperationen.

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

8. Wenn Sie auf einen externen Link stoßen, fügen Sie automatisch das -Attribut von target="blank" beim Verlinken Wenn Sie zu einer externen Site gehen, können Sie das Attribut target="blank" verwenden, um die Site in einer neuen Oberfläche zu öffnen. Das Problem besteht darin, dass das Attribut target="blank" kein gültiges W3C-Attribut ist. Um dieses Problem zu beheben, verwenden wir jQuery: Der folgende Code erkennt, ob es sich bei dem Link um einen externen Link handelt, und fügt in diesem Fall automatisch ein target="blank"-Attribut hinzu.

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

9. Der Transparenzeffekt, der beim Verweilen auf dem Bild allmählich zunimmt oder abnimmt Ein weiterer „klassischer“ Code, es bleibt erhalten Nehmen Sie es in Ihren Werkzeugkasten auf, da Sie es von Zeit zu Zeit umsetzen müssen.

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

10. Deaktivieren Sie die Leertaste bei der Eingabe von Text oder Passwörtern Die Leertaste ist in vielen Formularfeldern nicht erforderlich, z Beispiel: E-Mail, Benutzername, Passwort usw. Hier ist ein einfacher Trick, mit dem Sie die Leertaste in ausgewählten Eingaben deaktivieren können.

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

Das Obige ist der gesamte Inhalt von 10 jQuery-Codeausschnitten für eine effiziente Webentwicklung. Wenn Sie ihn benötigen, können Sie ihn speichern

Verwandte Empfehlungen:

7 nützliche jQuery-Codeausschnitte zum Teilen_jquery

Holen Sie es sich direkt 15 jQuery-Code-Snippets_jquery

18 tolle jQuery-Code-Snippets_jquery

Das obige ist der detaillierte Inhalt von10 jQuery-Codefragmente für eine effektive Webentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!