ブラウザ(Safari、Chrome、Firefox)上でページアプリケーションを開発したり、HTMLベースのweb-viewローカルアプリを構築したりする場合、あなたがPhoneGap、Zeptoを使用するのは良い選択です。
要するに、Zeptoはすべてのモダンブラウザで基本環境として使用されることを意図しています。Zeptoは旧バージョンのInternet Explorer(<10)をサポートしていません。
コアメソッド
$()
$(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+
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
現在のオブジェクトコレクション内の最初の要素を取得します。
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
オブジェクトコレクション内の最後の要素を取得します。
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コールバック関数
以下のコールバック関数を指定できます。これらは指定された順序で実行されます:
-
beforeSend(xhr, settings):リクエスト送信前に呼び出されます。xhrオブジェクトとsettingsをパラメータオブジェクトとして受け取ります。もしfalseを返した場合。false、リクエストはキャンセルされます。
-
success(data, status, xhr):リクエスト成功後に呼び出されます。返されたデータと、成功コードを含む文字列が渡されます。
-
error(xhr, errorType, error):リクエストエラー時に呼び出されます。(タイムアウト、解析エラー、またはステータスコードがHTTP 2xx以外の場合)。
-
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リクエストのライフサイクル中に、以下のイベントがトリガーされます。
-
ajaxStart (global):他のAjaxリクエストが現在アクティブでない場合にトリガーされます。
-
ajaxBeforeSend(data: xhr, options):リクエスト送信前に、キャンセルすることができます。
-
ajaxSend (data: xhr, options):像 ajaxBeforeSend、ただしキャンセルはできません。
-
ajaxSuccess (data: xhr, options, data):当返回成功时。
-
ajaxError (data: xhr, options, error):当有错误时。
-
ajaxComplete(data: xhr, options):リクエストが完了した後、成功か失敗かに関係なく呼び出されます。
-
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
グローバルなアニメーション設定:
既存の値を変更するか、新しいプロパティを追加して、文字列を使用して時間設定を行うアニメーションに影響を与えます。
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):ミリ秒単位の時間、または文字列。
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.
0.1
— 26 Oct 2010
First. Release. Ever.
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.