Heim  >  Artikel  >  Web-Frontend  >  Grundlegende praktische jQuery-Kenntnisse (Teil 2)_jquery

Grundlegende praktische jQuery-Kenntnisse (Teil 2)_jquery

WBOY
WBOYOriginal
2016-05-16 15:33:471258Durchsuche

Die Beispiele in diesem Artikel fassen klassische und praktische jQuery-Code-Entwicklungstechniken zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
23. jQuery-Funktion zum verzögerten Laden

Möchten Sie etwas verschieben?

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

24. Wortfunktion entfernen

Möchten Sie bestimmte Wörter entfernen?

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

25. Ü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
 }
});

26. 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>

});

27. Umrechnung zwischen ID und Klasse

Wenn Sie die Fenstergröße ändern, wechseln Sie zwischen ID und Klasse

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

28. Objekt klonen

Klonen Sie ein Div oder ein anderes Element.

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

});

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

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

31. Zählen Sie die Anzahl der Elemente

Ein Element zählen.

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

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

33. 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.

//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
 // do something
});
</SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

 // Example 2:(the best and fastest way)
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

34. Deaktivieren Sie den JQuery-Effekt (Animation)

Alle jQuery-Effekte deaktivieren

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

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

Das Obige dreht sich alles um die praktischen Fähigkeiten von jQuery. Ich hoffe, es wird für das Lernen aller hilfreich sein.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn