核心方法 · Zepto.js API 中文文檔 1.1.6

# 核心方法 ## $() ``` $(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`)，文檔對象中的所有方法都是集合方法。如果選擇器中存在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 擴展](http://api.jquery.com/category/selectors/jquery-selector-extensions/)，然而，可選的“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 ``` 遍歷數組元素或以key-value值對方式遍歷對象。回調函數返回 `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()`](#addClass)， [`attr()`](#attr)，和其它方法。在這個對象添加一個方法，所有的Zepto對象上都能用到該方法。這里有一個實現 Zepto 的 [`empty()`](#empty) 方法的例子： ``` $.fn.empty = function(){ return this.each(function(){ this.innerHTML = '' }) } ``` ## $.grep v1.0+ ``` $.grep(items, function(item){ ... }) => array ``` 獲取一個新數組，新數組只包含回調函數中返回 ture 的數組項。 ``` $.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，則返回ture。 ## $.isFunction ``` $.isFunction(object) => boolean ``` 如果object是function，則返回ture。 ## $.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`校驗這些objects的時候會失敗。 ## $.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](#$.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](#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](#removeAttr))，多個屬性可以通過對象鍵值對的方式進行設置。要讀取DOM的屬性如 `checked`和`selected`, 使用 [prop](#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 ``` 獲得每個匹配元素集合元素的直接子元素，如果給定selector，那么返回的結果中只包含符合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)`](#parents)有點相像，但它只返回最先匹配的祖先元素。如果參數是一個Zepto對象集合或者一個元素，結果必須匹配給定的元素而不是選擇器。 ``` var input = $('input[type=text]') input.closest('form') ``` ## concat ``` concat(nodes, [node2, ...]) => self ``` 添加元素到一個Zepto對象集合形成一個新數組。如果參數是一個數組，那么這個數組中的元素將會合并到Zepto對象集合中。這是一個Zepto提供的方法，不是jquey的API 。 ## contents v1.0+ ``` contents() => collection ``` 獲得每個匹配元素集合元素的子元素，包括文字和注釋節點。（愚人碼頭注：.contents()和[.children()](#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](#attr) ，但是屬性名稱前面加上 `data-`。當讀取屬性值時，會有下列轉換：v1.0+ * “true”, “false”, and “null” 被轉換為相應的類型； * 數字值轉換為實際的數字類型； * JSON值將會被解析，如果它是有效的JSON； * 其它的一切作為字符串返回。 Zepto 基本實現`data()`只能存儲字符串。如果你要存儲任意對象，請引入可選的“data”模塊到你構建的Zepto中。 ## each ``` each(function(index, item){ ... }) => self ``` 遍歷一個對象集合每個元素。在迭代函數中，`this`關鍵字指向當前項(作為函數的第二個參數傳遞)。如果迭代函數返回 `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](#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](#each)，但是遍歷函數的參數不一樣，當函數返回 `false` 的時候，遍歷不會停止。這是一個Zepto提供的方法，不是jquery的API。 ## get ``` get() => array get(index) => DOM node ``` 從當前對象集合中獲取所有元素或單個元素。當index參數不存在的時，以普通數組的方式返回所有的元素。當指定index時，只返回該置的元素。這點與[eq](#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](#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](#index) is recommended over this method. 在當前對象集合中獲取一個元素的索引值（愚人碼頭注：從0開始計數）。如果給定formindex參數，從該位置開始往后查找，返回基于0的索引值，如果沒找到，則返回`-1`。[index](#index) 方法是基于這個方法實現的。這是一個Zepto的方法，不是jquer的api。 ## insertAfter ``` insertAfter(target) => self ``` 將集合中的元素插入到指定的目標元素后面（愚人碼頭注：外部插入）。這個有點像 [after](#after)，但是使用方式相反。 ``` $('<p>Emphasis mine.</p>').insertAfter('blockquote') ``` ## insertBefore ``` insertBefore(target) => self ``` 將集合中的元素插入到指定的目標元素前面（愚人碼頭注：外部插入）。這個有點像 [before](#before)，但是使用方式相反。 ``` $('<p>See the following table:</p>').insertBefore('table') ``` ## is ``` is(selector) => boolean ``` 判斷當前元素集合中的第一個元素是否符css選擇器。對于基礎支持jquery的非標準選擇器類似： `:visible`包含在可選的“selector”模塊中。 [jQuery CSS extensions](http://api.jquery.com/category/selectors/jquery-selector-extensions/) 不被支持。選擇“selector”模塊僅僅能支持有限幾個最常用的方式。 ## last ``` last() => collection ``` 獲取對象集合中最后一個元素。 ``` $('li').last() ``` ## map ``` map(function(index, item){ ... }) => collection ``` 遍歷對象集合中的所有元素。通過遍歷函數返回值形成一個新的集合對象。在遍歷函數中`this`關鍵之指向當前循環的項（遍歷函數中的第二個參數）。遍歷中返回 `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](#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” or “fixed” ## parent ``` parent([selector]) => collection ``` 獲取對象集合中每個元素的直接父元素。如果css選擇器參數給出。過濾出符合條件的元素。 ## parents ``` parents([selector]) => collection ``` 獲取對象集合每個元素所有的祖先元素。如果css選擇器參數給出，過濾出符合條件的元素。如果想獲取直接父級元素，使用 [parent](#parent)。如果只想獲取到第一個符合css選擇器的元素，使用[closest](#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](#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 ``` 將參數內容插入到每個匹配元素的前面（愚人碼頭注：元素內部插入）。插入d的元素可以試html字符串片段，一個dom節點，或者一個節點的數組。 ``` $('ul').prepend('<li>first list item</li>') ``` ## prependTo ``` prependTo(target) => self ``` 將所有元素插入到目標前面（愚人碼頭注：元素內部插入）。這有點像[prepend](#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](#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](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/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參數名稱可以利用空格分隔。下例移除了兩個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](#before)中描述的類型。 ## scrollLeft v1.1+ ``` scrollLeft() => number scrollLeft(value) => self ``` 獲取或設置頁面上的滾動元素或者整個窗口向右滾動的像素值。 ## scrollTop v1.0+ ``` scrollTop() => number scrollTop(value) => self v1.1+ ``` 獲取或設置頁面上的滾動元素或者整個窗口向下滾動的像素值。 ## show ``` show() => self ``` 恢復對象集合中每個元素默認的“display”值。如果你用 [hide](#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)，與它不同的是它不能用來獲取或設置 HTML。 ## toggle ``` toggle([setting]) => self ``` 顯示或隱藏匹配元素。如果 `setting`為true，相當于[show](#show) 法。如果`setting`為false。相當于 [hide](#hide)方法。 ``` var input = $('input[type=text]') $('#too_long').toggle(input.val().length > 140) ``` ## toggleClass ``` toggleClass(names, [setting]) => self toggleClass(function(index, oldClassNames){ ... }, [setting]) => self ``` 在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類。如果class的名稱存在則刪除它，如果不存在，就添加它。如果 `setting`的值為真，這個功能類似于 [addClass](#addClass)，如果為假，這個功能類似與 [removeClass](#removeClass)。 ## unwrap ``` unwrap() => self ``` 移除集合中每個元素的直接父節點，并把他們的子元素保留在原來的位置。基本上，這種方法刪除上一的祖先元素，同時保持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節點。還可以是一個生成用來包元素的回調函數，這個函數返回前兩種類型的包裹片段。 **需要提醒的是：**該方法對于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節點，或者是一個生成用來包元素的回調函數，這個函數返回前兩種類型的包裹片段。 ``` // 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>') ```