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
.filter(":not(:has(.selected ))" ) //Alle Elemente entfernen, die nicht die Klasse .selected
enthalten
2. Verwenden Sie Ihre Elementabfragen wieder
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
//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
//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
//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');
6. So verwenden Sie ToggleClass richtig
//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
if ($.browser.msie) {
// Internet Explorer ist ein Sadist.
}
8. Verwenden Sie jQuery, um ein Element zu ersetzen
$('#thatdiv').replaceWith('fnuh ');
9. Überprüfen Sie, ob ein Element leer ist
if ($('#keks').html( )) {
//Nichts gefunden ;
}
10. Finden Sie den Index eines Elements in einer ungeordneten Menge
$("ul > li").click( function () { var index = $(this).prevAll().length });
11. Binden Sie eine Funktion an ein Ereignis
$('#foo').bind('click ', function () { Alert('Benutzer hat auf "foo" geklickt'); });
12. HTML zu einem Element hinzufügen
$('#lal').append('sometext ');
13. Verwenden Sie Objekte, um Attribute zu definieren, wenn Sie Elemente erstellen
var e = $("", { href: " #", Klasse: "a-Klasse, andere Klasse", Titel: "..." });
14. Verwenden Sie Filter, um mehrere Attribute zu filtern
//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
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
$('#someElement').find('option :ausgewählt' );
18. Elemente ausblenden, die bestimmte Werte enthalten
$("p.value:contains('thetextvalue' )") .hide();
19. Scrollen Sie automatisch zu einem bestimmten Bereich der Seite
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
var el = $('#id'); .html( el.html().replace(/word/ig, ''));
22. Schließen Sie das Rechtsklick-Menü
$(document).bind('contextmenu',function (e) { return false; });
23. Definieren Sie einen benutzerdefinierten Selektor
$.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
if ($('#someDiv').length) {
//Hurra!!! es existiert...
}
25. Verwenden Sie jQuery, um die linken und rechten Maustasten zu ermitteln
$("#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
//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)
//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
var newgbin1Div = $('');
newgbin1Div.attr('id','gbin1.com').appendTo('body');
29. Begrenzen Sie die Anzahl der Zeichen im Textbereich
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程序设计有所帮助.
