14 nützliche JQuery-Tipps shared_jquery

1. Geben Sie die Jquery-Objektinstanz über die Methode

zurück

Verwenden Sie var someDiv = $(‘#someDiv’).hide(); anstelle von var someDiv = $(‘#someDiv’);

2. Verwenden Sie „find“, um

zu finden

Verwenden Sie $('#someDiv').find('p.someClass').hide(); anstelle von $('#someDiv p.someClass').hide(); weil Sie nicht auslösen müssen Versuchen Sie beim Schreiben von Selektoren gleichzeitig, Ihre Selektoren einfach zu halten und den Selektor ganz rechts zu optimieren

3. Missbrauche $(this) nicht

Verwenden Sie $('#someAnchor').click(function() { Alert( this.id ); }); anstelle von $('#someAnchor').click(function() {alert($(this) . attr('id'));});

4. Die Abkürzung für bereit

Verwenden Sie $(function() { }); anstelle von $(document).ready(function() {});

5. Machen Sie Ihren Code sicher

Methode 1 (mit noConflict)

Code kopieren Der Code lautet wie folgt:

var j = jQuery.noConflict();
j(‘#someDiv’).hide();
// Die folgende Zeile verweist auf die $-Funktion einer anderen Bibliothek.
$(‘someDiv’).style.display = ‘none’;

Methode 2 (Übergabe des Parameters Jquery)

Code kopieren Der Code lautet wie folgt:

(Funktion($) {
// Innerhalb dieser Funktion verweist $ immer auf jQuery
})(jQuery);

Methode 3 (über die Fertigmethode)

Code kopieren Der Code lautet wie folgt:

jQuery(document).ready(function($) {
// $ bezieht sich auf jQuery
});

6. Vereinfachen Sie den Code

Verwenden Sie „each“ anstelle von „for“, verwenden Sie Arrays zum Speichern temporärer Variablen und verwenden Sie Dokumentfragmente. Dies ist eigentlich das Gleiche, worauf Sie beim Schreiben von nativem Javascript achten müssen.

7. So verwenden Sie Ajax

Jquery bietet nützliche Ajax-Methoden wie get getJSON post ajax

8. Greifen Sie auf native Eigenschaften und Methoden zu
Die Methode zum Abrufen der Element-ID ist beispielsweise

Code kopieren Der Code lautet wie folgt:

// OPTION 1 – jQuery verwenden
var id = $(‘#someAnchor’).attr(‘id’);
// OPTION 2 – Auf das DOM-Element zugreifen
var id = $(‘#someAnchor’)[0].id;
// OPTION 3 – Verwenden Sie die get-Methode von jQuery
var id = $(‘#someAnchor’).get(0).id;
// OPTION 3b – Übergeben Sie keinen Index an get
AnchorsArray = $(‘.someAnchors’).get();
var ThirdId = AnchorsArray[2].id;

9. Verwenden Sie PHP, um Ajax-Anfragen zu überprüfen

Durch die Verwendung von xhr.setRequestHeader(„X-Requested-With“, „XMLHttpRequest“); kann die Serverseite wie PHP
übergeben

Code kopieren Der Code lautet wie folgt:

Funktion isXhr() {
return $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
}

Um zu überprüfen, ob es sich um eine Ajax-Anfrage handelt, kann diese in einigen Situationen verwendet werden, in denen Javascript deaktiviert ist

10.Die Beziehung zwischen Jquery und $

Am Ende des JQuery-Codes sehen Sie den folgenden Code
window.jQuery = window.$ = jQuery; $ ist eigentlich eine Abkürzung von Jquery

11. Bedingtes Laden von JQuery

Code kopieren Der Code lautet wie folgt:

<script>!window.jQuery && document.write(‘<script src=“js/jquery-1.4.2.min.js“></script>')

Wenn das CDN nicht auf Jquery heruntergeladen wird, lesen Sie es vom lokalen

12.JQuery-Filter

Code kopieren Der Code lautet wie folgt:

<script><br> $('p:first').data('info', 'value'); // füllt das Datenobjekt von $, um etwas zum Arbeiten zu haben<br> $.extend(<br> jQuery.expr[":"], {<br> Block: Funktion(elem) {<br> return $(elem).css(“display”) === „block“;<br> },<br> hasData : function(elem) {<br> return !$.isEmptyObject( $(elem).data() );<br> }<br> }<br> );<br> $(“p:hasData”).text(“has data”); // greift auf Paras zu, an die Daten angehängt sind<br> $(“p:block”).text(“are block level“); // erfasst nur Absätze, die eine Anzeige von „block“<br> haben </script>

Hinweis: $.expr[":"] entspricht $.expr.filters

13.Hover-Methode

Code kopieren Der Code lautet wie folgt:

$(‘#someElement’).hover(function() {
//Sie können hier die Umschaltmethode verwenden, um den Effekt des Über- und Herausgleitens zu erzielen
});

14. Übergeben Sie das Attributobjekt

Beim Erstellen eines Elements kann Jquery1.4 ein Attributobjekt übergeben

Code kopieren Der Code lautet wie folgt:

$('', {
id: ‚someId‘,
Klassenname: „someClass“,
href: ‚somePath.html‘
});

Auch Eigenschaften oder Ereignisse, die von Jquery angegeben werden, wie z. B. Text, klicken Sie auf