$()

$(selector, [context])  ⇒ collection
$(<Zepto collection>)  ⇒ same collection
$(<DOM nodes>)  ⇒ collection
$(htmlString)  ⇒ collection
$(htmlString, attributes)  ⇒ collection v1.0+
Zepto(function($){ ... }) 

Durch Ausführen eines CSS-Selektors, Umwickeln von DOM-Knoten oder Erstellen mehrerer Elemente aus einem HTML-String wird ein Zepto-Sammlungsobjekt erstellt.

Eine Zepto-Sammlung ist ein array-ähnliches Objekt. Es besitzt verkettbare Methoden, um die DOM-Knoten zu bearbeiten, auf die es zeigt. Abgesehen von den direkten Methoden auf dem $(Zepto)-Objekt (wie$.extend) sind alle Methoden im Dokument Sammlungsmethoden.

Wenn im Selektor ein content-Parameter vorhanden ist (CSS-Selektor, DOM oder Zepto-Sammlungsobjekt), wird der CSS-Selektor nur im Kontext der angegebenen Knoten ausgeführt. Diese Funktion ist identisch mit der Verwendung von$(context).find(selector).

Wenn ein HTML-String-Fragment zum Erstellen eines DOM-Knotens angegeben wird, können Sie auch eine Zuordnung von Attributen zum Erstellen des Knotens übergeben. Das schnellste Erstellen eines einzelnen Elements erfolgt mit der Form<div> oder <div/>形式。

Wenn eine Funktion an denDOMContentLoaded Ereignisablauf angehängt wird, wird diese Methode sofort ausgeführt, falls die Seite bereits geladen ist.

$('div')  //=> 所有页面中得div元素
$('#foo') //=> ID 为 "foo" 的元素

// 创建元素:
$("<p>Hello</p>") //=> 新的p元素
// 创建带有属性的元素:
$("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} })
//=> <p id=greeting style="color:darkblue">Hello</p>

// 当页面ready的时候，执行回调:
Zepto(function($){
  alert('Ready to Zepto!')
})

jQuery CSS-Erweiterungen werden nicht unterstützt. Das optionale Modul „selector" bietet jedoch eingeschränkte Unterstützung für einige der häufigsten Pseudoselektoren. Es lässt sich entfernen, um die Kompatibilität mit vorhandenem Code oder Plugins zu gewährleisten.

Wenn die Variable$noch nicht definiert ist, setzt Zepto nur die globale Variable$auf sich selbst. Dies erlaubt Ihnen, Zepto gleichzeitig mit nützlichem Legacy-Code zu verwenden, zum Beispiel prototype.js. Solange Prototype zuerst geladen wird, überschreibt Zepto die Funktion $ von Prototype nicht. Zepto setzt die globale VariableZeptoimmer auf sich selbst.

$.camelCase v1.0+

$.camelCase(string)  ⇒ string

Wandelt eine Zeichenkette in eine neue Zeichenkette in „CamelCase"-Schreibweise um. Ist die Zeichenkette bereits in CamelCase, bleibt sie unverändert.

$.camelCase('hello-there') //=> "helloThere"
$.camelCase('helloThere')  //=> "helloThere"

$.contains v1.0+

$.contains(parent, node)  ⇒ boolean

Prüft, ob ein Elternknoten einen angegebenen DOM-Knoten enthält. Wenn beide derselbe Knoten sind, wirdfalse。

$.each

$.each(collection, function(index, item){ ... })  ⇒ collection

Durchläuft Array-Elemente oder Objekte als Schlüssel-Wert-Paare. Die Iteration stoppt, wenn die Callback-Funktionfalse zurückgibt.

$.each(['a', 'b', 'c'], function(index, item){
  console.log('item %d is: %s', index, item)
})

var hash = { name: 'zepto.js', size: 'micro' }
$.each(hash, function(key, value){
  console.log('%s: %s', key, value)
})

$.extend

$.extend(target, [source, [source2, ...]])  ⇒ target
$.extend(true, target, [source, ...])  ⇒ target v1.0+

Erweitert die Eigenschaften eines Zielobjekts durch ein Quellobjekt. Die Eigenschaften des Quellobjekts überschreiben die Eigenschaften des Zielobjekts.

Standardmäßig wird eine flache Kopie erstellt. Ist der erste Parameter true, wird eine tiefe Kopie erstellt.

var target = { one: 'patridge' },
    source = { two: 'turtle doves' }

$.extend(target, source)
//=> { one: 'patridge',
//     two: 'turtle doves' }

$.fn

Zepto.fnIst ein Objekt, das alle auf Zepto-Objekten verfügbaren Methoden besitzt, wieaddClass(),attr()und andere Methoden. Fügen Sie diesem Objekt eine Methode hinzu, dann steht diese Methode auf allen Zepto-Objekten zur Verfügung.

Hier ist ein Beispiel zur Implementierung einerempty()Methode von Zepto:

$.fn.empty = function(){
  return this.each(function(){ this.innerHTML = '' })
}

$.grep v1.0+

$.grep(items, function(item){ ... })  ⇒ array

Gibt ein neues Array zurück. Das neue Array enthält nur die Array-Elemente, für die die Callback-Funktion true zurückgibt.

$.grep([1,2,3],function(item){
    return item > 1
});//=>[2,3]
    

$.inArray v1.0+

$.inArray(element, array, [fromIndex])  ⇒ number

Gibt den Index des angegebenen Elements im Array zurück (Hinweis: nullbasiert). Wenn das Element nicht gefunden wird, gibt die Methode-1。

Hinweis:[fromIndex] Der Parameter ist optional. Er gibt den Index an, ab dem rückwärts gesucht wird.

$.inArray("abc",["bcd","abc","edf","aaa"]);//=>1

$.inArray("abc",["bcd","abc","edf","aaa"],1);//=>1

$.inArray("abc",["bcd","abc","edf","aaa"],2);//=>-1
         

$.isArray

$.isArray(object)  ⇒ boolean

Wenn object ein Array ist, gibt die Methode true zurück.

$.isFunction

$.isFunction(object)  ⇒ boolean

Wenn object eine Funktion ist, gibt die Methode true zurück.

$.isPlainObject v1.0+

$.isPlainObject(object)  ⇒ boolean

Prüft, ob das Objekt ein „reines" Objekt ist. Dieses Objekt wurde durch ein Objektliteral ("{}") odernew Object erstellt. Wenn ja, gibt die Methode true zurück.

$.isPlainObject({})         // => true
$.isPlainObject(new Object) // => true
$.isPlainObject(new Date)   // => false
$.isPlainObject(window)     // => false

$.isWindow v1.0+

$.isWindow(object)  ⇒ boolean

Gibt true zurück, wenn der Parameter object ein window-Objekt ist. Das ist bei der Verarbeitung von iframes nützlich, weil jeder iframe sein eigenes window-Objekt hat. Die Prüfung dieser Objekte mit der normalen Methodeobj === windowschlägt fehl.

$.map

$.map(collection, function(item, index){ ... })  ⇒ collection

Durchläuft die Elemente der Sammlung und gibt alle Ergebnisse der Iterationsfunktion zurück (Hinweis: als neues Array).null 和 undefined werden herausgefiltert.

$.map([1,2,3,4,5],function(item,index){
        if(item>1){return item*item;}
}); 
// =>[4, 9, 16, 25]

$.map({"yao":1,"tai":2,"yang":3},function(item,index){
    if(item>1){return item*item;}
}); 
// =>[4, 9]

$.parseJSON v1.0+

$.parseJSON(string)  ⇒ object

Alias für die nativeJSON.parseMethode. (Hinweis: Sie nimmt einen JSON-String im Standardformat an und gibt das geparste JavaScript-Objekt zurück.)

$.trim v1.0+

$.trim(string)  ⇒ string

Entfernt Leerzeichen am Anfang und Ende eines Strings. Ähnlich wie String.prototype.trim().

$.type v1.0+

$.type(object)  ⇒ string

Gibt den Typ eines JavaScript-Objekts zurück. Mögliche Typen sind:null undefined boolean number string function array date regexp object error。

Für andere Objekte meldet die Methode nur „object". Wenn Sie prüfen wollen, ob ein Objekt ein gewöhnliches JavaScript-Objekt ist, verwenden Sie isPlainObject.

add

add(selector, [context])  ⇒ self

Fügt Elemente zur aktuellen Sammlung der passenden Elemente hinzu. Wenn der Parameter content angegeben ist, sucht die Methode nur innerhalb der content-Elemente, sonst im gesamten document.

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
</ul>
<p>a paragraph</p>

<script type="text/javascript">
    $('li').add('p').css('background-color', 'red');
</script>

addClass

addClass(name)  ⇒ self
addClass(function(index, oldClassName){ ... })  ⇒ self

Fügt jedem passenden Element die angegebenen Klassennamen hinzu. Mehrere Klassennamen werden durch Leerzeichen getrennt.

after

after(content)  ⇒ self

Fügt nach jedem passenden Element Inhalt ein (Hinweis: externes Einfügen). Der Inhalt kann ein HTML-String, ein DOM-Knoten oder ein Array aus Knoten sein.

$('form label').after('<p>A note below the label</p>')

append

append(content)  ⇒ self

Fügt am Ende jedes passenden Elements Inhalt ein (Hinweis: internes Einfügen). Der Inhalt kann ein HTML-String, ein DOM-Knoten oder ein Array aus Knoten sein.

$('ul').append('<li>new list item</li>')

appendTo

appendTo(target)  ⇒ self

Fügt die übereinstimmenden Elemente am Ende des Zielelements ein (Anmerkung: interne Einfügung). Das ähnelt append, aber das Einfügeziel ist umgekehrt.

$('<li>new list item</li>').appendTo('ul')

attr

attr(name)  ⇒ string
attr(name, value)  ⇒ self
attr(name, function(index, oldValue){ ... })  ⇒ self
attr({ name: value, name2: value2, ... })  ⇒ self

Liest oder setzt Attribute des DOM. Ohne den Parameter value liest die Methode den Attributwert des ersten Elements in der Objektsammlung. Mit dem Parameter value setzt die Methode den Attributwert aller Elemente in der Objektsammlung. Wenn valuenullist, wird das Attribut entfernt (ähnlich wie removeAttr). Mehrere Attribute lassen sich über Objekt-Schlüssel-Wert-Paare setzen.

Um DOM-Eigenschaften wiechecked和selectedzu lesen, verwenden Sie prop.

var form = $('form')
form.attr('action')             //=> 读取值
form.attr('action', '/create')  //=> 设置值
form.attr('action', null)       //=> 移除属性

// 多个属性:
form.attr({
  action: '/create',
  method: 'post'
})

before

before(content)  ⇒ self

Fügt Inhalte vor jedem übereinstimmenden Element ein (Anmerkung: externe Einfügung). Die Inhalte können ein HTML-String, ein DOM-Knoten oder ein Array aus Knoten sein.

$('table').before('<p>See the following table:</p>')

children

children([selector])  ⇒ collection

Gibt die direkten Kindelemente jedes übereinstimmenden Elements zurück. Bei einem gegebenen selector enthält das Ergebnis nur Elemente, die dem CSS-Selektor entsprechen.

$('ol').children('*:nth-child(2n)')
//=> every other list item from every ordered list

clone v1.0+

clone()  ⇒ collection

Kopiert alle Elemente in der Sammlung durch tiefes Klonen.

Diese Methode kopiert keine Daten und Ereignishandler in die neuen Elemente. Das unterscheidet sich von jQuery, wo ein Parameter bestimmt, ob Daten und Ereignishandler kopiert werden.

closest

closest(selector, [context])  ⇒ collection
closest(collection)  ⇒ collection v1.0+
closest(element)  ⇒ collection v1.0+

Beginnt beim Element selbst und durchläuft die übergeordneten Elemente aufwärts. Die Methode gibt das erste Element zurück, das dem selector entspricht. Bei einem gegebenen context-Knoten werden nur Nachfahren dieses Knotens geprüft. Diese Methode ähneltparents(selector), gibt aber nur das erste übereinstimmende Vorfahrenelement zurück.

Ist das Argument eine Zepto-Objektsammlung oder ein Element, muss das Ergebnis dem gegebenen Element entsprechen und nicht dem Selektor.

var input = $('input[type=text]')
input.closest('form')

concat

concat(nodes, [node2, ...])  ⇒ self

Fügt Elemente zu einer Zepto-Objektsammlung hinzu und bildet ein neues Array. Ist das Argument ein Array, werden dessen Elemente in die Zepto-Objektsammlung zusammengeführt.

Dies ist eine Methode von Zepto und keine API von jQuery.

contents v1.0+

contents()  ⇒ collection

Gibt die Kindelemente jedes übereinstimmenden Elements zurück, einschließlich Text- und Kommentarknoten. (Anmerkung: .contents() ähnelt .children(), enthält aber zusätzlich Textknoten sowie die im jQuery-Objekt erzeugten HTML-Elemente.)

css

css(property)  ⇒ value
css([property1, property2, ...])  ⇒ object v1.1+
css(property, value)  ⇒ self
css({ property: value, property2: value2, ... })  ⇒ self

Liest oder setzt CSS-Attribute von DOM-Elementen. Ohne den Parameter value gibt die Methode das CSS-Attribut des ersten Elements in der Objektsammlung zurück. Mit dem Parameter value setzt die Methode das entsprechende CSS-Attribut jedes Elements in der Objektsammlung.

Mehrere Attribute lassen sich auf einmal abrufen, indem Sie ein Array mit Attributnamen übergeben. Mehrere Attribute lassen sich über Objekt-Schlüssel-Wert-Paare setzen.

Ist value leer (leerer String,null oder undefined), wird das CSS-Attribut entfernt. Ist value eine Zahl ohne Einheit, fügt die Methode "px" automatisch hinzu, wenn das CSS-Attribut eine Einheit benötigt.

var elem = $('h1')
elem.css('background-color')          // read property
elem.css('background-color', '#369')  // set property
elem.css('background-color', '')      // remove property

// set multiple properties:
elem.css({ backgroundColor: '#8EE', fontSize: 28 })

// read multiple properties:
elem.css(['backgroundColor', 'fontSize'])['fontSize']

data

data(name)  ⇒ value
data(name, value)  ⇒ self

Liest oder schreibt dasdata-*-Attribut des DOM. Das Verhalten ähnelt attr, aber dem Attributnamen wirddata-。

Beim Lesen von Attributwerten gelten folgende Umwandlungen: v1.0+

• "true", "false" und "null" werden in die entsprechenden Typen umgewandelt;
• Zahlenwerte werden in den tatsächlichen Zahlentyp umgewandelt;
• JSON-Werte werden geparst, wenn es sich um gültiges JSON handelt;
• Alles andere wird als String zurückgegeben. Die Basisimplementierung von Zepto für `data()` kann nur Strings speichern. Um beliebige Objekte zu speichern, binden Sie das optionale Modul "data" in Ihren Zepto-Build ein.

each

each(function(index, item){ ... })  ⇒ self

Durchläuft jedes Element einer Objektsammlung. In der Iterationsfunktion,thisDas Schlüsselwort verweist auf das aktuelle Element. Es wird als zweiter Parameter an die Funktion übergeben. Gibt die Iterationsfunktion zurück, falseDie Iteration ist beendet.

$('form input').each(function(index){
  console.log('input %d is: %o', index, this)
})

empty

empty()  ⇒ self

Leert den DOM-Inhalt jedes Elements in der Objektsammlung.

eq

eq(index)  ⇒ collection

Gibt das Element am angegebenen Index (nullbasiert) aus der aktuellen Objektsammlung zurück.

$('li').eq(0)   //=> only the first list item
$('li').eq(-1)  //=> only the last list item

filter

filter(selector)  ⇒ collection
filter(function(index){ ... })  ⇒ collection v1.0+

Filtert eine Objektsammlung und gibt die Elemente zurück, die dem CSS-Selektor entsprechen. Ist das Argument eine Funktion, wird ein Element nur zurückgegeben, wenn die Funktion einen tatsächlichen Wert liefert. In der Funktion:this Das Schlüsselwort verweist auf das aktuelle Element.

Die umgekehrte Funktion finden Sie unter not .

find

find(selector)  ⇒ collection
find(collection)  ⇒ collection v1.0+
find(element)  ⇒ collection v1.0+

Findet in der aktuellen Sammlung die Nachfolgerelemente jedes Elements, die dem CSS-Selektor entsprechen.

Wenn eine Zepto-Sammlung oder Elemente angegeben sind, werden sie gefiltert. Sie werden nur zurückgegeben, wenn sie in der aktuellen Zepto-Sammlung enthalten sind.

var form = $('#myform')
form.find('input, select')

first

first()  ⇒ collection

Gibt das erste Element der aktuellen Sammlung zurück.

$('form').first()

forEach

forEach(function(item, index, array){ ... }, [context]) 

Durchläuft jedes Element der Sammlung. Die Methode ähnelt each, aber die Parameter der Durchlauffunktion sind anders.false Wenn die Funktion zurückkehrt, stoppt der Durchlauf nicht.

Dies ist eine Methode von Zepto, keine API von jQuery.

get

get()  ⇒ array
get(index)  ⇒ DOM node

Ruft alle Elemente oder ein einzelnes Element aus der aktuellen Objektsammlung ab. Wenn der Parameter index nicht existiert, werden alle Elemente als normales Array zurückgegeben. Wenn index angegeben ist, wird nur das Element an dieser Position zurückgegeben. Das unterscheidet sich von eq. Diese Methode gibt einen DOM-Knoten zurück, keine Zepto-Objektsammlung.

var elements = $('h2')
elements.get()   //=> get all headings as an array
elements.get(0)  //=> get first heading node

has v1.0+

has(selector)  ⇒ collection
has(node)  ⇒ collection

Prüft, ob die Unterelemente der aktuellen Objektsammlung Elemente enthalten, die dem Selektor entsprechen, oder ob sie den angegebenen DOM-Knoten enthalten. Wenn ja, wird eine neue Objektsammlung zurückgegeben. Diese Sammlung filtert alle Objekte heraus, die keine zum Selektor passenden Elemente oder den angegebenen DOM-Knoten enthalten.

$('ol > li').has('a[href]')
//=> get only LI elements that contain links

hasClass

hasClass(name)  ⇒ boolean

Prüft, ob ein Element in der Objektsammlung die angegebene class enthält.

<ul>
    <li>list item 1</li>
    <li class="yaotaiyang">list item 2</li>
    <li>list item 3</li>
</ul>
<p>a paragraph</p>

<script type="text/javascript">
    $("li").hasClass("yaotaiyang");
  //=> true
</script>

height

height()  ⇒ number
height(value)  ⇒ self
height(function(index, oldHeight){ ... })  ⇒ self

Gibt die Höhe des ersten Elements in der Objektsammlung zurück. Oder setzt die Höhe aller Elemente in der Objektsammlung.

$('#foo').height()   // => 123
$(window).height()   // => 838 (viewport height)
$(document).height() // => 22302

hide

hide()  ⇒ self

Hide elements in this collection by setting theirdisplay CSS-Eigenschaft auf none.

Durch Setzen der CSS-Eigenschaftdisplay 为 noneblenden Sie die Elemente in der Objektsammlung aus.

html

html()  ⇒ string
html(content)  ⇒ self
html(function(index, oldHtml){ ... })  ⇒ self

Ruft den HTML-Inhalt der Elemente in der Objektsammlung ab oder setzt ihn. Ohne den Parameter content gibt die Methode das innerHtml des ersten Elements zurück. Mit dem Parameter content ersetzt die Methode den Inhalt jedes Elements. content akzeptiert alle Typen, die unter append beschrieben sind.

// autolink everything that looks like a Twitter username
$('.comment p').html(function(idx, oldHtml){
  return oldHtml.replace(/(^|\W)@(\w{1,15})/g,
    '$1@<a href="http://twitter.com/$2">$2</a>')
})

index

index([element])  ⇒ number

Gibt den Index eines Elements zurück (Hinweis: Zählung beginnt bei 0). Ohne den Parameter element gibt die Methode die Position des aktuellen Elements unter den Geschwisterknoten zurück. Mit dem Parameter element gibt die Methode seine Position in der aktuellen Objektsammlung zurück. Wenn das Element nicht gefunden wird, gibt die Methode-1。

$('li:nth-child(2)').index()  //=> 1

indexOf

indexOf(element, [fromIndex])  ⇒ number

Gibt die Position eines Elements in der aktuellen Sammlung zurück. Wenn eine Zahl fromIndex angegeben ist, wird nur ab dieser Position gesucht. Bei Fund gibt die Methode die 0-basierte Position zurück, sonst-1wird -1 zurückgegeben. Verwenden Sie index statt dieser Methode.

Gibt den Index eines Elements in der aktuellen Objektsammlung zurück (Hinweis: Zählung beginnt bei 0). Wenn der Parameter formindex angegeben ist, wird ab dieser Position gesucht. Bei Fund gibt die Methode den 0-basierten Index zurück, sonst gibt sie-1zurück. Die Methode index basiert auf dieser Methode.

Dies ist eine Methode von Zepto, kein jQuery-API.

insertAfter

insertAfter(target)  ⇒ self

Fügt die Elemente der Sammlung hinter das angegebene Zielelement ein (Hinweis: externe Einfügung). Das ähnelt after, aber die Verwendungsweise ist umgekehrt.

$('<p>Emphasis mine.</p>').insertAfter('blockquote')

insertBefore

insertBefore(target)  ⇒ self

Fügt die Elemente der Sammlung vor das angegebene Zielelement ein (Hinweis: externe Einfügung). Das ähnelt before, aber die Verwendungsweise ist umgekehrt.

$('<p>See the following table:</p>').insertBefore('table')

is

is(selector)  ⇒ boolean

Prüft, ob das erste Element der aktuellen Sammlung dem CSS-Selektor entspricht. Für die Basisunterstützung von jQuery-ähnlichen nicht standardmäßigen Selektoren gilt::visibleDie Funktion ist im optionalen Modul „selector“ enthalten.

jQuery CSS extensions werden nicht unterstützt. Das Modul „selector“ unterstützt nur einige wenige der häufigsten Formen.

last

last()  ⇒ collection

Gibt das letzte Element der Objektsammlung zurück.

$('li').last()

map

map(function(index, item){ ... })  ⇒ collection

Durchläuft alle Elemente der Objektsammlung. Aus den Rückgabewerten der Durchlauffunktion entsteht ein neues Sammlungsobjekt. In der Durchlauffunktion zeigtthisthis auf das aktuelle Element (der zweite Parameter der Durchlauffunktion).

Gibt die Durchlauffunktionnull和undefinedbeendet die Methode den Durchlauf.

// get text contents of all elements in collection
elements.map(function(){ return $(this).text() }).get().join(', ')

next

next()  ⇒ collection
next(selector)  ⇒ collection v1.0+

Gibt das nächste Geschwisterelement jedes Elements in der Sammlung zurück, optional gefiltert nach Selektor.

Gibt für jedes Element der Objektsammlung den nächsten Geschwisterknoten zurück (optional mit Filterselektor).

$('dl dt').next()   //=> the DD elements

not

not(selector)  ⇒ collection
not(collection)  ⇒ collection
not(function(index){ ... })  ⇒ collection

Filtert die aktuelle Objektsammlung und gibt eine neue Objektsammlung zurück. Ihre Elemente entsprechen nicht dem CSS-Selektor. Ist ein weiterer Parameter eine Zepto-Objektsammlung, enthält die neue Zepto-Sammlung keine Elemente aus diesem Parameterobjekt. Ist der Parameter eine Funktion, enthält die Sammlung nur Elemente, bei denen die Funktion false zurückgibt. In der Funktion zeigtthis this auf das aktuelle Element.

Die umgekehrte Funktion finden Sie unter filter.

offset

offset()  ⇒ object
offset(coordinates)  ⇒ self v1.0+
offset(function(index, oldOffset){ ... })  ⇒ self v1.0+

Gibt die Position des aktuellen Elements relativ zum Dokument zurück. Die Methode gibt ein Objekt mit folgenden Werten zurück:top, left, width和height

Wenn ein Objekt mit den Attributenleft和topangegeben ist, verwendet die Methode diese Werte, um jedes Element der Sammlung relativ zum Dokument zu positionieren.

offsetParent v1.0+

offsetParent()  ⇒ collection

Findet das erste positionierte Vorfahrenelement. Das bedeutet, sein CSS-Wert vonposition ist „relative“, „absolute“ oder „fixed“.

parent

parent([selector])  ⇒ collection

Gibt das direkte Elternelement jedes Elements in der Objektsammlung zurück. Wenn ein CSS-Selektor-Parameter angegeben ist, werden nur passende Elemente gefiltert.

parents

parents([selector])  ⇒ collection

Gibt alle Vorgängerelemente jedes Elements in der Objektsammlung zurück. Wenn ein CSS-Selektor-Parameter angegeben ist, werden nur passende Elemente gefiltert.

Verwenden Sie parent, um das direkte Elternelement zu erhalten. Verwenden Sie closest, um nur das erste Element zu erhalten, das zum CSS-Selektor passt.

$('h1').parents()   //=> [<div#container>, <body>, <html>]

pluck

pluck(property)  ⇒ array

Gibt den Attributwert jedes Elements in der Objektsammlung zurück. Der Rückgabewert istnulloder undefinedDie Werte müssen gefiltert werden.

$('body > *').pluck('nodeName') // => ["DIV", "SCRIPT"]

// implementation of Zepto's `next` method
$.fn.next = function(){
  return $(this.pluck('nextElementSibling'))
}

Dies ist eine Methode von Zepto, keine API von jquery.

position v1.0+

position()  ⇒ object

Gibt die Position des ersten Elements in einer Objektsammlung zurück. Die Position ist relativ zu offsetParent. Diese Methode ist nützlich, wenn ein absolut positioniertes Element nahe an einem anderen Element liegt.

Returns an object with properties:top, left.

var pos = element.position()

// position a tooltip relative to the element
$('#tooltip').css({
  position: 'absolute',
  top: pos.top - 30,
  left: pos.left
})

prepend

prepend(content)  ⇒ self

Fügt den Inhalt der Parameter vor jedes übereinstimmende Element ein (Einfügen innerhalb des Elements). Die eingefügten Elemente können ein HTML-Fragment, ein DOM-Knoten oder ein Array von Knoten sein.

$('ul').prepend('<li>first list item</li>')

prependTo

prependTo(target)  ⇒ self

Fügt alle Elemente vor das Ziel ein (Einfügen innerhalb des Elements). Das ähnelt prepend, aber in umgekehrter Richtung.

$('<li>first list item</li>').prependTo('ul')

prev

prev()  ⇒ collection
prev(selector)  ⇒ collection v1.0+

Gibt für jedes Element in der Objektsammlung den vorherigen Geschwisterknoten zurück. Die Filterung erfolgt über einen Selektor.

prop v1.0+

prop(name)  ⇒ value
prop(name, value)  ⇒ self
prop(name, function(index, oldValue){ ... })  ⇒ self

Liest oder setzt den Attributwert eines DOM-Elements. Beim Lesen von Attributwerten hat es Vorrang vor attr. Denn diese Attributwerte ändern sich durch Benutzerinteraktionen, wiechecked und selected。

Kurznamen oder Kleinschreibung, zum Beispielfor, class, readonlyund ähnliche Attribute, werden auf die tatsächlichen Attribute abgebildet, zum BeispielhtmlFor, className, readOnly, usw.

push

push(element, [element2, ...])  ⇒ self

Add elements to the end of the current collection.

Fügt Elemente am Ende der aktuellen Objektsammlung hinzu.

Dies ist eine Methode von zepto, keine API von jquery.

ready

ready(function($){ ... })  ⇒ self

Fügt einen Event-Listener hinzu. Dieser wird ausgelöst, wenn das DOM der Seite geladen ist und das Ereignis „DOMContentLoaded" feuert. Verwenden Sie stattdessen $().

reduce

reduce(function(memo, item, index, array){ ... }, [initial])  ⇒ value

Hat dieselbe Verwendung wie Array.reduce und durchläuft die aktuelle Objektsammlung. memo ist der letzte Rückgabewert der Funktion. Die Iteration durchläuft die Sammlung.

Dies ist eine Methode von zepto, kein API von jquery.

remove

remove()  ⇒ self

Entfernt die Elemente der aktuellen Sammlung aus ihrem Elternknoten und löscht sie damit aus dem DOM.

removeAttr

removeAttr(name)  ⇒ self

Entfernt das angegebene Attribut von allen Elementen der aktuellen Objektsammlung.

removeClass

removeClass([name])  ⇒ self
removeClass(function(index, oldClassName){ ... })  ⇒ self

Entfernt die angegebene class von allen Elementen der aktuellen Objektsammlung. Ohne den Parameter name werden alle class entfernt. Mehrere class-Namen trennen Sie mit Leerzeichen. Das folgende Beispiel entfernt zwei class.

<input class="taiyang yueliang" id="check1" type="checkbox" checked="checked">
<input class="yaotaiyang" id="check2" type="checkbox">

<script type="text/javascript">
    $("#check1").removeClass("taiyang yueliang")
    //=>[<input class id="check1" type="checkbox" checked="checked">]
</script>

replaceWith

replaceWith(content)  ⇒ self

Ersetzt alle übereinstimmenden Elemente durch den angegebenen Inhalt. Das schließt das Element selbst ein. Der Parameter content akzeptiert die unter before beschriebenen Typen.

scrollLeft v1.1+

scrollLeft()  ⇒ number
scrollLeft(value)  ⇒ self

Liest oder setzt die Anzahl der Pixel, um die das scrollende Element oder das gesamte Fenster nach rechts gescrollt ist.

scrollTop v1.0+

scrollTop()  ⇒ number
scrollTop(value)  ⇒ self v1.1+

Liest oder setzt die Anzahl der Pixel, um die das scrollende Element oder das gesamte Fenster nach unten gescrollt ist.

show

show()  ⇒ self

Stellt den Standardwert von "display" für jedes Element der Objektsammlung wieder her. Wenn Sie ein Element mit hide versteckt haben, zeigen Sie es mit dieser Methode wieder an. Das entspricht dem Entfernen vondisplay：none。

siblings

siblings([selector])  ⇒ collection

Gibt die Geschwisterknoten aller Elemente der Objektsammlung zurück. Mit einem CSS-Selektor als Parameter filtern Sie die Elemente, die dem Selektor entsprechen.

size

size()  ⇒ number

Gibt die Anzahl der Elemente in der Objektsammlung zurück.

slice

slice(start, [end])  ⇒ array

Extrahiert eine Teilmenge dieses Arraysarray, beginnend beistart. Wennendangegeben ist, extrahiert die Methode die Elemente vonstartbisend. Das Element an der Positionendist nicht enthalten.

text

text()  ⇒ string
text(content)  ⇒ self
text(function(index, oldText){ ... })  ⇒ self v1.1.4+

Liest oder setzt den Textinhalt aller Elemente der Objektsammlung. Ohne den Parameter content gibt die Methode den Textinhalt des ersten Elements der Sammlung zurück. Das schließt den Textinhalt der Kindknoten ein. Mit dem Parameter content ersetzt die Methode den Textinhalt aller Elemente der Sammlung. Die Methode ähnelt html. Sie liest und setzt aber kein HTML.

toggle

toggle([setting])  ⇒ self

Zeigt die übereinstimmenden Elemente an oder versteckt sie. Istsettingtrue, entspricht die Methode show. Istsettingfalse, entspricht die Methode hide.

var input = $('input[type=text]')
$('#too_long').toggle(input.val().length > 140)

toggleClass

toggleClass(names, [setting])  ⇒ self
toggleClass(function(index, oldClassNames){ ... }, [setting])  ⇒ self

Fügt jedem Element der übereinstimmenden Sammlung eine oder mehrere Klassen hinzu oder entfernt sie. Existiert der class-Name, wird er entfernt. Existiert er nicht, wird er hinzugefügt. Istsettingtrue, verhält sich die Methode wie addClass. Ist sie false, verhält sie sich wie removeClass.

unwrap

unwrap()  ⇒ self

Entfernt den direkten Elternknoten jedes Elements der Sammlung und behält die Kindelemente an ihrer Position. Die Methode löscht also den übergeordneten Knoten und erhält das aktuelle Element im DOM.

$(document.body).append('<div id=wrapper><p>Content</p></div>')
$('#wrapper p').unwrap().parents()  //=> [<body>, <html>]

val

val()  ⇒ string
val(value)  ⇒ self
val(function(index, oldValue){ ... })  ⇒ self

Liest oder setzt den Wert der passenden Elemente. Ohne den Parameter value gibt die Methode den Wert des ersten Elements zurück. Bei einem<select multiple>Tag gibt die Methode ein Array zurück. Mit dem Parameter value setzt die Methode den Wert aller Elemente.

width

width()  ⇒ number
width(value)  ⇒ self
width(function(index, oldWidth){ ... })  ⇒ self

Liest die Breite des ersten Elements in der Objektsammlung oder setzt die Breite aller Elemente in der Objektsammlung.

$('#foo').width()   // => 123
$(window).width()   // => 768 (viewport width)
$(document).width() // => 768 

wrap

wrap(structure)  ⇒ self
wrap(function(index){ ... })  ⇒ self v1.0+

Umschließt jedes passende Element mit einem HTML-Element. Der Parameter structure kann ein einzelnes Element oder mehrere verschachtelte Elemente sein. Er kann auch ein HTML-String-Fragment oder ein DOM-Knoten sein. Alternativ kann es eine Callback-Funktion sein, die ein Umschließungsfragment der ersten beiden Typen zurückgibt.

Hinweis: Die Methode unterstützt Knoten im DOM gut. Wenn Sie die Methodewrap() auf ein neues Element anwenden und das Ergebnis danach in das Dokument einfügen, ist die Methode wirkungslos.

// wrap each button in a separate span:
$('.buttons a').wrap('<span>')

// wrap each code block in a div and pre:
$('code').wrap('<div class=highlight><pre /></div>')

// wrap all form inputs in a span with classname
// corresponding to input type:
$('input').wrap(function(index){
  return '<span class=' + this.type + 'field />'
})
//=> <span class=textfield><input type=text /></span>,
//   <span class=searchfield><input type=search /></span>

// WARNING: will not work as expected!
$('<em>broken</em>').wrap('<li>').appendTo(document.body)
// do this instead:
$('<em>better</em>').appendTo(document.body).wrap('<li>')

wrapAll

wrapAll(structure)  ⇒ self

Umschließt alle passenden Elemente mit einer einzelnen Struktur. Die Struktur kann ein einzelnes Element oder mehrere verschachtelte Elemente sein. Sie kann als HTML-String oder DOM-Knoten übergeben werden.

// wrap all buttons in a single div:
$('a.button').wrapAll('<div id=buttons />')

wrapInner

wrapInner(structure)  ⇒ self
wrapInner(function(index){ ... })  ⇒ self v1.0+

Umschließt den Inhalt jedes Elements mit einer einzelnen Struktur. Die Struktur kann ein einzelnes Element oder mehrere verschachtelte Elemente sein. Sie kann als HTML-String oder DOM-Knoten übergeben werden. Alternativ kann es eine Callback-Funktion sein, die ein Umschließungsfragment der ersten beiden Typen zurückgibt.

// wrap the contents of each navigation link in a span:
$('nav a').wrapInner('<span>')

// wrap the contents of each list item in a paragraph and emphasis:
$('ol li').wrapInner('<p><em /></p>')

Detect module

Diese Erkennungsmethoden passen Ihre Website oder Anwendung an verschiedene Umgebungen an. Sie helfen, Handys und Tablets sowie verschiedene Browser und Betriebssysteme zu identifizieren.

// The following boolean flags are set to true if they apply,
// if not they're either set to `false` or `undefined`.
// We recommend accessing them with `!!` prefixed to coerce to a boolean. 

// general device type
$.os.phone
$.os.tablet

// specific OS
$.os.ios
$.os.android
$.os.webos
$.os.blackberry
$.os.bb10
$.os.rimtabletos

// specific device type
$.os.iphone
$.os.ipad
$.os.ipod // [v1.1]
$.os.touchpad
$.os.kindle

// specific browser
$.browser.chrome
$.browser.firefox
$.browser.safari // [v1.1]
$.browser.webview // (iOS) [v1.1]
$.browser.silk
$.browser.playbook
$.browser.ie // [v1.1]

// 此外，版本信息是可用的。
// 下面是运行​​iOS 6.1的iPhone所返回的。
!!$.os.phone         // => true
!!$.os.iphone        // => true
!!$.os.ios           // => true
$.os.version       // => "6.1"
$.browser.version  // => "536.26"

$.Event

$.Event(type, [properties])  ⇒ event

Erstellt und initialisiert ein angegebenes DOM-Ereignis. Mit einem properties-Objekt erweitert die Methode das neue Ereignisobjekt. Standardmäßig bubbelt das Ereignis. Das lässt sich durch Setzen vonbubbles为falsedeaktivieren.

Eine initialisierte Ereignisfunktion lässt sich mit trigger auslösen.

$.Event('mylib:change', { bubbles: false })

$.proxy v1.0+

$.proxy(fn, context)  ⇒ function
$.proxy(fn, context, [additionalArguments...])  ⇒ function v1.1.4+
$.proxy(context, property)  ⇒ function
$.proxy(context, property, [additionalArguments...])  ⇒ function v1.1.4+

Nimmt eine Funktion entgegen und gibt eine neue Funktion zurück. Die neue Funktion behält stets einen bestimmten Kontext (context). In der neuen Funktionthisverweist der Kontext auf den Parameter context. In einer anderen Form liest die Methode die ursprüngliche function aus einer bestimmten Eigenschaft des Kontextobjekts (context).

Bei mehr als 2 zusätzlichen Parametern übergibt die Methode diese an die Funktion des Parameters fn.

var obj = {name: 'Zepto'},
    handler = function(){ console.log("hello from + ", this.name) }

// ensures that the handler will be executed in the context of `obj`:
$(document).on('click', $.proxy(handler, obj))

bind 🐶🔫

Nicht empfohlen. Verwenden Sie stattdessen on.

bind(type, function(e){ ... })  ⇒ self
bind(type, [data], function(e){ ... })  ⇒ self v1.1+
bind({ type: handler, type2: handler2, ... })  ⇒ self
bind({ type: handler, type2: handler2, ... }, [data])  ⇒ self v1.1+

Bindet einen Ereignishandler an ein Element.

delegate 🐶🔫

Nicht empfohlen. Verwenden Sie stattdessen on.

delegate(selector, type, function(e){ ... })  ⇒ self
delegate(selector, { type: handler, type2: handler2, ... })  ⇒ self

Fügt auf Basis bestimmter Wurzelelemente allen per Selektor passenden Elementen einen Ereignishandler hinzu. Die passenden Elemente können jetzt oder erst später erstellt werden.

die 🐶🔫

Nicht empfohlen. Verwenden Sie stattdessen on.

die(type, function(e){ ... })  ⇒ self
die({ type: handler, type2: handler2, ... })  ⇒ self

Entfernt Ereignisse, die mit live hinzugefügt wurden.

event.isDefaultPrevented v1.1+

event.isDefaultPrevented()  ⇒ boolean

如果preventDefault()von der Instanz dieses Ereignisses aufgerufen wurde, gibt die Methode true zurück. Dies dient als plattformübergreifender Ersatz für das native defaultPreventedAttribut, falls defaultPreventedes fehlt oder in manchen Browsern unzuverlässig ist.

// trigger a custom event and check whether it was cancelled
var event = $.Event('custom')
element.trigger(event)
event.isDefaultPrevented()

event.isImmediatePropagationStopped v1.1+

event.isImmediatePropagationStopped()  ⇒ boolean

如果stopImmediatePropagation()die Methode mit dieser Ereignisinstanz aufgerufen wird, gibt sie true zurück. Zepto implementiert sie für Browser ohne native Unterstützung, zum Beispiel ältere Android-Versionen.

event.isPropagationStopped v1.1+

event.isPropagationStopped()  ⇒ boolean

如果stopPropagation()die Methode mit dieser Ereignisinstanz aufgerufen wird, gibt sie true zurück.

live 🐶🔫

Veraltet. Verwenden Sie stattdessen on.

live(type, function(e){ ... })  ⇒ self
live({ type: handler, type2: handler2, ... })  ⇒ self

Ähnlich wie delegate fügt die Methode einen Ereignishandler zu allen Elementen hinzu, die dem aktuellen Selektor entsprechen. Die Elemente können jetzt oder erst später erstellt werden.

off

off(type, [selector], function(e){ ... })  ⇒ self
off({ type: handler, type2: handler2, ... }, [selector])  ⇒ self
off(type, [selector])  ⇒ self
off()  ⇒ self

Die Methode entfernt Ereignisse, die mit on hinzugefügt wurden. Um einen bestimmten Ereignishandler zu entfernen, müssen Sieon()dieselbe Funktion übergeben, die beim Hinzufügen verwendet wurde. Andernfalls entfernt ein Aufruf nur mit dem Ereignistyp alle Handler dieses Typs. Ohne Argumente werden alle registrierten Ereignisse des aktuellen Elements entfernt.

on

on(type, [selector], function(e){ ... })  ⇒ self
on(type, [selector], [data], function(e){ ... })  ⇒ self v1.1+
on({ type: handler, type2: handler2, ... }, [selector])  ⇒ self
on({ type: handler, type2: handler2, ... }, [selector], [data])  ⇒ self v1.1+

Die Methode fügt Ereignishandler zu den Elementen der Objektsammlung hinzu. Mehrere Ereignisse können durch eine leerzeichengetrennte Zeichenkette oder durch ein Objekt mit Ereignistyp als Schlüssel und Funktion als Wert hinzugefügt werden. Bei Angabe eines CSS-Selektors wird das Ereignis nur ausgelöst, wenn es von einem Element ausgeht, das diesem Selektor entspricht (Hinweis: Ereignisdelegation).

Wenn derdataParameter angegeben ist, wird dieser Wert während der Ausführung des Ereignishandlers als nützliches event.data 属性

Der Event-Handler wird im Kontext des Elements ausgeführt, dem er hinzugefügt wurde. Bei einem angegebenen Selektor wird der Kontext des Elements verwendet, das dem Selektor entspricht. (Anmerkung: `this` verweist auf das Element, das das Ereignis ausgelöst hat.) Wenn ein Event-Handler zurückgibtfalse，preventDefault() 和 stopPropagation()wurden für das aktuelle Ereignis aufgerufen, dann verhindert dies die Standardaktion des Browsers, zum Beispiel bei Links.

Wennfalse anstelle einer Callback-Funktion als Argument an diese Methode übergeben wird, entspricht dies einer Funktion, die direktfalsezurückgibt. (Hinweis: Dabei wird false als Argument von function(e){ ... } verwendet, als Kurzform von function(){ return false; } zum Beispiel: $("a.disabled").on("click", false);Dies entspricht$("a.disabled").on("click", function(){ return false; } );)

var elem = $('#content')
// observe all clicks inside #content:
elem.on('click', function(e){ ... })
// observe clicks inside navigation links in #content
elem.on('click', 'nav a', function(e){ ... })
// all clicks inside links in the document
$(document).on('click', 'a', function(e){ ... })
// disable following any navigation link on the page
$(document).on('click', 'nav a', false)

one

one(type, [selector], function(e){ ... })  ⇒ self
one(type, [selector], [data], function(e){ ... })  ⇒ self v1.1+
one({ type: handler, type2: handler2, ... }, [selector])  ⇒ self
one({ type: handler, type2: handler2, ... }, [selector], [data])  ⇒ self v1.1+

Die Methode fügt einen Ereignishandler zu einem Element hinzu. Nach der ersten Ausführung wird das Ereignis automatisch entkoppelt. Dadurch läuft die Handlerfunktion pro Element höchstens einmal.selector 和 dataund weiteren Parametern finden Sie unter.on()。

trigger

trigger(event, [args])  ⇒ self

Die Methode löst ein bestimmtes Ereignis auf den Elementen der Objektsammlung aus. Das Ereignis kann eine Zeichenkette oder ein mit $.Event definiertes Ereignisobjekt sein. Bei Angabe des args-Parameters wird er als Argument an die Ereignisfunktion übergeben.

// add a handler for a custom event
$(document).on('mylib:change', function(e, from, to){
  console.log('change on %o with data %s, %s', e.target, from, to)
})
// trigger the custom event
$(document.body).trigger('mylib:change', ['one', 'two'])

Zepto unterstützt das Auslösen von Ereignissen nur auf DOM-Elementen.

triggerHandler

triggerHandler(event, [args])  ⇒ self

Wie trigger löst die Methode das Ereignis nur auf dem aktuellen Element aus, aber ohne Bubbling.

        $("input").triggerHandler('focus');
        // 此时input上的focus事件触发，但是input不会获取焦点
        $("input").trigger('focus');
        // 此时input上的focus事件触发，input获取焦点

unbind 🐶🔫

Deprecated, use off instead.

unbind(type, function(e){ ... })  ⇒ self
unbind({ type: handler, type2: handler2, ... })  ⇒ self

Entfernt Ereignisse, die über bind registriert wurden.

undelegate 🐶🔫

Deprecated, use off instead.

undelegate(selector, type, function(e){ ... })  ⇒ self
undelegate(selector, { type: handler, type2: handler2, ... })  ⇒ self

Entfernt Ereignisse, die über delegate registriert wurden.

$.ajax

$.ajax(options)  ⇒ XMLHttpRequest

Führt eine Ajax-Anfrage aus. Die Ressource kann lokal sein. Cross-Domain funktioniert über HTTP access control oder über JSONP.

Optionen:

• type(Standard: "GET")：Die Anfragemethode ("GET", "POST" oder andere)
• url (Standard: aktuelle Adresse)：Die Adresse, an die die Anfrage gesendet wird
• data(Standard: none)：Die Daten, die an den Server gesendet werden. Bei GET-Anfragen werden sie automatisch als Parameter an die URL angehängt. Nicht-String-Objekte werden über $.param serialisiert.
• processData (Standard: true)：Bei Nicht-GET-Anfragen. Gibt an, ob data automatisch in einen String umgewandelt wird.
• contentType (Standard: "application/x-www-form-urlencoded")：Der Content-Type beim Senden an den Server. (Dies lässt sich auch über headerseinstellen.) Durch Setzen von false wird der Standardwert übersprungen.
• mimeType(Standard: none): Überschreibt den MIME-Typ der Antwort. v1.1+
• dataType (Standard: none)：Der erwartete Datentyp der Serverantwort ("json", "jsonp", "xml", "html" oder "text")
• jsonp (Standard: "callback"): Der Name des JSONP-Callback-Abfrageparameters
• jsonpCallback(Standard: "jsonp{N}"): Der Name der globalen JSONP-Callback-Funktion als String (oder eine Funktion, die einen zurückgibt). Diese Einstellung aktiviert den Browser-Cache. v1.1+
• timeout (默认： 0): Das Timeout der Anfrage in Millisekunden, 0 bedeutet kein Timeout.
• headers: Ein Objekt mit zusätzlichen HTTP-Headern für die Ajax-Anfrage
• async (Standard: true): Standardmäßig laufen alle Anfragen asynchron. Für eine synchrone Anfrage setzen Sie diesen Wert auf false。
• global (Standard: true): Die Anfrage löst globale Ajax-Ereignishandler aus. Bei false werden keine globalen Ajax-Ereignisse ausgelöst.
• context (Standard: window): Dieses Objekt legt den Kontext der Ajax-Callbacks fest (this zeigt darauf).
• traditional(Standard: false): Aktiviert die traditionelle Serialisierung über $.param fürdata。
• cache(Standard: true): Legt fest, ob der Browser GET-Antworten cachen darf. Ab v1.1.4 gilt bei dataType "script" oder jsonpstandardmäßigfalse。
• xhrFields(Standard: none): Ein Objekt, dessen Eigenschaften wörtlich in die XMLHttpRequest-Instanz kopiert werden. v1.1+
• username & password(Standard: none): Zugangsdaten für die HTTP-Basisauthentifizierung. v1.1+

Wenn die URL=?或者dataType"jsonp" ist, wird die Anfrage durch Injektion eines <script>Tags statt XMLHttpRequest zu verwenden (siehe JSONP). In diesem FallcontentType, dataType, headersEs gibt Einschränkungen.async 不被支持。

Ajax-Callback-Funktion

Sie können die folgenden Callback-Funktionen angeben. Sie werden in der angegebenen Reihenfolge ausgeführt.

1. beforeSend(xhr, settings)Wird vor dem Senden der Anfrage aufgerufen. Es erhält das xhr-Objekt und settings als Parameterobjekte. Wenn es zurückgibt false wird die Anfrage abgebrochen.

2. success(data, status, xhr)Wird nach einer erfolgreichen Anfrage aufgerufen. Übergibt die zurückgegebenen Daten und einen String mit dem Erfolgscode.

3. error(xhr, errorType, error)Wird bei Anforderungsfehlern aufgerufen (Timeout, Parsefehler oder Statuscode außerhalb von HTTP 2xx).

4. complete(xhr, status)Wird aufgerufen, wenn die Anfrage abgeschlossen ist, unabhängig davon, ob sie erfolgreich war oder fehlgeschlagen ist.

Promise-Callback-Schnittstelle v1.1+

Wenn die optionalen Module „callbacks" und „deferred" geladen sind, von$.ajax()Das zurückgegebene XHR-Objekt implementiert das Promise-Interface für verkettete Callbacks.

xhr.done(function(data, status, xhr){ ... })
xhr.fail(function(xhr, errorType, error){ ... })
xhr.always(function(){ ... })
xhr.then(function(){ ... })

Diese Methoden ersetzen sie.success, error, 和 complete Rückruf-Option.

Ajax-Ereignisse

Wennglobal: trueWährend des Lebenszyklus einer Ajax-Anfrage werden die folgenden Ereignisse ausgelöst.

1. ajaxStart(global): Wird ausgelöst, wenn kein anderer Ajax-Request aktiv ist.

2. ajaxBeforeSend (data: xhr, options): Vor dem Senden der Anfrage abbrechbar.

3. ajaxSend (data: xhr, options): wie ajaxBeforeSend, aber nicht storniert werden.

4. ajaxSuccess (data: xhr, options, data): bei erfolgreicher Rückgabe.

5. ajaxError (data: xhr, options, error): Bei einem Fehler.

6. ajaxComplete (data: xhr, options): Wird aufgerufen, nachdem die Anfrage abgeschlossen ist, unabhängig davon, ob sie erfolgreich war oder fehlgeschlagen ist.

7. ajaxStop(global): Dies wird ausgelöst, wenn dies die letzte aktive Ajax-Anfrage ist.

Standardmäßig werden Ajax-Ereignisse auf dem document-Objekt ausgelöst. Wenn die Anfrage jedoch ...context Es ist ein DOM-Knoten. Das Ereignis wird zuerst an diesem Knoten ausgelöst und steigt dann im DOM auf. Die einzige Ausnahme ist ajaxStart & ajaxStopDiese beiden globalen Ereignisse.

$(document).on('ajaxBeforeSend', function(e, xhr, options){
  // This gets fired for every Ajax request performed on the page.
  // The xhr object and $.ajax() options are available for editing.
  // Return false to cancel this request.
})

$.ajax({
  type: 'GET',
  url: '/projects',
  // data to be added to query string:
  data: { name: 'Zepto.js' },
  // type of data we are expecting in return:
  dataType: 'json',
  timeout: 300,
  context: $('body'),
  success: function(data){
    // Supposing this JSON payload was received:
    //   {"project": {"id": 42, "html": "<div>..." }}
    // append the HTML to context object.
    this.append(data.project.html)
  },
  error: function(xhr, type){
    alert('Ajax error!')
  }
})

// post a JSON payload:
$.ajax({
  type: 'POST',
  url: '/projects',
  // post payload:
  data: JSON.stringify({ name: 'Zepto.js' }),
  contentType: 'application/json'
})

$.ajaxJSONP 🐶🔫

Nicht empfohlen. Verwenden Sie stattdessen $.ajax.

$.ajaxJSONP(options)  ⇒ mock XMLHttpRequest

JSONP-Cross-Domain-Datenabruf ausführen.

Diese Methode bietet gegenüber $.ajax keine Vorteile. Von der Verwendung wird abgeraten.

$.ajaxSettings

Ein Objekt mit den Standardeinstellungen für Ajax-Anfragen. Die meisten Einstellungen sind bereits bei $.ajax beschrieben. Die folgenden Einstellungen sind global besonders nützlich:

• timeout (默认： 0): Setzt einen nicht nullwertigen Standard-Timeout für Ajax-Anfragen. Die Angabe erfolgt in Millisekunden.
• global (Standard: true): Setzen Sie den Wert auf false. Dadurch werden keine Ajax-Ereignisse ausgelöst.
• xhr (Standard: XMLHttpRequest factory): Setzt eine Funktion, die eine XMLHttpRequest-Instanz zurückgibt (oder ein kompatibles Objekt).
• accepts: Gibt den MIME-Typ der Serveranfrage an.dataTypeWerte: script: "text/javascript, application/javascript"
  • json: "application/json"
  • xml: "application/xml, text/xml"
  • html: "text/html"
  • text: "text/plain"

$.get

$.get(url, function(data, status, xhr){ ... })  ⇒ XMLHttpRequest
$.get(url, [data], [function(data, status, xhr){ ... }], [dataType])  ⇒ XMLHttpRequest v1.0+

Führt eine Ajax-GET-Anfrage aus. Dies ist eine Kurzform von $.ajax.

$.get('/whatevs.html', function(response){
  $(document.body).append(response)
})

$.getJSON

$.getJSON(url, function(data, status, xhr){ ... })  ⇒ XMLHttpRequest
$.getJSON(url, [data], function(data, status, xhr){ ... })  ⇒ XMLHttpRequest v1.0+

Ruft JSON-Daten über eine Ajax-GET-Anfrage ab. Dies ist eine Kurzform von $.ajax.

$.getJSON('/awesome.json', function(data){
  console.log(data)
})

// fetch data from another domain with JSONP
$.getJSON('//example.com/awesome.json?callback=?', function(remoteData){
  console.log(remoteData)
})

$.param

$.param(object, [shallow])  ⇒ string
$.param(array)  ⇒ string

Serialisiert ein Objekt. Die übermittelten Daten in Ajax-Anfragen verwenden die URL-kodierte Abfragezeichenfolgen-Form. Wenn shallow auf true gesetzt ist, werden verschachtelte Objekte nicht serialisiert. Die Werte verschachtelter Arrays erhalten keine eckigen Klammern in ihrem Schlüssel.

Wenn der Wert einer Eigenschaft eines Objekts eine Funktion statt einer Zeichenkette ist, wird die Funktion aufgerufen. Erst ihr Rückgabewert wird serialisiert.

Darüber hinaus akzeptiert die Methode Arrays im serializeArray-Format. Jedes Element enthält die Attribute "name" und "value".

$.param({ foo: { one: 1, two: 2 }})
//=> "foo[one]=1&foo[two]=2)"

$.param({ ids: [1,2,3] })
//=> "ids[]=1&ids[]=2&ids[]=3"

$.param({ ids: [1,2,3] }, true)
//=> "ids=1&ids=2&ids=3"

$.param({ foo: 'bar', nested: { will: 'not be ignored' }})
//=> "foo=bar&nested[will]=not+be+ignored"

$.param({ foo: 'bar', nested: { will: 'be ignored' }}, true)
//=> "foo=bar&nested=[object+Object]"

$.param({ id: function(){ return 1 + 2 } })
//=> "id=3"

$.post

$.post(url, [data], function(data, status, xhr){ ... }, [dataType])  ⇒ XMLHttpRequest

Führt eine Ajax-POST-Anfrage aus. Dies ist eine Kurzform von $.ajax.

$.post('/create', { sample: 'payload' }, function(response){
  // process response
})

data Der Parameter kann eine Zeichenkette sein:

$.post('/create', $('#some_form').serialize(), function(response){
  // ...
})

load

load(url, function(data, status, xhr){ ... })  ⇒ self

Lädt entfernten HTML-Inhalt über eine GET-Ajax-Anfrage und fügt ihn in die aktuelle Sammlung ein. Zusätzlich können Sie einen CSS-Selektor in der URL angeben. Die Sammlung wird dann mit dem HTML-Inhalt aktualisiert, der dem Selektor entspricht.

$('#some_element').load('/foo.html #bar')

Ohne CSS-Selektor wird der vollständige zurückgegebene Text verwendet.

Beachten Sie: Ohne Selektor werden alle JavaScript-Blöcke ausgeführt. Mit Selektor werden script-Tags innerhalb des übereinstimmenden Bereichs entfernt.

serialize

serialize()  ⇒ string

Kompiliert die Werte der Formularelemente für einen Ajax-POST-Request zu einer URL-kodierten Zeichenkette.

serializeArray

serializeArray()  ⇒ array

Kompiliert die Werte der Formularelemente zu einem Array ausname和valueObjekten. Deaktivierte Formularelemente, buttons sowie nicht ausgewählte radio buttons und checkboxs werden übersprungen. Das Ergebnis enthält keine Daten von file inputs.

$('form').serializeArray()
//=> [{ name: 'size', value: 'micro' },
//    { name: 'name', value: 'Zepto' }]

submit

submit()  ⇒ self
submit(function(e){ ... })  ⇒ self

为 "submit" 事件绑定一个处理函数，或者触发元素上的 "submit" 事件。当没有给定function参数时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非调用了 preventDefault()。

Wird ein function-Parameter übergeben, bindet die Methode auf dem aktuellen Element einen Handler für das „submit“-Event.

$.fx

Globale Animationseinstellungen:

• $.fx.off(Standard ist false in Browsern mit CSS-Transition-Unterstützung): Setzen Sie den Wert auf true, um alle zu deaktivierenanimate()transitions.

• $.fx.speeds：Das Objekt zum Festlegen der Animationsdauer.

  • _default (400 ms)
  • fast (200 ms)
  • slow (600 ms)

Ändern Sie einen bestehenden Wert oder fügen Sie ein neues Attribut hinzu. Die Animation verwendet einen String zur Zeitangabe.

animate

animate(properties, [duration, [easing, [function(){ ... }]]])  ⇒ self
      animate(properties, { duration: msec, easing: type, complete: fn })  ⇒ self
      animate(animationName, { ... })  ⇒ self
  

Führt einen sanften Übergang der css transition-Eigenschaft für die Elemente der aktuellen Objektsammlung aus.

• properties: Ein Objekt mit den Werten der CSS-Animation oder dem Namen einer CSS-Frame-Animation.
• duration(Standard 400)：Die Zeit in Millisekunden oder ein String.
  • fast (200 ms)
  • slow (600 ms)
  • Beliebige$.fx.speedsBenutzerdefinierte Attribute
• easing (Standard linear)：Gibt den Easing-Typ der Animation an. Verwenden Sie einen der folgenden Werte：
  • ease
  • linear
  • ease-in / ease-out
  • ease-in-out
  • cubic-bezier(...)
• complete：Die Callback-Funktion nach Abschluss der Animation
li>delay: Die Verzögerung des Übergangs in Millisekunden v1.1+

Zepto unterstützt außerdem folgende CSS transform-Attribute：

• translate(X|Y|Z|3d)
• rotate(X|Y|Z|3d)
• scale(X|Y|Z)
• matrix(3d)
• perspective
• skew(X|Y)

Wenn der duration-Parameter0 oder $.fx.off true ist (in Browsern ohne CSS-Transitions-Unterstützung standardmäßig true)，wird die Animation nicht ausgeführt. Die Zielposition wird sofort wirksam. Ebenso wird die Zielposition sofort wirksam，wenn die Animation nicht regulär abgeschlossen wird. In diesem Fall gibt es keine Animation， completeund die Methode wird nicht aufgerufen.

Wenn der erste Parameter ein String statt eines Objekts ist，wird er als Name einer CSS keyframe animation behandelt.

$("#some_element").animate({
        opacity: 0.25,
        left:
        '50px',
        color:
        '#abcdef',
        rotateZ:
        '45deg',
        translate3d: '0,10px,0'
        }, 500,
        'ease-out')
    

Zepto nutzt nur CSS-Transitions für Animationen. Die jquery-Easings werden nicht unterstützt. Die relative jquery-Syntax ("=+10px") wird ebenfalls nicht unterstützt. Sehen Sie sich die list of animatable properties an. Die Browser-Unterstützung variiert. Testen Sie daher alle Browser，die Sie unterstützen möchten.

Touch events

Das Modul „touch" fügt folgende Ereignisse hinzu. Verwenden Sie on und off.

• tap —Wird ausgelöst，wenn das Element getippt wird.
• singleTap and doubleTap —Dieses Ereignispaar erkennt Einzel- und Doppelklicks auf einem Element. (Wenn Sie keine Erkennung von Einzel- und Doppelklick benötigen，verwenden Sie tap Neu unterstützte
• longTap —Wird ausgelöst，wenn ein Element länger als 750 ms gedrückt gehalten wird.
• swipe, swipeLeft, swipeRight, swipeUp, swipeDown —Wird ausgelöst，wenn das Element gewischt wird. (Optional in einer bestimmten Richtung)

Diese Ereignisse sind auch Shortcut-Methoden auf allen Zepto-Objektsammlungen.

<style>.delete { display: none; }</style>

<ul id=items>
  <li>List item 1 <span class=delete>DELETE</span></li>
  <li>List item 2 <span class=delete>DELETE</span></li>
</ul>

<script>
// show delete buttons on swipe
$('#items li').swipe(function(){
  $('.delete').hide()
  $('.delete', this).show()
})

// delete row on tapping delete button
$('.delete').tap(function(){
  $(this).parent('li').remove()
})
</script>