💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
# 核心方法 ## $() ``` $(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节点时。也可以通过给定一组属性映射来创建节点。最快的创建但元素,使用`&lt;div&gt;` 或 `&lt;div/&gt;`形式。 当一个函数附加在 `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参数,返回第一个元素的值。如果是`&lt;select multiple&gt;`标签,则返回一个数组。当给定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>') ```