30 klassische Fähigkeiten zur Entwicklung von jQuery-Code_jquery

Die Beispiele in diesem Artikel fassen 30 klassische Fähigkeiten zur Entwicklung von jQuery-Code zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Erstellen Sie einen verschachtelten Filter

Code kopieren Der Code lautet wie folgt:

.filter(":not(:has(.selected ))" ) //Alle Elemente entfernen, die nicht die Klasse .selected

enthalten

2. Verwenden Sie Ihre Elementabfragen wieder

Code kopieren Der Code lautet wie folgt:

var allItems = $("div.item");
var keepList = $("div#container1 div.item");

Klassennamen: $(formToLookAt " input:checked").each(function() { keepListkeepList = keepList.filter("." $(this).attr("name"));
});

3. Verwenden Sie has(), um festzustellen, ob ein Element eine bestimmte Klasse oder ein bestimmtes Element enthält

Code kopieren Der Code lautet wie folgt:

//jQuery 1.4.* enthält Unterstützung für die has-Methode . Diese Methode findet
//wenn ein Element eine bestimmte andere Elementklasse oder was auch immer enthält
//Sie suchen und tun alles, was Sie wollen
$("input").has(".email").addClass("email_icon");

4. Verwenden Sie jQuery, um den Stil zu wechseln

Code kopieren Der Code lautet wie folgt:

//Suchen Sie nach dem Medientyp, den Sie wechseln möchten Stellen Sie dann die href auf Ihr neues Stylesheet ein
$('link[media='screen']').attr('href', 'Alternative.css');

5. Begrenzen Sie den ausgewählten Bereich

Code kopieren Der Code lautet wie folgt:

//Stellen Sie Ihren Klassennamen nach Möglichkeit voran ein Tag-Name
//damit jQuery nicht mehr Zeit mit der Suche verbringen muss
//für das Element, das Sie suchen. Denken Sie auch daran, dass alles
//Sie können Folgendes tun, um genauer anzugeben, wo sich das Element befindet
//auf Ihrer Seite wird die Ausführungs-/Suchzeit verkürzt
var in_stock = $('#shopping_cart_items input.is_in_stock');

• Item X


• Item Y


• Item Z

6. So verwenden Sie ToggleClass richtig

Code kopieren Der Code lautet wie folgt:

//Klasse umschalten ermöglicht das Hinzufügen oder Entfernen einer Klasse
//aus einem Element, abhängig von dessen Vorhandensein
//class. Wo einige Entwickler verwenden würden:
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
//toggleClass ermöglicht Ihnen dies ganz einfach mit a.toggleClass('blueButton');

7. Stellen Sie die vom IE angegebenen Funktionen ein

Code kopieren Der Code lautet wie folgt:

if ($.browser.msie) {
// Internet Explorer ist ein Sadist.
}

8. Verwenden Sie jQuery, um ein Element zu ersetzen

Code kopieren Der Code lautet wie folgt:

$('#thatdiv').replaceWith('fnuh ');

9. Überprüfen Sie, ob ein Element leer ist

Code kopieren Der Code lautet wie folgt:

if ($('#keks').html( )) {
//Nichts gefunden ;
}

10. Finden Sie den Index eines Elements in einer ungeordneten Menge

Code kopieren Der Code lautet wie folgt:

$("ul > li").click( function () { var index = $(this).prevAll().length });

11. Binden Sie eine Funktion an ein Ereignis

Code kopieren Der Code lautet wie folgt:

$('#foo').bind('click ', function () { Alert('Benutzer hat auf "foo" geklickt'); });

12. HTML zu einem Element hinzufügen

Code kopieren Der Code lautet wie folgt:

$('#lal').append('sometext ');

13. Verwenden Sie Objekte, um Attribute zu definieren, wenn Sie Elemente erstellen

Code kopieren Der Code lautet wie folgt:

var e = $("", { href: " #", Klasse: "a-Klasse, andere Klasse", Titel: "..." });

14. Verwenden Sie Filter, um mehrere Attribute zu filtern

Code kopieren Der Code lautet wie folgt:

//Dieser präzisionsbasierte Ansatz kann nützlich sein, wenn Sie verwenden
//viele ähnliche Eingabeelemente, die unterschiedliche Typen haben
var elements = $('#someid input[type=sometype][value=somevalue]').get();

15. Verwenden Sie jQuery, um Bilder vorab zu laden

Code kopieren Der Code lautet wie folgt:

jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); // Verwendung $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

16. Legen Sie Ereignishandler für jedes Ereignis fest, das mit einem Selektor übereinstimmt
[code]$('button.someClass').live('click', someFunction); //Beachten Sie, dass in jQuery 1.4.2 die Optionen „delegate“ und „undelegate“ geändert wurden
//eingeführt, um Live zu ersetzen, da sie eine bessere Unterstützung für den Kontext bieten
//Zum Beispiel in Bezug auf eine Tabelle, in der Sie zuvor ...
verwenden würden //
.live() $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }) ; });
//Jetzt verwenden..
$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); });

17. Suchen Sie das ausgewählte Optionselement

Code kopieren Der Code lautet wie folgt:

$('#someElement').find('option :ausgewählt' );

18. Elemente ausblenden, die bestimmte Werte enthalten

Code kopieren Der Code lautet wie folgt:

$("p.value:contains('thetextvalue' )") .hide();

19. Scrollen Sie automatisch zu einem bestimmten Bereich der Seite

Code kopieren Der Code lautet wie folgt:

jQuery.fn.autoscroll = function(selector) { $ ('html ,body').animate( {scrollTop: $(selector).offset().top}, 500 ); //Scrollen Sie dann wie folgt zu der Klasse/dem gewünschten Bereich:

$('.area_name').autoscroll();

20. Verschiedene Browser erkennen

Code kopieren Der Code lautet wie folgt:Safari erkennen (if( $.browser.safari)) , IE6 und höher erkennen (if ($.browser.msie && $.browser.version > 6 )), IE6 und niedriger erkennen (if ($.browser.msie && $.browser.version <= 6 )), Erkennen Sie FireFox 2 und höher (wenn ($.browser.mozilla && $.browser.version >= '1.8' ))

21. Ersetzen Sie Wörter in einer Zeichenfolge

Code kopieren Der Code lautet wie folgt:

var el = $('#id'); .html( el.html().replace(/word/ig, ''));

22. Schließen Sie das Rechtsklick-Menü

Code kopieren Der Code lautet wie folgt:

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

23. Definieren Sie einen benutzerdefinierten Selektor

Code kopieren Der Code lautet wie folgt:

$.expr[':'].mycustomselector = function (Element, Index, Meta, Stapel){
// element- ist ein DOM-Element
// Index – der aktuelle Schleifenindex im Stapel
// Meta – Metadaten zu Ihrem Selektor
// Stapel – Stapel aller Elemente zur Schleife
// True zurückgeben, um das aktuelle Element einzuschließen
// Gibt „false“ zurück, um das aktuelle Element auszuschließen
};
// Verwendung des benutzerdefinierten Selektors:
$('.someClasses:test').doSomething();

24. Bestimmen Sie, ob ein Element vorhanden ist

Code kopieren Der Code lautet wie folgt:

if ($('#someDiv').length) {
//Hurra!!! es existiert...
}

25. Verwenden Sie jQuery, um die linken und rechten Maustasten zu ermitteln

Code kopieren Der Code lautet wie folgt:

$("#someelement").live('click ', function (e) { if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) { warning("Linke Maustaste angeklickt" ); } else if(e.button == 2) warning("Rechte Maustaste angeklickt" });

26. Den Standardwert des Eingabefelds anzeigen oder löschen

Code kopieren Der Code lautet wie folgt:

//Dieses Snippet zeigt Ihnen, wie Sie einen Standardwert beibehalten Wert
//in einem Texteingabefeld für den Fall, dass ein Benutzer keine Eingabe gemacht hat
//ein Wert, um ihn zu ersetzen
swap_val = [];
$(".swap").each(function(i){ swap_val[i] = $(this).val();
$(this).focusin(function(){ if ($(this).val() == swap_val[i]) { $(this).val(""); } }).focusout(function(){ if ($.trim($(this).val()) == "") { $(this).val(swap_val[i] } }); .." type=text>

27. Elemente nach einer bestimmten Zeit automatisch ausblenden oder schließen (unterstützt in 1.4)

Code kopieren Der Code lautet wie folgt:

//So haben wir es in 1.3 gemacht. 2 mit setTimeout
setTimeout(function() { $('.mydiv').hide('blind', {}, 500) },
//Und so können Sie es mit 1.4 machen, indem Sie die Funktion „delay()“ verwenden (das ähnelt stark dem Schlaf)
$(".mydiv").delay(5000).hide('blind', {}, 500);

28. Elemente dynamisch für DOM erstellen

Code kopieren Der Code lautet wie folgt:

var newgbin1Div = $('');
newgbin1Div.attr('id','gbin1.com').appendTo('body');

29. Begrenzen Sie die Anzahl der Zeichen im Textbereich

Code kopieren Der Code lautet wie folgt:

jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase();
var inputType = this.type? this.type.toLowerCase() : null; if(type == "input" &&
inputType == "text" || inputType == "password"){
//Anwenden der Standard-maxLength this.maxLength = max;
} else if(type == "textarea"){ this.onkeypress = function(e){ var ob = e || Ereignis;
var keyCode = ob.keyCode;
var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
return !(this.value.length >= max &&
(keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); };
this.onkeyup = function(){ if(this.value.length > max){ this.value = this.value.substring(0,max); } }; } }); };
//Verwendung:
$('#gbin1textarea').maxLength(500);

30. 为函数创建一个基本测试用例

复制代码 代码如下:

//Unterteilen Sie Tests in Module.
module("Modul B");
test("ein anderer gbin1.com-Test", function() {
//Geben Sie an, wie viele Behauptungen voraussichtlich innerhalb eines Tests ausgeführt werden. erwarten(2); //Eine Vergleichszusicherung, äquivalent zu „assertEquals“ von JUnit.
equal( wahr, falsch, „Test nicht bestanden“ );
equal( wahr, wahr, „Test bestanden“ );
});

希望本文所述对大家的jquery程序设计有所帮助.