Download Zepto

デフォルトビルドには以下のモジュールが含まれます:
Core, Ajax, Event, Form, IE.

Zepto v1.0 はデフォルトで Effects、iOS3、および Detect モジュールをバンドルしています。
以下を参照してください。可选模块(optional modules)。

Or grab the latest version on GitHub.

ページの下部にscriptタグを使ってZeptoを導入します:

...
<script src=zepto.min.js></script>
</body>
</html>

如果$変数は未定義であり、Zeptoはグローバル変数のみを設定します。$それ自体を指します。ありません。Zepto.noConflict方法。

古いブラウザ(Internet Explorer 9以下など)をサポートする必要がある場合は、jQuery 1.x にフォールバックできます。

ブラウザサポート

初級 (100% サポート)

二次ターゲット(完全または大部分がサポート)

注意すべき点として、Zeptoの一部のオプション機能はモバイルブラウザ専用です。なぜなら、その当初の目標はモバイルでjQueryに似た軽量なJSライブラリを提供することだったからです。

ブラウザ(Safari、Chrome、Firefox)上でページアプリケーションを開発したり、HTMLベースのweb-viewローカルアプリを構築したりする場合、あなたがPhoneGap、Zeptoを使用するのは良い選択です。

要するに、Zeptoはすべてのモダンブラウザで基本環境として使用されることを意図しています。Zeptoは旧バージョンのInternet Explorer(<10)をサポートしていません。

Zeptoの手動構築

zepto.jsとzepto.min.js上記の使用方法を提供します。しかし、より良いプログラム効果と自由性のために、Zeptoソースコードを使用してZepto.jsとzepto.min.jsを構築する際にモジュールを選択してテストすることができます。使用するUglifyJSあなたのニーズに応じてコードを生成します(サーバー側でgzipを有効にすると、最も簡潔なコード)。

Zeptoのビルド方法についてthe README、テストの実行とパッチを含みます。

Zeptoモジュール

module default description
zepto ✔ コアモジュール;多くのメソッドを含む
event ✔ 通过on()& off()处理事件
ajax ✔ XMLHttpRequest と JSONP の実用機能
form ✔ シリアライズ&Webフォーム送信
ie ✔ デスクトップ版Internet Explorer 10+とWindows Phone 8のサポートを追加しました。
detect 提供 $.osと$.browser消息
fx The animate()方法
fx_methods アニメーション形式のshow, hide, toggle、およびfade*()方法.
assets 実験的なサポート:DOMからimage要素を削除した後にiOSのメモリをクリーンアップします。
data 包括のなdata()メソッド。メモリ内に任意のオブジェクトを保存できます。
deferred 提供 $.Deferredpromises API. 依赖"callbacks" 模块.
このモジュールを含む場合、 $.ajax() promiseインターフェースのチェーン式コールバックをサポートします。
callbacks "deferred"モジュールに提供$.Callbacks。
selector 実験的なサポートjQuery CSS 表达式実用的な機能、例えば$('div:first')とel.is(':visible')。
touch タッチデバイスでtap– や swipe– 関連イベントをトリガーします。これはすべての`touch`(iOS、Android)および`pointer`イベント(Windows Phone)に適用されます。
gesture タッチデバイス上でピンチジェスチャイベントをトリガーします。
stack 提供 andSelf& end()チェーン呼び出し可能なメソッド
ios3 String.prototype.trim と Array.prototype.reduce メソッド(存在しない場合)を使用して、iOS 3.x との互換性を持たせます。

プラグインの作成

メソッドを追加することで $.fn のプロパティを使ってプラグインを書く:

;(function($){
  $.extend($.fn, {
    foo: function(){
      // `this` refers to the current Zepto collection.
      // When possible, return the Zepto collection to allow chaining.
      return this.html('bar')
    }
  })
})(Zepto)

プラグイン開発をより良く始めるために、まず以下を参照してくださいsource of Zepto's core module、そして読んだことを確認しcoding style guidelines


コアメソッド

$()

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

CSSセレクターを実行し、DOMノードをラップし、またはHTML文字列から複数の要素を作成することで、Zeptoコレクションオブジェクトを作成します。

Zeptoコレクションは配列のようなオブジェクトであり、それが指すDOMノードを操作するためのチェーン可能なメソッドを持っています。$(Zepto)オブジェクト上の直接メソッド以外に(例えば$.extend)を除き、documentオブジェクト内のすべてのメソッドはコレクションメソッドです。

セレクターにcontentパラメータ(CSSセレクター、DOM、またはZeptoコレクションオブジェクト)が存在する場合、指定されたノードのコンテキスト内でのみCSSセレクターを実行します。この機能は$(context).find(selector)同じです。

HTML文字列フラグメントが与えられてDOMノードを作成する場合。属性マップのセットを指定してノードを作成することもできます。最も速く要素を作成するには、使用<div> 或 <div/>形式。

関数が〜に付加されたDOMContentLoadedイベントの処理フローにおいて。ページがすでに読み込み完了している場合、このメソッドは直ちに実行されます。

$('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 扩展、しかし、オプションの「selector」モジュールは、最も一般的ないくつかの擬似セレクターをサポートする限定提供であり、既存のコードやプラグインとの互換実行のために破棄することができます。

如果$変数は未定義であり、Zeptoはグローバル変数のみを設定します。$それ自体を指します。Zeptoと有用なレガシーコード(例えばprototype.js)を同時に使用できます。Prototypeを最初にロードする限り、ZeptoはPrototypeの $ 関数。Zeptoは常にグローバル変数を設定します。Zeptoそれ自体を指します。

$.camelCase v1.0+

$.camelCase(string)  ⇒ string

一連の文字列を「キャメル」命名法の新しい文字列に変換します。その文字がすでにキャメル命名法である場合は、変更されません。

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

$.contains v1.0+

$.contains(parent, node)  ⇒ boolean

親ノードが指定されたDOMノードを含むかどうかを確認します。両者が同じノードである場合は返します。false。

$.each

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

配列要素を反復処理するか、キーと値のペアでオブジェクトを反復処理します。コールバック関数は返します。falseときにトラバースを停止します。

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

ソースオブジェクトのプロパティをターゲットオブジェクトに拡張します。ソースオブジェクトのプロパティはターゲットオブジェクトのプロパティを上書きします。

デフォルトでは、コピーは浅いコピー(シャローコピー)です。最初のパラメータがtrueの場合は、深いコピー(ディープコピー)を意味します。

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

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

$.fn

Zepto.fnオブジェクトであり、Zeptoオブジェクトで利用可能なすべてのメソッドを持っています。例えばaddClass(), attr()、およびその他のメソッド。このオブジェクトにメソッドを追加すると、すべてのZeptoオブジェクトでそのメソッドを使用できます。

ここにZeptoを実装するためのempty()メソッドの例:

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

$.grep v1.0+

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

新しい配列を取得します。新しい配列には、コールバック関数でtrueを返す配列項目のみが含まれます。

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

$.inArray v1.0+

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

配列内で指定された要素のインデックス値を返します(注:0ベース)。その要素が見つからない場合は返します。-1。

愚人埠頭注:[fromIndex]パラメータはオプションで、どのインデックス値から後方に検索し始めるかを示します。

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

objectがarrayの場合はtrueを返します。

$.isFunction

$.isFunction(object)  ⇒ boolean

objectがfunctionの場合はtrueを返します。

$.isPlainObject v1.0+

$.isPlainObject(object)  ⇒ boolean

オブジェクトが「純粋な」オブジェクトであるかどうかをテストします。このオブジェクトはオブジェクトリテラル("{}")またはnew Objectによって作成されたものであれば、trueを返します。

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

$.isWindow v1.0+

$.isWindow(object)  ⇒ boolean

objectパラメータがwindowオブジェクトである場合、trueを返します。これはiframeを処理するときに非常に便利です。各iframeには独自のwindowオブジェクトがあるため、通常の方法ではobj === windowこれらのオブジェクトを検証しようとすると失敗します。

$.map

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

コレクション内の要素を走査し、反復関数を通過したすべての結果を返します(愚人码头注:新しい配列)nullとundefinedはフィルタリングされます。

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

原生JSON.parseメソッドのエイリアス。(注:標準形式のJSON文字列を受け取り、解析後のJavaScriptオブジェクトを返します。)

$.trim v1.0+

$.trim(string)  ⇒ string

文字列の先頭と末尾の空白文字を削除します。String.prototype.trim()に似ています。

$.type v1.0+

$.type(object)  ⇒ string

JavaScriptオブジェクトの型を取得します。可能性のある型は次のとおりです:null undefined boolean number string function array date regexp object error。

他のオブジェクトの場合、単に「object」と報告します。オブジェクトがJavaScriptの通常のオブジェクトであるかどうかを知りたい場合は、使用しますisPlainObject。

add

add(selector, [context])  ⇒ self

現在一致する要素コレクションに要素を追加します。contentパラメータが指定された場合は、content要素内でのみ検索し、それ以外の場合は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

一致する各要素に指定されたclassクラス名を追加します。複数のclassクラス名はスペースで区切ります。

after

after(content)  ⇒ self

一致する各要素の後にコンテンツを挿入します(注:外部挿入)。コンテンツはHTML文字列、DOMノード、またはノードで構成される配列です。

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

append

append(content)  ⇒ self

一致する各要素の末尾にコンテンツを挿入します(注:内部挿入)。コンテンツはHTML文字列、DOMノード、またはノードで構成される配列です。

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

appendTo

appendTo(target)  ⇒ self

一致する要素をターゲット要素の末尾に挿入します(注:内部挿入)。これは少し似ていますappend、しかし挿入のターゲットはその逆です。

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

DOMの属性を読み取るか設定します。valueパラメータが指定されていない場合は、オブジェクトコレクションの最初の要素の属性値を読み取ります。valueパラメータが指定された場合は、オブジェクトコレクション内のすべての要素のその属性の値を設定します。valueパラメータがnull、その場合この属性は削除されます(類似:removeAttr)、複数の属性はオブジェクトのキーと値のペアで設定できます。

DOMの属性を読み取るには、例えばcheckedとselected, 使用 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

一致する各要素の前にコンテンツを挿入します(注:外部挿入)。コンテンツはHTML文字列、DOMノード、またはノードで構成される配列です。

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

children

children([selector])  ⇒ collection

各マッチした要素の直接の子要素を取得します。セレクタが指定された場合、返される結果にはCSSセレクタに一致する要素のみが含まれます。

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

clone v1.0+

clone()  ⇒ collection

ディープクローンによってコレクション内のすべての要素を複製します。

このメソッドはデータとイベントハンドラを新しい要素にコピーしません。この点は、データとイベント処理をコピーするかどうかをパラメータで決定するjQueryとは異なります。

closest

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

要素自体から始まり、上位の要素へとレベルごとにマッチングし、最初にselectorにマッチする要素を返します。contextノードパラメータが指定された場合、そのノードの子孫要素のみをマッチングします。このメソッドはparents(selector)少し似ていますが、最初にマッチした祖先要素のみを返します。

パラメータがZeptoオブジェクトのコレクションまたは要素の場合、結果はセレクタではなく指定された要素に一致する必要があります。

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

concat

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

要素をZeptoオブジェクトコレクションに追加して新しい配列を形成します。パラメータが配列の場合、その配列の要素はZeptoオブジェクトコレクションにマージされます。

これはZeptoが提供するメソッドであり、jQueryのAPIではありません。

contents v1.0+

contents()  ⇒ collection

一致する各要素コレクション要素の子要素を取得します。テキストノードとコメントノードを含みます。(注:.contents()と.children()メソッドは似ていますが、前者はテキストノードとjQueryオブジェクトで生成されたHTML要素を含みます。)

css

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

DOM要素のCSSプロパティを読み取るか設定します。valueパラメータが存在しない場合、オブジェクトコレクションの最初の要素のCSSプロパティを返します。valueパラメータが存在する場合、オブジェクトコレクション内の各要素の対応するCSSプロパティを設定します。

複数のプロパティは、プロパティ名で構成される配列を渡すことで一度に取得できます。複数のプロパティは、オブジェクトのキーと値のペアを使用して設定できます。

valueが空の場合(空文字列、null 或 undefined)、そのCSSプロパティは削除されます。valueパラメータが単位なしの数値の場合、そのCSSプロパティが単位を必要とするなら、「px」が自動的にそのプロパティに追加されます。

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

DOMの読み取りまたは書き込みdata-*プロパティ。動作は少し似ていますattr、ただし属性名の前にdata-。

属性値を読み取るとき、次の変換が行われます:v1.0+

  • “true”、“false”、“null”はそれぞれ対応する型に変換されます。
  • 数値は実際の数値型に変換され;
  • JSON値は解析されます、それが有効なJSONである場合;
  • その他はすべて文字列として返されます。

    Zeptoの基本実装の`data()`は文字列のみを保存できます。任意のオブジェクトを保存する場合は、オプションの「data」モジュールをあなたが構築したZeptoに導入してください。

each

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

オブジェクトコレクションの各要素を反復処理します。反復関数内では、thisキーワードは現在の項目を指します(関数の2番目のパラメータとして渡されます)。反復関数が返した場合false、トラバースが終了します。

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

empty

empty()  ⇒ self

オブジェクトコレクション内の各要素のDOMコンテンツを空にします。

eq

eq(index)  ⇒ collection

現在のオブジェクトコレクションから指定されたインデックス値(注: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+

オブジェクトコレクションをフィルタリングし、CSSセレクターを満たす項目を返します。パラメータが関数の場合、関数が真の値を返すときに要素が返されます。関数内では、thisキーワードは現在の要素を指します。

その逆の機能は、以下を参照してくださいnot.

find

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

現在のオブジェクトコレクション内で、CSSセレクターに一致する各要素の子孫要素を検索します。

Zeptoオブジェクトコレクションまたは要素が指定された場合、それらをフィルタリングし、それらが現在のZeptoコレクションオブジェクト内にある場合にのみ返されます。

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

first

first()  ⇒ collection

現在のオブジェクトコレクション内の最初の要素を取得します。

$('form').first()

forEach

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

オブジェクトコレクション内の各要素を反復処理します。少し似ています eachしかし、走査関数のパラメータは異なります。関数が戻るときfalseの場合、走査は停止しません。

これはZeptoが提供するメソッドであり、jQueryのAPIではありません。

get

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

現在のオブジェクト集合からすべての要素または単一の要素を取得します。indexパラメータが存在しない場合、通常の配列としてすべての要素を返します。indexが指定された場合、その位置の要素のみを返します。この点はeqとは異なり、このメソッドはDOMノードを返します。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

現在のオブジェクト集合の子要素にセレクタに一致する要素があるか、または指定されたDOMノードを含むかを判定します。もしあれば、新しいオブジェクト集合を返します。このオブジェクトは、セレクタに一致する要素を含まないものや、指定されたDOMノードを含まないオブジェクトをフィルタリングして除外します。

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

hasClass

hasClass(name)  ⇒ boolean

オブジェクト集合内に指定されたclassを持つ要素があるかどうかを検査します。

<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

オブジェクト集合内の最初の要素の高さを取得します。または、オブジェクト集合内のすべての要素の高さを設定します。

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

hide

hide()  ⇒ self

Hide elements in this collection by setting their display CSS property to none.

CSSのプロパティを設定することでdisplayためにnoneオブジェクトコレクション内の要素を非表示にします。

html

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

オブジェクト集合内の要素のHTMLコンテンツを取得または設定します。contentパラメータが与えられていない場合、オブジェクト集合内の最初の要素のinnerHtmlを返します。contentパラメータが与えられた場合、それを使用してオブジェクト集合内の各要素のコンテンツを置き換えます。contentには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

要素のインデックス値を取得します(愚人码头注:0から数えます)。elemenパラメータが指定されていない場合、現在の要素の兄弟ノード内での位置を返します。elementパラメータが指定された場合、現在のオブジェクト集合内での位置を返します。要素が見つからない場合は、-1。

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

indexOf

indexOf(element, [fromIndex])  ⇒ number

Get the position of an element in the current collection. If fromIndex number is given, search only from that position onwards. Returns the 0-based position when found and -1 if not found. Use of index is recommended over this method.

現在のオブジェクト集合内で要素のインデックス値を取得します(愚人码头注:0から数えます)。formindexパラメータが指定された場合、その位置から後方に検索し、0ベースのインデックス値を返します。見つからない場合は、-1を返します。-1を返します。-1。indexメソッドはこのメソッドに基づいて実装されています。

これはZeptoのメソッドであり、jquerのAPIではありません。

insertAfter

insertAfter(target)  ⇒ self

集合内の要素を指定されたターゲット要素の後ろに挿入します(愚人码头注:外部挿入)。これは次のようなものです after、ただし使用方法は逆です。

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

insertBefore

insertBefore(target)  ⇒ self

集合内の要素を指定されたターゲット要素の前に挿入します(愚人码头注:外部挿入)。これは次のようなものです before、ただし使用方法は逆です。

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

is

is(selector)  ⇒ boolean

現在の要素集合内の最初の要素がCSSセレクタに一致するかを判定します。jQueryの非標準セレクタの基本的なサポートについては、次のようなものがあります::visibleオプションの"selector"モジュールに含まれています。

jQuery CSS extensionsサポートされていません。"selector"モジュールを選択すると、限られた最も一般的な方法のみをサポートできます。

last

last()  ⇒ collection

オブジェクトコレクション内の最後の要素を取得します。

$('li').last()

map

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

オブジェクト集合内のすべての要素を反復処理します。反復処理関数の戻り値によって新しい集合オブジェクトを形成します。反復処理関数内ではthisキーワードは現在のループの項目を指します(反復処理関数の2番目のパラメータ)。

遍历中返回 nullとundefined、トラバースは終了します。

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

next

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

Get the next sibling–optionally filtered by selector–of each element in the collection.

オブジェクト集合内の各要素の次の兄弟ノードを取得します(オプションでフィルタセレクタを付けることができます)。

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

not

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

現在のオブジェクト集合をフィルタリングして、新しいオブジェクト集合を取得します。その中の要素はCSSセレクタに一致しません。もう一方のパラメータがZeptoオブジェクト集合の場合、返される新しいZeptoオブジェクト内の要素はそのパラメータオブジェクトに含まれません。パラメータが関数の場合、関数の実行結果がfalseとなる場合の要素のみを含みます。関数のthisキーワードは現在のループ要素を指します。

その逆の機能は、以下を参照してくださいfilter.

offset

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

現在の要素のdocumentに対する位置を取得します。次のプロパティを持つオブジェクトを返します:top, left, widthとheight

を含むものが与えられたときleftとtopプロパティオブジェクトの場合、これらの値を使用して集合内の各要素をdocumentに対して位置付けます。

offsetParent v1.0+

offsetParent()  ⇒ collection

最初に位置指定された祖先要素を見つけます。つまり、そのCSSのposition属性値は“relative”、“absolute”または“fixed”です。

parent

parent([selector])  ⇒ collection

オブジェクト集合内の各要素の直接の親要素を取得します。CSSセレクタパラメータが指定された場合、条件に一致する要素をフィルタリングします。

parents

parents([selector])  ⇒ collection

オブジェクト集合内の各要素のすべての祖先要素を取得します。CSSセレクタパラメータが指定された場合、条件に一致する要素をフィルタリングします。

直接の親要素を取得したい場合は、以下を使用しますparentもしCSSセレクタに一致する最初の要素だけを取得したい場合は、次のものを使用しますclosest。

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

pluck

pluck(property)  ⇒ array

オブジェクト集合内の各要素の属性値を取得します。戻り値はnull或undefinedフィルタリングする価値があります。

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

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

これはZeptoのメソッドであり、jqueryのAPIではありません

position v1.0+

position()  ⇒ object

オブジェクト集合内の最初の要素の位置を取得します。相対位置はoffsetParent絶対配置された要素が別の要素の近くにある場合、このメソッドは有用です。

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

パラメータの内容を各一致要素の前に挿入します(愚人码头注:要素内部への挿入)。挿入される要素は、HTML文字列フラグメント、DOMノード、またはノードの配列にすることができます。

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

prependTo

prependTo(target)  ⇒ self

すべての要素をターゲットの前に挿入します(愚人码头注:要素内部への挿入)。これは次のようなものですprepend、ただし逆の方法です。

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

prev

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

オブジェクト集合内の各要素の前の兄弟ノードを取得し、セレクタでフィルタリングします。

prop v1.0+

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

DOM要素の属性値を読み取りまたは設定します。属性値を読み取る場合、これはattrよりも優先されます。なぜなら、これらの属性値はユーザーの操作によって変更されるからです。例えばcheckedとselected。

省略形または小文字の名前、例えばfor, class, readonlyおよび類似の属性は、実際の属性にマッピングされます。例えばhtmlFor, className, readOnly, 等等。

push

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

Add elements to the end of the current collection.

現在のオブジェクト集合の最後に要素を追加します。

これはzeptoのメソッドであり、jqueryのAPIではありません

ready

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

イベントリスナーを追加します。ページのDOM読み込みが完了し"DOMContentLoaded"イベントがトリガーされたときに発火します。次のものを使用することをお勧めします$()この使用方法の代わりに。

reduce

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

とArray.reduce同じ使い方があり、現在のオブジェクト集合を反復処理します。memoは関数が前回返した戻り値です。反復的に走査します。

これはzeptoのメソッドであり、jqueryのAPIではありません

remove

remove()  ⇒ self

現在の集合内の要素をその親ノードから削除し、DOMから効果的に削除します。

removeAttr

removeAttr(name)  ⇒ self

現在のオブジェクト集合内のすべての要素から指定された属性を削除します。

removeClass

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

現在のオブジェクト集合内のすべての要素から指定されたclassを削除します。nameパラメータが指定されていない場合、すべてのclassを削除します。複数のclassパラメータ名はスペースで区切ることができます。次の例では2つの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

指定された内容で一致するすべての要素を置き換えます(要素自体を含みます)。contentパラメータにはbeforeで説明されているタイプ。

scrollLeft v1.1+

scrollLeft()  ⇒ number
scrollLeft(value)  ⇒ self

ページ上のスクロール要素またはウィンドウ全体が右にスクロールするピクセル値を取得または設定します。

scrollTop v1.0+

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

ページ上のスクロール要素またはウィンドウ全体が下にスクロールするピクセル値を取得または設定します。

show

show()  ⇒ self

オブジェクト集合内の各要素のデフォルトの"display"値を復元します。もしあなたがhide要素を非表示にするために使用した場合、このプロパティを使用して表示することができます。これはdisplay:none。

siblings

siblings([selector])  ⇒ collection

オブジェクト集合内のすべての要素の兄弟ノードを取得します。CSSセレクタパラメータが指定された場合、セレクタに一致する要素をフィルタリングします。

size

size()  ⇒ number

オブジェクトコレクション内の要素の数を取得します。

slice

slice(start, [end])  ⇒ array

この配列を抽出するarrayの部分集合,からstart開始、指定された場合end,抽出してからstart开始到end末尾の要素、ただし含みませんend位置の要素。

text

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

オブジェクト集合内のすべての要素のテキストコンテンツを取得または設定します。contentパラメータが指定されていない場合、現在のオブジェクト集合内の最初の要素のテキストコンテンツ(子ノード内のテキストコンテンツを含む)を返します。contentパラメータが指定された場合、それを使用してオブジェクト集合内のすべての要素のテキストコンテンツを置き換えます。これは次のものに似ていますhtmlしかし、それとは異なり、HTMLの取得や設定には使用できません。

toggle

toggle([setting])  ⇒ self

マッチした要素を表示または非表示にします。もしsettingがtrueの場合、以下と同等ですshow 法。如果settingfalseの場合。〜に相当します。hide方法。

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

toggleClass

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

一致する要素集合内の各要素に1つまたは複数のスタイルクラスを追加または削除します。class名が存在する場合は削除し、存在しない場合は追加します。もしsettingの値が真の場合、この機能は以下に似ていますaddClass、偽の場合、この機能は以下に似ていますremoveClass。

unwrap

unwrap()  ⇒ self

集合内の各要素の直接の親ノードを削除し、その子要素を元の位置に保持します。基本的に、このメソッドは1つ前の祖先要素を削除しつつ、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

一致する要素の値を取得または設定します。valueパラメータが指定されていない場合、最初の要素の値を返します。もし<select multiple>タグの場合、配列を返します。valueパラメータが指定された場合、すべての要素の値を設定します。

width

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

オブジェクト集合内の最初の要素の幅を取得します。または、オブジェクト集合内のすべての要素の幅を設定します。

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

wrap

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

各一致要素の外側にhtml要素をラップします。structureパラメータは、単一の要素またはいくつかのネストされた要素にすることができます。また、HTML文字列フラグメントやDOMノードにすることもできます。さらに、要素をラップするためのコールバック関数にすることもでき、この関数は前の2つのタイプのラッピングフラグメントを返します。

注意すべき点は:このメソッドはDOM内のノードに対して優れたサポートを提供します。もしwrap()新しい要素に使用し、その結果をdocumentに挿入する場合、このメソッドは無効です。

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

すべての一致要素の外側に単一の構造をラップします。構造は単一の要素またはいくつかのネストされた要素にすることができ、HTML文字列またはDOMノードとして渡すことができます。

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

wrapInner

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

各要素内の内容単一の構造でラップします。構造は単一の要素または複数のネストされた要素にすることができ、HTML文字列またはDOMノードとして渡すことができます。または、要素をラップするためのコールバック関数にすることもでき、この関数は前の2つのタイプのラッピングフラグメントを返します。

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

Detect module

この検出メソッドは、さまざまな環境でサイトやアプリケーションを微調整し、スマートフォンやタブレット、およびさまざまなブラウザやオペレーティングシステムを識別するのに役立ちます。

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

指定されたDOMイベントを作成および初期化します。propertiesオブジェクトが指定された場合、それを使用して新しいイベントオブジェクトを拡張します。デフォルトでは、イベントはバブリング方式に設定されています。これは設定によって変更できますbubblesためにfalse来关闭。

イベントを初期化する関数は使用できます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+

関数を受け取り、新しい関数を返します。この新しい関数は常に特定のコンテキスト(context)を保持します。新しい関数内ではthiscontextパラメータを指します。別の形式では、元のfunctionはコンテキスト(context)オブジェクトの特定のプロパティから読み取られます。

2つ以上の追加パラメータが渡された場合、それらは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 🐶🔫

推奨されません。使用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+

要素に処理イベントをバインドします。

delegate 🐶🔫

推奨されません。使用on 代替。

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

特定のルート要素のセットに基づいて、セレクタに一致するすべての要素にイベントハンドラを追加します。一致する要素は現在存在するか、将来作成される可能性があります。

die 🐶🔫

推奨されません。使用on 代替。

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

删除通过 live追加されたイベント。

event.isDefaultPrevented v1.1+

event.isDefaultPrevented()  ⇒ boolean

如果preventDefault()そのイベントのインスタンスによって呼び出された場合、trueを返します。これはクロスプラットフォームの代替としてネイティブの defaultPrevented属性,如果 defaultPrevented欠落している場合、または一部のブラウザでは信頼できない場合。

// 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()そのイベントのインスタンスによって呼び出された場合、trueを返します。Zeptoはこのネイティブメソッドをサポートしないブラウザ(例えば古いバージョンのAndroid)でそれを実装します。

event.isPropagationStopped v1.1+

event.isPropagationStopped()  ⇒ boolean

如果stopPropagation()そのイベントのインスタンスによって呼び出された場合、trueを返します。

live 🐶🔫

推奨されません。使用on 代替。

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

类似delegate現在のセレクタに一致するすべての要素にイベントハンドラを追加します。一致する要素は現在存在するか、将来作成される可能性があります。

off

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

移除通过 on追加されたイベントから特定のイベントハンドラを削除するには、on()追加したのと同じ関数を使用する必要があります。そうでない場合、イベントタイプのみを指定してこのメソッドを呼び出すと、そのタイプのすべてのハンドラが削除されます。引数がない場合は、現在の要素からすべてのハンドラが削除されます。全部登録されたイベント。

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+

オブジェクトコレクション内の要素にイベントハンドラを追加します。複数のイベントはスペース区切りの文字列、またはイベントタイプをキーとし関数を値とするオブジェクトとして追加できます。CSSセレクタが指定された場合、イベントがそのセレクタに一致する要素で発生したときにのみトリガーされます(愚人码头注:イベント委譲、つまりイベントプロキシ)。

如果给定dataパラメータ。この値はイベントハンドラの実行中に有用な値として使用されます。 event.data 属性

イベントハンドラは、ハンドラが追加された要素、またはセレクタが指定された場合はそのセレクタに一致する要素のコンテキストで実行されます(愚人码头注:thisはイベントをトリガーした要素を指します)。false,preventDefault()とstopPropagation()現在のイベントによって呼び出された場合、リンクなどのデフォルトのブラウザ操作を防止します。

如果falseコールバック関数の代わりにこのメソッドへの引数として渡される場合、直接戻り値を返す関数を渡すことと同等です。false。(愚人码头注:まもなくfalse 当作 function(e){ ... }のパラメータとして、function(){ return false; }の省略形、例えば:$("a.disabled").on("click", false);これは相当する$("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+

要素にイベントハンドラを追加します。イベントが最初に実行された後、そのイベントは自動的にバインドが解除され、ハンドラ関数が各要素で最大1回だけ実行されることが保証されます。selectorとdataなどのパラメータの説明は〜を参照してください。.on()。

trigger

trigger(event, [args])  ⇒ self

オブジェクトコレクション内の要素で指定されたイベントをトリガーします。イベントは文字列タイプ、または$.Event定義されたイベントオブジェクトを指定できます。argsパラメータが指定された場合、それはイベント関数に引数として渡されます。

// 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はDOM要素上でのみイベントのトリガーをサポートしています。

triggerHandler

triggerHandler(event, [args])  ⇒ self

像 trigger現在の要素上でのみイベントをトリガーし、バブリングはしません。


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

移除通过 bind登録されたイベント。

undelegate 🐶🔫

Deprecated, use off instead.

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

移除通过delegate登録されたイベント。


Ajaxリクエスト

$.ajax

$.ajax(options)  ⇒ XMLHttpRequest

Ajaxリクエストを実行します。ローカルリソース、またはHTTP access controlをサポートするブラウザ、または...を介して実行できます。JSONPクロスドメインを実現します。

选项:

  • type(默认: “GET”):请求方法 (“GET”, “POST”, or other)
  • url(デフォルト:現在のアドレス):リクエストを送信するアドレス。
  • data(デフォルト:なし):サーバーに送信するデータ。GETリクエストの場合、自動的にURLにパラメータとして連結されます。String以外のオブジェクトは...を介して処理されます。$.paramシリアライズされた文字列を取得します。
  • processData(デフォルト:true):GET以外のリクエストの場合。データを自動的に処理するかどうか。data文字列に変換します。
  • contentType(デフォルト:"application/x-www-form-urlencoded"):情報をサーバーに送信する際のコンテンツエンコーディングタイプ。(これは...を設定することでも指定できます。headers)。設定によってfalseデフォルト値の設定をスキップします。
  • mimeType(デフォルト:なし):レスポンスのMIMEタイプを上書きします。v1.1+
  • dataType(デフォルト:なし):サーバーが返すと予期されるデータタイプ(“json”、“jsonp”、“xml”、“html”、“text”)
  • jsonp(デフォルト:"callback"):JSONPコールバックのクエリパラメータ名。
  • jsonpCallback(デフォルト:"jsonp{N}"):グローバルJSONPコールバック関数の文字列名(またはそれを返す関数)。これを設定するとブラウザのキャッシュが有効になります。v1.1+
  • timeout (默认: 0):ミリ秒単位のリクエストタイムアウト時間。0タイムアウトしないことを示します。
  • headers:Ajaxリクエスト内の追加のHTTPヘッダーオブジェクト。
  • async(デフォルト:true):デフォルト設定では、すべてのリクエストは非同期です。同期リクエストを送信する必要がある場合は、これをfalseに設定してください。false。
  • global(デフォルト:true):リクエストはグローバルなAjaxイベントハンドラをトリガーします。falseに設定すると、グローバルなAjaxイベントはトリガーされません。
  • context(デフォルト:window): このオブジェクトはAjax関連コールバック関数のコンテキスト(thisの指す先)を設定するために使用されます。
  • traditional(デフォルト:false):...を介して従来の方法を有効にします。$.paramシリアライズされた〜を取得するdata。
  • cache(デフォルト:true):ブラウザがGETレスポンスをキャッシュすることを許可するかどうか。v1.1.4以降、dataTypeオプションが...の場合。 "script" 或 jsonp時、デフォルトはfalse。
  • xhrFields(デフォルト:なし): オブジェクトに含まれるプロパティはXMLHttpRequestのインスタンスに文字通りコピーされます。v1.1+
  • username & password(デフォルト:なし):HTTP基本認証資格情報。v1.1+

URLに〜が含まれている場合=?或者dataType"jsonp"の場合、このリクエストは...を注入することによって実行されます。<script>タグを使用してXMLHttpRequestの代わりにします(参照JSONP)。此时 contentType, dataType, headers有限制,asyncサポートされていません。

Ajaxコールバック関数

以下のコールバック関数を指定できます。これらは指定された順序で実行されます:

  1. beforeSend(xhr, settings):リクエスト送信前に呼び出されます。xhrオブジェクトとsettingsをパラメータオブジェクトとして受け取ります。もしfalseを返した場合。false、リクエストはキャンセルされます。

  2. success(data, status, xhr):リクエスト成功後に呼び出されます。返されたデータと、成功コードを含む文字列が渡されます。

  3. error(xhr, errorType, error):リクエストエラー時に呼び出されます。(タイムアウト、解析エラー、またはステータスコードがHTTP 2xx以外の場合)。

  4. complete(xhr, status):リクエスト完了時に呼び出されます。失敗か成功かに関係なく。

Promiseコールバックインターフェースv1.1+

オプションの“callbacks”および“deferred”モジュールがロードされた場合、から$.ajax()返されたXHRオブジェクトはpromiseインターフェースを実装し、チェーン可能なコールバックを提供します:

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

これらのメソッドは〜の代わりになりますsuccess, error、およびcomplete 回调选项.

Ajax 事件

当global: trueの場合。Ajaxリクエストのライフサイクル中に、以下のイベントがトリガーされます。

  1. ajaxStart (global):他のAjaxリクエストが現在アクティブでない場合にトリガーされます。

  2. ajaxBeforeSend(data: xhr, options):リクエスト送信前に、キャンセルすることができます。

  3. ajaxSend (data: xhr, options):像 ajaxBeforeSend、ただしキャンセルはできません。

  4. ajaxSuccess (data: xhr, options, data):当返回成功时。

  5. ajaxError (data: xhr, options, error):当有错误时。

  6. ajaxComplete(data: xhr, options):リクエストが完了した後、成功か失敗かに関係なく呼び出されます。

  7. ajaxStop (global):これが最後のアクティブなAjaxリクエストである場合にトリガーされます。

デフォルトでは、Ajaxイベントはdocumentオブジェクト上でトリガーされます。ただし、リクエストのcontextがDOMノードの場合、イベントはこのノード上でトリガーされ、DOM内をバブリングします。唯一の例外は...ajaxStart & ajaxStopこの2つのグローバルイベント。

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

推奨されません。使用$.ajax 代替。

$.ajaxJSONP(options)  ⇒ mock XMLHttpRequest

JSONPでクロスドメインデータを取得します。

この方法は比較の$.ajax利点がないため、使用しないことをお勧めします。

$.ajaxSettings

Ajaxリクエストのデフォルト設定を含むオブジェクト。ほとんどの設定は$.ajaxで説明されています。以下の設定はグローバルに非常に有用です:

  • timeout (默认: 0):Ajaxリクエストにゼロ以外の値を設定して、デフォルトのタイムアウトをミリ秒単位で指定します。
  • global(デフォルト:true):falseに設定すると、Ajaxイベントのトリガーを防止します。
  • xhr(デフォルト:XMLHttpRequest factory):XMLHttpRequestインスタンス(または互換性のあるオブジェクト)を返す関数に設定します
  • accepts:サーバーからリクエストするMIMEタイプを指定します。dataType值:
    • 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+

Ajax GETリクエストを実行します。これは...の省略形です。$.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+

Ajax GETリクエストを介してJSONデータを取得します。これは...の省略形です。$.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

オブジェクトをシリアライズし、Ajaxリクエストで送信されるデータをURLエンコードされたクエリ文字列として表現します。shallowがtrueに設定されている場合、ネストされたオブジェクトはシリアライズされず、ネストされた配列の値はそのキーにブラケットが使用されません。

オブジェクトのプロパティ値が関数である場合(文字列ではなく)、その関数が呼び出され、その戻り値がシリアライズされます。

さらに、〜も受け付けますserializeArray形式の配列。各項目は"name"プロパティと"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

Ajax POSTリクエストを実行します。これは...の省略形です。$.ajaxの略記法。

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

dataパラメータは文字列にすることができます:

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

load

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

GET AjaxでリモートのHTMLコンテンツコードをロードし、現在のコレクションに挿入します。また、CSSセレクタをURLに指定することができます。このように、セレクタに一致するHTMLコンテンツを使用してコレクションを更新できます。

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

CSSセレクタが指定されていない場合、返された完全なテキストが使用されます。

セレクタがない場合、すべてのJavaScriptブロックが実行されることに注意してください。セレクタを指定した場合、セレクタに一致する要素内のscriptは削除されます。


フォームメソッド

serialize

serialize()  ⇒ string

Ajax POSTリクエストで送信されるフォーム要素の値をURLエンコードされた文字列にコンパイルします。

serializeArray

serializeArray()  ⇒ array

送信されるフォーム要素の値を...を持つ配列にコンパイルします。nameとvalueオブジェクトで構成される配列。使用できないフォーム要素、buttons、未チェックのradio buttons/checkboxs はスキップされます。結果にはfile inputsのデータは含まれません。

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

submit

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

"submit"イベントにハンドラ関数をバインドするか、要素上で"submit"イベントをトリガーします。functionパラメータが指定されていない場合、現在のフォームの"submit"イベントがトリガーされ、デフォルトのフォーム送信動作が実行されます。ただし、...が呼び出された場合を除きます。preventDefault()。

functionパラメータが指定された場合、現在の要素上で単に"submit"イベントにハンドラ関数をバインドします。


Effects

$.fx

グローバルなアニメーション設定:

  • $.fx.off(CSS transitionをサポートするブラウザではデフォルトでfalse):trueに設定すると、すべてのアニメーションを無効にします。animate() transitions。

  • $.fx.speeds:アニメーションの時間を設定するためのオブジェクト。

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

既存の値を変更するか、新しいプロパティを追加して、文字列を使用して時間設定を行うアニメーションに影響を与えます。

animate

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

現在のオブジェクトコレクション内の要素に対してCSS transitionプロパティのスムーズなトランジションを実行します。

  • properties:CSSアニメーションの値、またはCSSキーフレームアニメーションの名前を含むオブジェクト。
  • duration(デフォルト:400):ミリ秒単位の時間、または文字列。
    • fast (200 ms)
    • slow (600 ms)
    • 任何$.fx.speeds自定义属性
  • easing (默认 linear):アニメーションのイージングタイプを指定します。次のいずれかを使用します:
  • complete:アニメーション完了時のコールバック関数
  • li>delay: ミリ秒単位のトランジション遅延時間v1.1+

Zeptoは以下もサポートしていますCSS transform 属性:

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

durationパラメータが〜の場合0 或 $.fx.offtrueの場合(CSS transitionsをサポートしないブラウザではデフォルトでtrue)、アニメーションは実行されず、代わりにアニメーション効果の目標位置が即座に適用されます。同様に、指定されたアニメーションがアニメーションによって完了しない場合、アニメーションの目標位置が即座に適用されます。この場合、アニメーションはなく、completeメソッドも呼び出されません。

最初の引数がオブジェクトではなく文字列の場合、それはCSSキーフレームアニメーションとして扱われます。CSS keyframe animationの名称。

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

ZeptoはCSSトランジション効果のアニメーションのみを使用します。jQueryのイージングはサポートされていません。jQueryの相対変化("=+10px")構文もサポートされていません。...を参照してください。list of animatable propertiesブラウザのサポートは異なる場合があるため、必ずサポートしたいブラウザでテストしてください。


Touch

Touch events

「touch」モジュールには以下のイベントが追加され、使用することができます。onとoff。

  • tap—要素がタップされたときにトリガーされます。
  • singleTap and doubleTap— この一対のイベントは、要素上のシングルクリックとダブルクリックを検出するために使用できます。(シングルクリック、ダブルクリックを検出する必要がない場合は、次を使用してください)tap 代替)。
  • longTap— 要素が750ms以上押し続けられたときにトリガーされます。
  • swipe, swipeLeft, swipeRight, swipeUp, swipeDown— 要素がスワイプされたときにトリガーされます。(指定した方向を選択可能)

これらのイベントは、すべての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>

Change Log

v1.1.0 — 05 Dec 2013 — diff

Notable changes

  • IE10+ support
  • Huge speed optimizations for simple CSS selectors (classname, ID) and DOM element creation
  • Provide $.Callbacks and $.Deferred in optional modules
  • Removed fx and detect modules from default build

Ajax

  • New supported $.ajax() options:
    • xhrFields
    • mimeType
    • jsonpCallback
    • username & password
  • Promise interface supported when loading the optional “callbacks” and “deferred” modules:
    • xhr.done(function(data, status, xhr){ ... })
    • xhr.fail(function(xhr, errorType, error){ ... })
    • xhr.always(function(){ ... })
  • Enable mutating Ajax settings in the beforeSend callback
  • Fix JSONP callbacks for errored responses on Android
  • Ensure consistent Accept request HTTP header across browsers
  • Fix $.param() for jQuery compatibility when handling complex nested objects
  • Support IIS JavaScript MIME type
  • Pass “abort” and “timeout” status to global ajaxError event handlers

Event

  • Provide isDefaultPrevented(), stopImmediatePropagation(), and related methods for all events
  • Support the data argument in .bind(), .on(), and .one()
  • Support CSS selector argument in .one() for event delegation
  • Support .on('ready') as an alias for .ready()
  • Enable event handlers on plain old JS objects
  • Many fixes related to event delegation

Data

  • Cleanup .data() values on DOM element removal with .remove/empty()
  • .data() now assumes that numbers that begin with zeroes are strings
  • .removeData() (no argument) now removes all data on the element
  • Enable reading data-* attributes that have underscores in the name

Misc.

  • Support simple DOM property names in .prop(name) such as for, class, readonly…
  • Implement the .scrollLeft([value]) method
  • Support setting .scrollTop(value)
  • Fix $(document).width/height()
  • Support fetching multiple CSS values via array in .css(['prop1', 'prop2', ...])
  • Support setting CSS transition delay via delay option for .animate()
  • Ensure that .animate() callback always firesParty like it’s one-oh!_

v1.0 — 02 Mar 2013 — diff

Party like it’s one-oh!

Notable changes

  • Zepto is now compatible with Twitter Bootstrap
  • Portable, completely new node.js-based build system
  • Fully automated tests with PhantomJS and Travis CI
  • Removed touch module from default distribution

New features

  • $.fn.filter(function(index){ ... })
  • $.fn.contents()
  • $.fn.wrapInner()
  • $.fn.scrollTop()
  • $.contains()
  • $.fn.has()
  • $.fn.position()
  • $.fn.offsetParent()
  • $.parseJSON()
  • $.camelCase()
  • $.isWindow()
  • $.grep() (interface to Array.filter)
  • Support $(html, attributes) syntax for element creation
  • Emulate mouseenter and mouseleave events
  • Bootstrap compat: support $.fn.offset(coordinates)
  • Bootstrap compat: implement $.fn.detach()
  • Add support for Ajax cache: false option
  • Prevent scrolling when horizontal swipe events are detected
  • cancelTouch for tap events
  • prev and next now support an optional selector argument
  • $.fn.find and $.fn.closest now support Zepto objects as arguments
  • Enable deep copy via $.extend(true, target, source)
  • Enable nested structures for $.fn.wrap() and $.fn.wrapAll()
  • Enable function arguments for $.fn.wrap() and $.fn.wrapInner()
  • Support number, boolean, JSON types in data attributes
  • Support manipulating classnames on SVG elements
  • Enable named durations for animate, e.g. slow.
  • Support timing-function for animate
  • Support event properties passed to $.fn.trigger() or $.Event()
  • Selector module: support child > * queries
  • Add detect support for mobile Chrome browser
  • Add $.os.phone and $.os.tablet (booleans)
  • Detect Firefox mobile, Playbooks and BB10

Fixes

  • Fix passing null selector to on or off
  • Fixed bug where self-closing html tags would act as open tags
  • Fix val for multiple select
  • Fix various touch and gesture bugs.
  • Corrected parameters of load success callback to match jQuery.
  • Fix css with 0 values and falsy values
  • Fix a css performance issues with string values
  • Fix $.ajaxJSONP when invoked directly
  • Fix animate with 0 durations.
  • Fix toggle and fadeToggle for multiple elements.
  • Fix ajax $.fn.load behavior with selector
  • Make attr(name, null) unset attribute
  • Fix animate in Firefox
  • Fix animate for elements just added to DOM
  • Fix an escaping issue with $.param
  • Respect traditional: true option in $.ajax
  • Fix focus & blur event delegation and enable unbind
  • Simple wrapping for any object passed to $()
  • Enable children method for XML documents
  • Don’t eval <script> content when src is present
  • Support processData option for $.ajax()
  • Enable passing contentType: false to $.ajax()
  • Apply focus() and blur() to all elements in collection
  • Change $.fn.map() to return a Zepto collection
  • Selector argument for on(evt, selector, fn) can be false
  • Don’t raise error on $('#')
  • Provide empty object in $.support
  • return false in event handler calls stopPropagation()
  • Fix $.isPlainObject() for window in Opera
  • $.ajax error callback correctly reports abort status
  • Fix hasClass in collections of multiple elements
  • Stop iteration in each() when the callback returns false
  • Add ability to set xhr factory per-request
  • Have get() method accept negative index
  • Support for multiple class names in toggleClass()
  • Fix error callbacks for ajaxJSONP
  • Support optional data argument for various Ajax methods
  • Fix DOM insertion operators for null values
  • Fix dataType being set for $.getJSON

v1.0rc1 — 09 Apr 2012 — diff

The semicolon-free edition! That’s right, we removed all trailing semicolons from the source and tests. They were never needed anyway.

New methods:

New module:

  • “selector.js” with experimental support for jQuery CSS pseudo-selectors such as :visible and :first

Improvements in core:

  • added missing methods for Ember.js compatibility
  • improved creating DOM fragments from HTML with $()
  • enable append & family to accept multiple arguments
  • fix $.each context
  • fix calling get without index
  • fix calling val on empty collection
  • using css(property, '') removes the property
  • fix filter, is, and closest when operating on nodes that are detached from the document
  • remove end & andSelf from core to the new “stack.js” plugin
  • exposed important internal Zepto functions through the $.zepto object for extending or overriding Zepto functionality.
  • data method returns undefined when there is no data
  • support camelized names in data method

Apart from improving the basic data method in core, the “data.js” module got improvements as well:

  • better jQuery compatibility
  • ability to store functions
  • new removeData method

Ajax:

  • have correct ajaxComplete argument order for JSONP abort and timeout
  • JSONP requests that hit a 404 will now correctly invoke the error callback
  • add support for dataType: 'jsonp' in $.ajax
  • add support for data in $.ajaxJSONP
  • HTTP 304 status is treated as success instead of an error
  • made load more compatible with jQuery
  • allow Content-Type to be set via request headers
  • respect Content-Type of the response if dataType isn’t set
  • work around Chrome CORS bug when data is empty

Changes in other modules:

  • fix animate for edge cases such as when there is an animation within an animated element, and improve handling of transition CSS properties
  • new “singleTap” event
  • improved “longTap” detection

0.8 — 03 Nov 2011 — diff

  • CSS transitions for every browser with animate() method;
  • unified event handling with fn.on() & off();
  • Ajax global events & timeout support;
  • performance boost for selectors.

See full release notes.

0.7 — 01 Aug 2011 — diff

  • add $.each, $.map, $.slice;
  • add .serializeArray(), .serialize();
  • add .triggerHandler();
  • add .wrap, .wrapAll, .unwrap, .width/height setters, .append (and friends) improvements;
  • add “longTap” event;
  • .anim() accepts CSS transform properties;
  • return false in event handlers cancels browser event behavior.

0.6 — 14 May 2011 — diff

  • add .add, .appendTo, .prependTo, .replaceWith, .empty, .submit;
  • allow function args for .add/.remove/.toggleClass;
  • improvements to events and xhr.

0.5 — 01 Mar 2011 — diff

  • add .not, .children, .siblings, $.param;
  • improve .attr & .html;
  • support callback for .anim.

0.4 — 21 Jan 2011 — diff

  • JSONP;
  • better .find, .each, .closest;
  • add .eq, .size, .parent, .parents, .removeAttr, .val;
  • support function args in .html, .attr;
  • adjacency methods now take Zepto objects.

0.3 — 17 Dec 2010 — diff

  • add .toggleClass, .attr setter, .last, .undelegate, .die;
  • proxied event objects for event delegation;
  • support $ fragments.

0.2 — 01 Dec 2010 — diff

  • now compatible with backbone.js;
  • support event unbind;
  • ajax posts with data.

Acknowledgements & Thanks

A big Thank-You goes out to all of our awesome Zepto.js contributors. May you all forever bask in glory.

The Zepto API is based on jQuery's Core API, which is released under the MIT license.

This documentation is based on the layout of the Backbone.js documentation, which is released under the MIT license.

© 2010-2014 Thomas Fuchs, Freckle Online Time Tracking
Zepto and this documentation is released under the terms of the MIT license.