Heim > Artikel > Web-Frontend > Zusammenfassung der Grundkenntnisse von jQuery_jquery
1、基础
jquery对象集:
$():jquery对象集合
获取jquery对象集中的元素:
使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0]
使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0)
使用jquery的eq方法获取jquery对象集中的jquery对象元素:
$('img[alt]').eq(0)
$('img[alt]').first()
$('img[alt]').last()
jquery对象集转换成javascript数组:
var arr = $('label+button').toArray()label后面所有同级button元素,转换成javascript数组
jquery对象集的索引:
var n = $('img').index($('img#id')[0])注意:index()参数是javascript元素
var n = $('img').index('img#id') 等同于上一行 找不到返回-1
var n = $('img').index()img在同级元素中的索引
向jquery对象集中添加更多的jquery对象集:
使用逗号:$('img[alt],img[title]')
使用add方法:$('img[alt]').add('img[title]')
对不同的jquery对象集中采取不同的方法:
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');
向jquery对象集中添加新创建的元素:
$('p').add('
Elemente aus dem JQuery-Objektsatz löschen:
$('img[title]').not('[title*=pu]')
$('img').not(function(){return !$(this).hasClass('someClassname')})
JQuery-Objektsatz filtern:
$('td').filter(function(){return this.innerHTML.match(^d $)}) filtert td
mit Zahlen
Holen Sie sich eine Teilmenge des JQuery-Objektsatzes
$('*').slice(0,4) Ein neuer JQuery-Objektsatz, der die ersten 4 Elemente enthält
$('*').slice(4) Ein neuer JQuery-Objektsatz, der die ersten 4 Elemente enthält
$('div').has('img[alt]')
Elemente im JQuery-Objektsatz konvertieren
var allIds = $('div').map(function(){
Return (this.id==undefiniert) ? null : this.id;
}).get();Über die get-Methode in ein Javascript-Array konvertieren
Durchlaufen Sie die Elemente im JQuery-Objektsatz
$('img').each(function(n){
This.alt = 'Dies ist das ['n']te Bild, die ID des Bildes ist' this.id;
})
$([1,2,3]).each(function(){alert(this);})
Verwenden Sie die Beziehung zwischen Elementen, um einen JQuery-Objektsatz zu erhalten
$(this).closest('div') Zum Beispiel, in welchem Div die ausgelöste Schaltfläche vorkommt
$(this).siblings('button[title="Close"]')Alle Geschwisterelemente, außer sich selbst
$(this).children('.someclassname')Alle untergeordneten Knotenelemente, mit Ausnahme doppelter untergeordneter Knoten
$(this).closest('') grenzt an das Vorgängerelement
$(this).contents() ist eine Reihe von JQuery-Objekten, die aus Elementinhalten bestehen. Sie können beispielsweise den Inhalt des
$(this).find(p span)
var hasImg = $('*').is('img');
$().hide()
$().addClass('')
$().html('')
$('a').size()Anzahl der Elemente
$('p:even')
$('tr:nth-child(1)')
$('body > div') direktes untergeordnetes Element
$('a[href=$='pdf']')Wählen Sie
basierend auf Attributen aus
$(div:has(a))-Filter
$.trim()
$(document).ready(function(){});
$(function(){});
$('
').insertAfter();
if(item)(){}else{} loser Test
If(item != null) Empfohlener Test, kann null und undefiniert
unterscheiden
2. Wählen Sie das zu bedienende Element aus
Gemäß Tag-Name: $('a')
Basierend auf der ID: $('#id')
Entsprechend dem Klassennamen: $('.someclassname')
Erfüllen Sie mehrere Bedingungen: $('a#id.someclassname') oder $('div,span')
Alle untergeordneten Knoten eines Elements: $(p a.someclassname)
Direkter untergeordneter Knoten eines Elements: $(ul.myList > li)
Nach Attributname:
$(a[href^='http://']) beginnt mit...
$(href$='.pdf') endet mit...
$(form[method]) form
mit Methodenattribut
$(input[type='text'])
$(input[name!=''])
$(href*='some')contains
Das erste Element nach einem bestimmten Element: $(E F) entspricht F und F ist das erste Element nach E
Ein Element nach einem bestimmten Element: $(E~F) entspricht F, und F ist ein Element nach E
Passposition:
$(li:first)Das erste li
$(li:last)last li
$(li:even)even row li
$(li:odd)odd line li
$(li:eq(n))Das n-te Element, Index beginnt bei 0
$(li:gt(n))Die Elemente nach dem n-ten Element, der Index beginnt bei 0
$(li:lt(n))Das Element vor dem n-ten Element, der Index beginnt bei 0
$(ul:first-child)Das erste li
in der Liste
$(ul:last-child)Das letzte Li in der Liste
$(ul:nth-child(n))Das n-te Li
in der Liste
$(ul:only-child)ul ohne Bruder li
$(ul:nth-child(even))Die gerade Zeile li in der Liste, ungerade ist die Anzahl der Zeilen li
$(ul:nth-child(5n 1))li
in der Liste geteilt durch 5 mit Rest 1
Nach Filter:
$(input:not(:checkbox))
$(':not(img[src*="dog"])')
$('img:not([src*="dog"])')
$(div:has(span))
$('tr:has(img[src$="pu.png"])')
$(tr:animated)tr
im animierten Zustand
$(input:button) beinhaltet Eingabe
vom Typ „Schaltfläche“, „Zurücksetzen“, „Senden“.
$(input:checkbox) entspricht $(input[type=checkbox])
$(span:contains(food))span
enthält den Text food
$(input:disabled)disable
$(input:enabled)Aktivieren
$(input:file) entspricht $(input[type=file])
$(:header)h1 bis h6
$(Eingabe:versteckt)
$(input:image) entspricht $(input[type=image])
$(:input) umfasst Eingabe-, Auswahl-, Textbereichs- und Schaltflächenelemente
$(tr:parent)
$(input:password) entspricht $(input[type=password])
$(input:radio) entspricht $(input[type=radio])
$(input:reset) entspricht $(input[type=reset]) oder $(button[type=reset])
$('.clssname:selected')
$(input:submit) entspricht $(input[type=submit]) oder $(button[type=submit])
$(input:text) entspricht $(input[type=text])
$(div:sichtbar)
3. DOM-Elemente verarbeiten
Manipulieren Sie die Attribute von Elementen:
$('*').each(function(n){
This.id = this.tagName n;
})
Attributwert abrufen: $('').attr('');
Attributwert festlegen:
$('*').attr('title', function(index, previousValue){
Return previousValue ' Ich bin Element ' index ' und mein Name ist ' this.id;
}) Legen Sie einen Wert für ein Attribut
fest
$('input').attr({
Wert: '',
Titel: ''
}); Werte für mehrere Attribute festlegen
Attribute löschen:
$('p').removeAttr('value');
Alle Links in neuen Fenstern öffnen:
$('a[href^="http://"]').attr('target',"_blank");
Vermeiden Sie es, das Formular mehrmals abzusenden:
$("form").submit(function(){
$(":submit", this).attr("disabled","disabled");
})
Klassennamen hinzufügen: $('#id').addClass('')
Klassennamen löschen: $('#id').removeClass('')
Klassennamen wechseln: $('#id').toggleClass('') Klassennamen löschen, falls vorhanden, Klassennamen hinzufügen, falls nicht vorhanden
Bestimmen Sie, ob es einen Klassennamen enthält: $('p:first').hasClass('') $('p:first').is('')
Gibt eine Liste von Klassennamen in Array-Form zurück:
$.fn.getClassNames = function(){
var name = this.attr('someclsssname');
if(name != null){
Geben Sie name.split(" ");
zurück
}
sonst
{
Geben Sie [];
zurück
}
}
Stil festlegen:
$('div.someclassname').css(function(index, currentWidth){
Gibt currentWidth 20;
zurück
});
$('div').css({
Cursor: 'Zeiger',
Rand: „1px einfarbig schwarz“,
Polsterung: '12px 12px 20px 20x',
bacgroundColor: 'Weiß'
});
Über die Größe:
$(div).width(500)
$('div').height()
$('div').innerHeight()
$('div').innerWidth()
$('div').outerHeight(true)
$('div').outerWidth(false)
Über die Positionierung:
$('p').offset() Referenzposition relativ zum Dokument
$('p').position() versetzt die relative Position des übergeordneten Elements
$('p').scrollLeft() Offset-Wert der horizontalen Bildlaufleiste
$('p').scrollLeft(value)
$('p').scrollTop()
$('p').scrollTop(value)
Relevanter Elementinhalt:
$('p').html()
$('p').html('')
$('p').text()
$('p').text('')
Zusätzliche Inhalte
Hängen Sie am Ende des Elements ein Stück HTML an: $('p').append('some text');
Vorhandene Elemente im Dom am Ende des Elements: $('p').append($(a.someclassname))
Am Anfang des Elements anhängen: $("p").prepend()
Vor dem Element anhängen: $("span").before()
Nach dem Element anhängen: $("span")after()
Inhalt am Ende anhängen: appendTo(targets)
Inhalt am Anfang anhängen: prependTo(targets)
Inhalt an die Vorderseite des Elements anhängen: insertBefore(targets)
Inhalt an das Ende des Elements anhängen: $('
Wrap-Element:
$('a.someclassname').wrap("
Element löschen:
$('.classname').remove() löscht das Element und die an das Element gebundenen Ereignisse und Daten werden ebenfalls gelöscht
$('.classname').detach() löscht Elemente, behält aber Ereignisse und Daten bei
$('.classname').empty() löscht das Element nicht, sondern löscht den Elementinhalt
Element kopieren:
$('img').clone().appendTo('p.someclassname')
$('ul').clone().insertBefore('#id')
Ersatzelement:
$('img[alt]').each(function(){
$(this).replaceWith('' $(this).attr('alt') '');
})
$("p").replaceAll("")
Über den Wert des Formularelements:
$('[name="radioGroup"]:checked').val() ruft den Wert des Optionsfelds ab. Wenn eines nicht ausgewählt ist, wird undefiniert zurückgegeben
var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){
Geben Sie $(this).val();
zurück
}).toArray(); Den Wert des Mehrfachauswahlfelds abrufen
Für