Méthodes principales

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

$()

Crée un objet collection Zepto en exécutant un sélecteur CSS, en enveloppant des nœuds DOM, ou en créant plusieurs éléments à partir d'une chaîne HTML.ZeptoUne collection Zepto est un objet semblable à un tableau. Elle possède des méthodes chaînées pour manipuler les nœuds DOM qu'elle pointe.$.extendHormis les méthodes directes sur l'objet $(

) (comme$(context).find(selector)), toutes les méthodes du document sont des méthodes de collection.

Si un paramètre content existe dans le sélecteur (sélecteur CSS, DOM, ou objet collection Zepto), la sélection CSS se fait uniquement dans le contexte des nœuds donnés. Cette fonctionnalité est identique à<div> ou <div/>形式。

ouDOMContentLoaded .

$('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!')
})

Lorsqu'une fonction est attachée au flux de traitement de l'événement

, si la page est déjà chargée, cette méthode s'exécute immédiatement.$变量尚未定义，Zepto只设置了全局变量$Si la variable $ n'est pas encore définie, Zepto définit uniquement la variable globaleZeptopour pointer vers elle-même. Cela permet d'utiliser Zepto en même temps que du code existant utile, par exemple prototype.js.

Tant que Prototype est chargé en premier, Zepto n'écrase pas la fonction

$.camelCase(string)  ⇒ string

de Prototype. Zepto définit toujours la variable globale

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

pour pointer vers elle-même.

$.contains(parent, node)  ⇒ boolean

$.camelCase v1.0+false。

$.contains v1.0+

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

Vérifie si le nœud parent contient le nœud DOM donné. Si les deux sont le même nœud, renvoiefalse .

$.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)
})

$.each

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

Parcourt les éléments d'un tableau ou parcourt un objet par paires clé-valeur. Le parcours s'arrête lorsque la fonction de rappel renvoie

.

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

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

$.extend

Zepto.fnÉtend les propriétés de l'objet cible à partir de l'objet source. Les propriétés de l'objet source écrasent celles de l'objet cible.addClass()Par défaut, la copie est superficielle. Si le premier argument est true, la copie est profonde.attr()$.fn

Voici un exemple qui implémente laempty()méthode de Zepto :

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

$.grep v1.0+

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

Renvoie un nouveau tableau qui contient uniquement les éléments pour lesquels la fonction de rappel retourne true.

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

$.inArray v1.0+

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

Renvoie l'index de l'élément spécifié dans le tableau (index de base 0). Si l'élément n'est pas trouvé, elle renvoie-1。

Remarque :[fromIndex] Le paramètre est optionnel. Il indique l'index à partir duquel la recherche commence vers l'arrière.

$.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

Renvoie true si object est un tableau.

$.isFunction

$.isFunction(object)  ⇒ boolean

Renvoie true si object est une fonction.

$.isPlainObject v1.0+

$.isPlainObject(object)  ⇒ boolean

Teste si un objet est un objet « pur », c'est-à-dire créé via une littérale d'objet ("{}") ounew Object . Renvoie true si c'est le cas.

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

$.isWindow v1.0+

$.isWindow(object)  ⇒ boolean

Renvoie true si le paramètre object est un objet window. C'est utile avec les iframes, car chaque iframe possède son propre objet window. La vérification classiqueobj === windowde ces objets échoue alors.

$.map

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

Parcourt les éléments de la collection et renvoie un nouveau tableau avec tous les résultats de la fonction d'itération.null 和 undefined seront filtrés.

$.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 de la méthode nativeJSON.parse. (Remarque : elle accepte une chaîne JSON au format standard et renvoie l'objet JavaScript analysé.)

$.trim v1.0+

$.trim(string)  ⇒ string

Supprime les espaces au début et à la fin d'une chaîne. Semblable à String.prototype.trim().

$.type v1.0+

$.type(object)  ⇒ string

Renvoie le type d'un objet JavaScript. Les types possibles sont :null undefined boolean number string function array date regexp object error。

Pour les autres objets, il est simplement signalé comme « object ». Pour savoir si un objet est un objet JavaScript standard, utilisez isPlainObject.

add

add(selector, [context])  ⇒ self

Ajoute des éléments à la collection d'éléments actuellement sélectionnés. Si le paramètre content est fourni, la recherche se fait uniquement dans ces éléments, sinon dans tout le 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

Ajoute la ou les classes spécifiées à chaque élément sélectionné. Séparez plusieurs noms de classes par des espaces.

after

after(content)  ⇒ self

Insère du contenu après chaque élément sélectionné (insertion externe). Le contenu peut être une chaîne HTML, un nœud DOM ou un tableau de nœuds.

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

append

append(content)  ⇒ self

Insère du contenu à la fin de chaque élément sélectionné (insertion interne). Le contenu peut être une chaîne HTML, un nœud DOM ou un tableau de nœuds.

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

appendTo

appendTo(target)  ⇒ self

Insère les éléments correspondants à la fin de l'élément cible (insertion interne). Cela ressemble un peu à append, mais la cible d'insertion est inversée.

$('<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

Lit ou définit les attributs du dom. Si le paramètre value n'est pas fourni, la méthode lit la valeur de l'attribut du premier élément de la collection. Si le paramètre value est fourni, elle définit la valeur de cet attribut pour tous les éléments de la collection. Si le paramètre value vautnull, l'attribut est supprimé (comme removeAttr). Plusieurs attributs se définissent via des paires clé-valeur d'un objet.

Pour lire les propriétés du DOM commechecked和selected, utilisez 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

Insère du contenu avant chaque élément correspondant (insertion externe). Le contenu peut être une chaîne html, un nœud dom ou un tableau de nœuds.

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

children

children([selector])  ⇒ collection

Récupère les enfants directs de chaque élément de la collection correspondante. Si un selector est fourni, le résultat ne contient que les éléments correspondant au sélecteur css.

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

clone v1.0+

clone()  ⇒ collection

Copie tous les éléments de la collection par clonage profond.

Cette méthode ne copie ni les données ni les gestionnaires d'événements vers les nouveaux éléments. Elle diffère de jquery, où un paramètre détermine si les données et les gestionnaires d'événements sont copiés.

closest

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

Part de l'élément lui-même et remonte de niveau en niveau dans les éléments parents. La méthode retourne le premier élément qui correspond au selector. Si un nœud context est fourni, seuls les descendants de ce nœud correspondent. Cette méthode ressemble àparents(selector)mais elle retourne uniquement le premier élément ancêtre correspondant.

Si le paramètre est une collection d'objets Zepto ou un élément, le résultat doit correspondre à l'élément donné et non à un sélecteur.

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

concat

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

Ajoute des éléments à une collection d'objets Zepto pour former un nouveau tableau. Si le paramètre est un tableau, ses éléments sont fusionnés dans la collection d'objets Zepto.

C'est une méthode fournie par Zepto, pas une API de jquey.

contents v1.0+

contents()  ⇒ collection

Récupère les enfants de chaque élément de la collection correspondante, y compris les nœuds de texte et de commentaires. (La méthode .contents() ressemble à .children(), mais elle inclut aussi les nœuds de texte et les éléments HTML créés dans l'objet jQuery.)

css

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

Lit ou définit les propriétés css des éléments du DOM. Quand le paramètre value est absent, la méthode retourne la propriété css du premier élément de la collection. Quand le paramètre value est présent, elle définit la propriété css correspondante pour chaque élément de la collection.

Plusieurs propriétés se lisent en une fois en passant un tableau de noms de propriétés. Plusieurs propriétés se définissent via des paires clé-valeur d'un objet.

Quand value est vide (chaîne vide,null ou undefined), la propriété css est supprimée. Quand le paramètre value est un nombre sans unité, "px" est ajouté automatiquement si la propriété css en nécessite une.

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

Lit ou écrit l'attributdata-*du dom. Le comportement ressemble à attr, mais le nom de l'attribut est précédé dedata-。

Lors de la lecture d'une valeur d'attribut, les conversions suivantes s'appliquent : v1.0+

• "true", "false" et "null" sont convertis en leurs types correspondants ;
• Les valeurs numériques sont converties en type nombre réel ;
• Les valeurs JSON sont analysées si elles constituent un JSON valide ;
• Tout le reste est retourné comme chaîne. L'implémentation de base de `data()` par Zepto ne stocke que des chaînes. Pour stocker des objets quelconques, incluez le module optionnel "data" dans votre build de Zepto.

each

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

Parcourt chaque élément d'une collection d'objets. Dans la fonction d'itération,thisle mot-clé pointe vers l'élément courant (passé comme deuxième argument de la fonction). Si la fonction d'itération retourne false, le parcours s'arrête.

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

empty

empty()  ⇒ self

Vide le contenu DOM de chaque élément de la collection d'objets.

eq

eq(index)  ⇒ collection

Récupère l'élément de la collection courante à l'index donné (base 0).

$('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+

Filtre la collection d'objets et retourne les éléments correspondant au sélecteur CSS. Si l'argument est une fonction, l'élément n'est retourné que si la fonction retourne une valeur réelle. Dans la fonction,this le mot-clé pointe vers l'élément courant.

Pour la fonction inverse, voir not .

find

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

Cherche dans la collection courante les éléments descendants correspondant au sélecteur CSS de chaque élément.

Si une collection d'objets Zepto ou des éléments sont donnés, ils sont filtrés et ne sont retournés que s'ils appartiennent à la collection Zepto courante.

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

first

first()  ⇒ collection

Récupère le premier élément de la collection courante.

$('form').first()

forEach

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

Parcourt chaque élément de la collection d'objets, un peu comme each, mais avec des paramètres différents pour la fonction d'itération. Quand la fonction retournefalse , le parcours ne s'arrête pas.

C'est une méthode fournie par Zepto, pas une API de jQuery.

get

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

Récupère tous les éléments ou un seul élément de la collection courante. Quand le paramètre index est absent, tous les éléments sont retournés sous forme de tableau ordinaire. Quand index est spécifié, seul l'élément à cette position est retourné. Contrairement à eq, cette méthode retourne un nœud DOM, pas une collection d'objets Zepto.

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

Vérifie si les éléments enfants de la collection courante correspondent au sélecteur ou contiennent le nœud DOM spécifié. Si oui, retourne une nouvelle collection filtrée qui exclut les objets sans élément correspondant au sélecteur ou sans le nœud DOM spécifié.

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

hasClass

hasClass(name)  ⇒ boolean

Vérifie si un élément de la collection possède la classe spécifiée.

<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

Récupère la hauteur du premier élément de la collection, ou définit la hauteur de tous les éléments de la collection.

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

hide

hide()  ⇒ self

Masque les éléments de cette collection en définissant leurdisplay propriété CSS sur none.

Masque les éléments de la collection d'objets en définissant la propriété CSSdisplay 为 none.

html

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

Récupère ou définit le contenu HTML des éléments de la collection. Sans le paramètre content, retourne l'innerHtml du premier élément de la collection. Avec le paramètre content, remplace le contenu de chaque élément de la collection. content accepte tous les types décrits dans append.

// 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

Récupère l'index d'un élément (à partir de 0). Sans le paramètre element, retourne la position de l'élément courant parmi ses frères. Avec le paramètre element, retourne sa position dans la collection courante. Si l'élément n'est pas trouvé, retourne-1。

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

indexOf

indexOf(element, [fromIndex])  ⇒ number

Récupère la position d'un élément dans la collection courante. Si un nombre fromIndex est fourni, la recherche part uniquement de cette position. Renvoie la position à partir de 0 si l'élément est trouvé, et-1sinon. Utilisez plutôt la méthode index.

Récupère l'index d'un élément dans la collection d'objets courante (note : comptage à partir de 0). Si le paramètre formindex est fourni, la recherche part de cette position. Renvoie un index à partir de 0 si l'élément est trouvé, et renvoie-1sinon. La méthode index est implémentée à partir de cette méthode.

C'est une méthode de Zepto, pas une API de jQuery.

insertAfter

insertAfter(target)  ⇒ self

Insère les éléments de la collection après l'élément cible spécifié (note : insertion externe). Cela ressemble un peu à after, mais l'utilisation est inversée.

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

insertBefore

insertBefore(target)  ⇒ self

Insère les éléments de la collection avant l'élément cible spécifié (note : insertion externe). Cela ressemble un peu à before, mais l'utilisation est inversée.

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

is

is(selector)  ⇒ boolean

Vérifie si le premier élément de la collection courante correspond au sélecteur CSS. La prise en charge de base inclut les sélecteurs non standard de type jQuery, comme ::visibleInclus dans le module optionnel « selector ».

Les extensions CSS de jQuery ne sont pas prises en charge. Le module « selector » ne prend en charge que quelques formes les plus courantes.

last

last()  ⇒ collection

Récupère le dernier élément de la collection d'objets.

$('li').last()

map

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

Parcourt tous les éléments de la collection d'objets. Forme une nouvelle collection d'objets à partir des valeurs renvoyées par la fonction de parcours. Dans la fonction de parcours,thisle mot-clé this pointe vers l'élément de l'itération courante (deuxième paramètre de la fonction de parcours).

Si le parcours renvoienull和undefined, le parcours s'arrête.

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

next

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

Récupère le sibling suivant de chaque élément de la collection, avec un filtrage optionnel par sélecteur.

Récupère le nœud frère suivant de chaque élément de la collection d'objets (avec un sélecteur de filtrage optionnel).

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

not

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

Filtre la collection d'objets courante et obtient une nouvelle collection dont les éléments ne correspondent pas au sélecteur CSS. Si un autre paramètre est une collection d'objets Zepto, les éléments de la nouvelle collection Zepto renvoyée ne sont pas inclus dans cet objet paramètre. Si le paramètre est une fonction, seuls les éléments pour lesquels la fonction renvoie false sont inclus. Le mot-cléthis this de la fonction pointe vers l'élément de l'itération courante.

Pour la fonctionnalité inverse, voir filter.

offset

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

Récupère la position de l'élément courant par rapport au document. Renvoie un objet contenant :top, left, width和height

Lorsqu'un objet contenant les propriétésleft和topest fourni, ces valeurs servent à positionner chaque élément de la collection par rapport au document.

offsetParent v1.0+

offsetParent()  ⇒ collection

Trouve le premier élément ancêtre positionné, c'est-à-dire dont la propriété CSSposition vaut « relative », « absolute » ou « fixed ».

parent

parent([selector])  ⇒ collection

Récupère l'élément parent direct de chaque élément de la collection. Si un sélecteur CSS est fourni, filtre les éléments correspondants.

parents

parents([selector])  ⇒ collection

Récupère tous les éléments ancêtres de chaque élément de la collection. Si un sélecteur CSS est fourni, filtre les éléments correspondants.

Pour obtenir le parent direct, utilisez parent. Pour obtenir uniquement le premier élément correspondant au sélecteur CSS, utilisez closest.

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

pluck

pluck(property)  ⇒ array

Récupère la valeur d'une propriété pour chaque élément de la collection. La valeur de retour estnullou undefined. Filtrez les valeurs indésirables.

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

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

C'est une méthode de Zepto, pas une API de jQuery.

position v1.0+

position()  ⇒ object

Récupère la position du premier élément de la collection, relative à offsetParent. Cette méthode est utile quand un élément en position absolue est placé près d'un autre élément.

Retourne un objet avec les propriétés :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

Insère le contenu du paramètre au début de chaque élément correspondant (insertion à l'intérieur de l'élément). Le contenu inséré peut être un fragment HTML, un nœud DOM ou un tableau de nœuds.

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

prependTo

prependTo(target)  ⇒ self

Insère tous les éléments au début de la cible (insertion à l'intérieur de l'élément). Cela ressemble à prepend, mais dans le sens inverse.

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

prev

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

Récupère le nœud frère précédent de chaque élément de la collection. Filtrez avec un sélecteur.

prop v1.0+

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

Lit ou définit la valeur d'une propriété d'un élément DOM. Préférez cette méthode à attr pour la lecture, car ces valeurs changent avec les interactions de l'utilisateur, commechecked et selected。

Les noms abrégés ou en minuscules, commefor, class, readonlyet les propriétés similaires, sont mappés vers les propriétés réelles, commehtmlFor, className, readOnly, etc.

push

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

Add elements to the end of the current collection.

Ajoute des éléments à la fin de la collection actuelle.

C'est une méthode de Zepto, pas une API de jQuery.

ready

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

Ajoute un écouteur d'événement déclenché quand l'événement "DOMContentLoaded" se produit, après le chargement du DOM de la page. Utilisez $() à la place de cette syntaxe.

reduce

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

S'utilise comme Array.reduce et parcourt la collection actuelle. memo est la valeur retournée par l'appel précédent de la fonction. L'itération se poursuit ainsi.

C'est une méthode de zepto, pas une API de jquery.

remove

remove()  ⇒ self

Supprime les éléments de la collection courante de leur nœud parent, ce qui les retire effectivement du DOM.

removeAttr

removeAttr(name)  ⇒ self

Supprime l'attribut spécifié de tous les éléments de la collection courante.

removeClass

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

Supprime la classe spécifiée de tous les éléments de la collection courante. Si le paramètre name n'est pas fourni, toutes les classes sont supprimées. Plusieurs noms de classes peuvent être séparés par des espaces. L'exemple suivant supprime deux classes.

<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

Remplace tous les éléments correspondants par le contenu donné (élément lui-même inclus). Le paramètre content peut être du type décrit dans before.

scrollLeft v1.1+

scrollLeft()  ⇒ number
scrollLeft(value)  ⇒ self

Obtient ou définit le nombre de pixels de défilement vers la droite de l'élément défilant de la page ou de toute la fenêtre.

scrollTop v1.0+

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

Obtient ou définit le nombre de pixels de défilement vers le bas de l'élément défilant de la page ou de toute la fenêtre.

show

show()  ⇒ self

Restaure la valeur « display » par défaut de chaque élément de la collection. Si vous avez masqué un élément avec hide, cette méthode le rend visible. Cela revient à supprimerdisplay：none。

siblings

siblings([selector])  ⇒ collection

Obtient les nœuds frères de tous les éléments de la collection. Si un sélecteur CSS est fourni, filtre les éléments qui y correspondent.

size

size()  ⇒ number

Obtient le nombre d'éléments dans la collection.

slice

slice(start, [end])  ⇒ array

Extrait un sous-ensemble de ce tableau,arrayà partir destart. Siendest fourni, extrait les éléments destartàend, mais sans inclure l'élément à la positionend.

text

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

Obtient ou définit le contenu textuel de tous les éléments de la collection. Sans le paramètre content, renvoie le contenu textuel du premier élément de la collection (texte des nœuds enfants inclus). Avec le paramètre content, remplace le contenu textuel de tous les éléments de la collection. Il ressemble à html, mais contrairement à celui-ci, il ne permet pas d'obtenir ou de définir du HTML.

toggle

toggle([setting])  ⇒ self

Affiche ou masque les éléments correspondants. Sisettingest true, cela équivaut à la méthode show. Sisettingest false, cela équivaut à la méthode hide.

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

toggleClass

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

Ajoute ou supprime une ou plusieurs classes sur chaque élément de la collection correspondante. Si le nom de la classe existe, elle est supprimée, sinon elle est ajoutée. Sisettingest vrai, cette méthode agit comme addClass, si faux, elle agit comme removeClass.

unwrap

unwrap()  ⇒ self

Supprime le nœud parent direct de chaque élément de la collection et conserve ses éléments enfants à leur place. En pratique, cette méthode supprime l'élément ancêtre parent tout en conservant l'élément courant dans le 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

Récupère ou définit la valeur des éléments correspondants. Sans paramètre value, renvoie la valeur du premier élément. S'il s'agit<select multiple>d'une balise select multiple, renvoie un tableau. Avec un paramètre value, définit la valeur de tous les éléments.

width

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

Récupère la largeur du premier élément de la collection d'objets, ou définit la largeur de tous les éléments de la collection.

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

wrap

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

Enveloppe chaque élément correspondant dans un élément HTML. Le paramètre structure peut être un élément unique ou des éléments imbriqués. Il peut aussi être un fragment de chaîne HTML, un nœud DOM, ou une fonction de rappel qui génère l'enveloppe. Cette fonction renvoie un fragment d'enveloppe des deux premiers types.

À noter : cette méthode offre un bon support pour les nœuds du DOM. Si vous l'utilisezwrap() sur un nouvel élément avant de l'insérer dans le document, la méthode est sans effet.

// 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

Enveloppe tous les éléments correspondants dans une structure unique. La structure peut être un élément unique ou plusieurs éléments imbriqués, fournie sous forme de chaîne HTML ou de nœud DOM.

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

wrapInner

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

Enveloppe le contenu de chaque élément dans une structure unique. La structure peut être un élément unique ou plusieurs éléments imbriqués, fournie sous forme de chaîne HTML ou de nœud DOM. Elle peut aussi être une fonction de rappel qui génère l'enveloppe. Cette fonction renvoie un fragment d'enveloppe des deux premiers types.

// 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

Ces méthodes de détection permettent d'adapter votre site ou votre application à différents environnements. Elles aident à identifier les téléphones et les tablettes, ainsi que les navigateurs et les systèmes d'exploitation.

// 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

Crée et initialise un événement DOM spécifié. Si un objet properties est fourni, il sert à étendre le nouvel objet événement. Par défaut, l'événement est configuré en mode bouillonnement. Ce comportement se désactive en définissantbubbles为falsefalse.

Une fonction d'initialisation d'événement peut être déclenchée avec trigger.

$.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+

Accepte une fonction et renvoie une nouvelle fonction qui conserve toujours un contexte spécifique. Dans la nouvelle fonction,thisthis pointe vers le paramètre context. Sous une autre forme, la fonction d'origine est lue depuis une propriété spécifique de l'objet context.

Si plus de 2 arguments supplémentaires sont passés, ils servent d'arguments pour la fonction référencée par le paramètre 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 🐶🔫

Déconseillé, utilisez on à la place.

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+

Attache un gestionnaire d'événement à un élément.

delegate 🐶🔫

Déconseillé, utilisez on à la place.

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

Attache un gestionnaire d'événement, basé sur un ensemble d'éléments racines spécifiques, à tous les éléments correspondant au sélecteur. Les éléments correspondants peuvent exister maintenant ou être créés plus tard.

die 🐶🔫

Déconseillé, utilisez on à la place.

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

Supprime les événements ajoutés via live.

event.isDefaultPrevented v1.1+

event.isDefaultPrevented()  ⇒ boolean

如果preventDefault()preventDefault() a été appelé sur l'instance de cet événement, renvoie true. Cela sert d'alternative multiplateforme à la propriété native defaultPrevented, si celle-ci defaultPreventedest absente ou peu fiable dans certains navigateurs.

// 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()la méthode est appelée sur une instance de cet événement, elle renvoie true. Zepto l'implémente pour les navigateurs qui ne prennent pas en charge cette méthode native (par exemple les anciennes versions d'Android).

event.isPropagationStopped v1.1+

event.isPropagationStopped()  ⇒ boolean

如果stopPropagation()la méthode est appelée sur une instance de cet événement, elle renvoie true.

live 🐶🔫

Déconseillé, utilisez on à la place.

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

Semblable à delegate, cette méthode ajoute un gestionnaire d'événements à tous les éléments correspondant au sélecteur actuel. Les éléments correspondants peuvent exister déjà ou être créés plus tard.

off

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

Supprime les événements ajoutés via on. Pour supprimer un gestionnaire d'événements spécifique, vous devez passeron()la même fonction que celle utilisée lors de l'ajout. Sinon, appeler cette méthode avec seulement le type d'événement supprime tous les gestionnaires de ce type. Sans argument, cette méthode supprime tous les événements enregistrés sur l'élément actuel.

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+

Ajoute des gestionnaires d'événements aux éléments de la collection d'objets. Vous pouvez ajouter plusieurs événements via une chaîne séparée par des espaces, ou via un objet dont les clés sont les types d'événements et les valeurs les fonctions. Si un sélecteur CSS est fourni, l'événement ne se déclenche que lorsqu'il provient d'un élément correspondant à ce sélecteur (note : c'est la délégation d'événements).

Si undataargument est fourni, cette valeur sert de propriété event.data 属性

Le gestionnaire d'événements s'exécute dans le contexte de l'élément auquel il est ajouté, ou de l'élément correspondant au sélecteur donné (note : this désigne l'élément qui déclenche l'événement). Quand un gestionnaire d'événements renvoiefalse，preventDefault() 和 stopPropagation()sont appelés sur l'événement actuel, ce qui empêche l'action par défaut du navigateur, comme suivre un lien.

Sifalse est passé à cette méthode à la place d'une fonction de rappel, cela équivaut à passer une fonction qui renvoie directementfalse. (Note : cela revient à passer false comme argument de function(e){ ... } , comme raccourci de function(){ return false; } , par exemple : $("a.disabled").on("click", false);ce qui équivaut à$("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+

Ajoute un gestionnaire d'événements à un élément. Après la première exécution, l'événement est automatiquement délié, donc le gestionnaire s'exécute au maximum une fois par élément.selector 和 dataet.on()。

.

trigger(event, [args])  ⇒ self

trigger

// 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 prend en charge le déclenchement d'événements uniquement sur les éléments du dom.

triggerHandler

triggerHandler(event, [args])  ⇒ self

Comme trigger, cette méthode déclenche l'événement sur l'élément actuel seulement, sans propagation.

        $("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

Supprime les événements enregistrés via bind.

undelegate 🐶🔫

Déprécié, utilisez off à la place.

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

Supprime les événements enregistrés via delegate.

$.ajax

$.ajax(options)  ⇒ XMLHttpRequest

Exécute une requête Ajax. La ressource peut être locale ou distante. Le cross-domain passe par un navigateur avec HTTP access control ou par JSONP.

Options :

• type(par défaut : « GET ») : méthode de la requête (« GET », « POST » ou autre).
• url (par défaut : adresse courante) : adresse à laquelle envoyer la requête.
• data(par défaut : none) : données envoyées au serveur. Pour une requête GET, elles sont automatiquement ajoutées à l'url comme paramètres. Les objets non String sont sérialisés via $.param.
• processData (par défaut : true) : pour les requêtes non GET. Convertit automatiquement data en chaîne de caractères.
• contentType (par défaut : « application/x-www-form-urlencoded ») : type d'encodage du contenu envoyé au serveur. (On peut aussi le définir via headers). Définissez false pour ignorer la valeur par défaut.
• mimeType(par défaut : none) : remplace le type MIME de la réponse. v1.1+
• dataType (par défaut : none) : type de données attendu en réponse du serveur (« json », « jsonp », « xml », « html » ou « text »).
• jsonp (par défaut : « callback ») : nom du paramètre de requête du callback JSONP.
• jsonpCallback(par défaut : « jsonp{N} ») : nom de la fonction callback JSONP globale (chaîne ou fonction retournée). Ce réglage active le cache du navigateur. v1.1+
• timeout (默认： 0) : délai d'expiration de la requête en millisecondes. 0 signifie aucun délai d'expiration.
• headers: objet d'en-têtes HTTP supplémentaires pour la requête Ajax.
• async (par défaut : true) : par défaut, toutes les requêtes sont asynchrones. Pour envoyer une requête synchrone, définissez cette option sur false。
• global (par défaut : true) : la requête déclenche les gestionnaires d'événements Ajax globaux. Définissez sur false pour ne pas les déclencher.
• context (par défaut : window) : objet définissant le contexte des fonctions de callback Ajax (cible de this).
• traditional(par défaut : false) : active la méthode traditionnelle de sérialisation via $.param pour obtenirdata。
• cache(par défaut : true) : autorise le navigateur à mettre en cache les réponses GET. Depuis v1.1.4, quand l'option dataType vaut "script" ou jsonp, la valeur par défaut estfalse。
• xhrFields(par défaut : none) : objet dont les propriétés sont copiées telles quelles dans l'instance XMLHttpRequest. v1.1+
• username & password(par défaut : none) : identifiants d'authentification HTTP Basic. v1.1+

Si l'URL contient=?或者dataTypevaut « jsonp », la requête est traitée en injectant un <script>des balises à la place de XMLHttpRequest (voir JSONP). Dans ce cascontentType, dataType, headersune restriction s'applique,async 不被支持。

Fonctions de rappel Ajax

Vous pouvez spécifier les fonctions de rappel suivantes. Elles s'exécutent dans l'ordre donné :

1. beforeSend(xhr, settings): appelée avant l'envoi de la requête. Elle reçoit l'objet xhr et settings comme paramètres. Si elle renvoie false , la requête est annulée.

2. success(data, status, xhr): appelée après le succès de la requête. Elle reçoit les données renvoyées et une chaîne contenant le code de succès.

3. error(xhr, errorType, error): appelée en cas d'erreur. (délai dépassé, erreur d'analyse, ou code d'état hors HTTP 2xx).

4. complete(xhr, status): appelée à la fin de la requête, qu'elle échoue ou réussisse.

Interface de rappel Promise v1.1+

Si les modules optionnels "callbacks" et "deferred" sont chargés, l'objet XHR renvoyé par$.ajax()implémente l'interface promise avec des rappels chaînés :

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

Ces méthodes remplacent les options de rappelsuccess, error, 和 complete .

Événements Ajax

Lorsqueglobal: true. Pendant le cycle de vie d'une requête Ajax, les événements suivants sont déclenchés.

1. ajaxStart(global) : déclenché si aucune autre requête Ajax n'est active.

2. ajaxBeforeSend (data: xhr, options) : avant l'envoi de la requête. Elle peut être annulée.

3. ajaxSend (data: xhr, options) : comme ajaxBeforeSend, mais sans annulation possible.

4. ajaxSuccess (data: xhr, options, data) : lorsque le retour est un succès.

5. ajaxError (data: xhr, options, error) : en cas d'erreur.

6. ajaxComplete (data: xhr, options) : après la fin de la requête, qu'elle réussisse ou échoue.

7. ajaxStop(global) : déclenché s'il s'agit de la dernière requête Ajax active.

Par défaut, les événements Ajax sont déclenchés sur l'objet document. Cependant, si lecontext de la requête est un nœud DOM, l'événement est déclenché sur ce nœud puis remonte dans le DOM. La seule exception concerne ajaxStart & ajaxStop, ces deux événements globaux.

$(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 🐶🔫

Déconseillé, utilisez $.ajax à la place.

$.ajaxJSONP(options)  ⇒ mock XMLHttpRequest

Récupère des données en JSONP cross-domain.

Cette méthode n'a aucun avantage par rapport à $.ajax. Évitez de l'utiliser.

$.ajaxSettings

Un objet contenant les réglages par défaut des requêtes Ajax. La plupart des réglages sont déjà décrits dans $.ajax. Les réglages globaux suivants sont utiles :

• timeout (默认： 0) : définit une valeur non nulle pour les requêtes Ajax afin de spécifier un délai d'expiration par défaut, en millisecondes.
• global (par défaut : true) : définissez à false pour empêcher le déclenchement des événements Ajax.
• xhr (par défaut : XMLHttpRequest factory) : définit une fonction qui renvoie une instance XMLHttpRequest (ou un objet compatible).
• acceptsNotez que sans sélecteur, tous les blocs javascript sont exécutés. Avec un sélecteur, les scripts à l'intérieur du sélecteur correspondant sont supprimés.dataTypescript : "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+

Exécute une requête Ajax GET. C'est un raccourci de $.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+

Récupère des données JSON via une requête Ajax GET. C'est un raccourci de $.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

Sérialise un objet en chaîne de requête encodée en URL pour les données soumises dans une requête Ajax. Si shallow est défini à true, les objets imbriqués ne sont pas sérialisés et les valeurs des tableaux imbriqués n'ont pas de crochets dans leur clé.

Si la valeur d'une propriété d'un objet est une fonction et non une chaîne, la fonction est appelée et sa valeur de retour est sérialisée.

De plus, accepte un tableau au format serializeArray, où chaque élément possède les propriétés "name" et "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

Exécute une requête Ajax POST. C'est un raccourci de $.ajax.

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

data Le paramètre peut être une chaîne :

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

load

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

Charge du contenu HTML distant via Ajax GET et l'insère dans la collection actuelle. Vous pouvez aussi spécifier un sélecteur CSS dans l'url. Le contenu HTML correspondant au sélecteur met alors à jour la collection.

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

Sans sélecteur CSS, le texte complet renvoyé est utilisé.

请注意，在没有选择器的情况下，任何javascript块都会执行。如果带上选择器，匹配选择器内的script将会被删除。

serialize

serialize()  ⇒ string

Compile les valeurs des éléments de formulaire à soumettre en une chaîne encodée en URL pour une requête Ajax post.

serializeArray

serializeArray()  ⇒ array

Compile les valeurs des éléments de formulaire à soumettre en un tableau d'objets possédantname和valueLes éléments de formulaire inutilisables, les buttons, les radio buttons/checkboxs non cochés sont ignorés. Le résultat ne contient pas les données des file inputs.

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

submit

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

Lie une fonction de gestion à l'événement "submit", ou déclenche l'événement "submit" sur l'élément. Sans paramètre function, déclenche l'événement "submit" du formulaire actuel et exécute le comportement de soumission par défaut, sauf sipreventDefault()。

Avec un paramètre function, lie simplement une fonction de gestion à l'événement "submit" sur l'élément actuel.

$.fx

Paramètres globaux d'animation :

• $.fx.off(par défaut à false dans les navigateurs qui prennent en charge css transition) : définissez à true pour désactiver toutesanimate()transitions.

• $.fx.speeds: objet utilisé pour définir la durée de l'animation.

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

Modifiez une valeur existante ou ajoutez une nouvelle propriété pour influencer l'animation avec une durée définie par une chaîne de caractères.

animate

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

Applique une transition fluide de la propriété css transition aux éléments de la collection d'objets actuelle.

• properties: un objet qui contient les valeurs de l'animation css, ou le nom d'une animation css en images clés.
• duration(400 par défaut) : durée en millisecondes, ou une chaîne de caractères.
  • fast (200 ms)
  • slow (600 ms)
  • tout$.fx.speedspropriété personnalisée
• easing (par défaut linear) : spécifie le type d'easing de l'animation, avec l'une des valeurs suivantes :
  • ease
  • linear
  • ease-in / ease-out
  • ease-in-out
  • cubic-bezier(...)
• complete: fonction de rappel exécutée à la fin de l'animation
li>delay: délai de transition en millisecondes v1.1+

Zepto prend aussi en charge les propriétés CSS transform suivantes :

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

Si le paramètre duration vaut0 ou $.fx.off Si la valeur est true (valeur par défaut dans les navigateurs qui ne prennent pas en charge les transitions CSS), l'animation n'est pas exécutée. La position cible de l'animation de remplacement est appliquée immédiatement. De même, si l'animation spécifiée ne se termine pas, la position cible est appliquée immédiatement. Dans ce cas, il n'y a pas d'animation. completeLa méthode n'est pas non plus appelée.

Si le premier argument est une chaîne de caractères plutôt qu'un objet, il est traité comme le nom d'une animation CSS keyframe.

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

Zepto utilise uniquement des animations basées sur les transitions CSS. Les easings de jQuery ne sont pas pris en charge. La syntaxe des valeurs relatives de jQuery ("=+10px") n'est pas prise en charge non plus. Consultez la liste des propriétés animables. La prise en charge par les navigateurs peut varier, testez donc les navigateurs que vous souhaitez prendre en charge.

Événements tactiles

Le module "touch" ajoute les événements suivants. Vous pouvez utiliser on et off.

• tap — Se déclenche lors d'un tap sur l'élément.
• singleTap and doubleTap Cette paire d'événements permet de détecter les clics simples et doubles sur un élément. (Si vous n'avez pas besoin de détecter les clics simples et doubles, utilisez tap à la place).
• longTap — Se déclenche quand un élément est maintenu appuyé pendant plus de 750ms.
• swipe, swipeLeft, swipeRight, swipeUp, swipeDown — Se déclenche quand l'élément est balayé. (Avec une direction donnée en option)

Ces événements sont aussi des méthodes raccourcies sur toutes les collections d'objets Zepto.

<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>