学习文档3

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”将会自动添加到该属性上。

1
2
3
4
5
6
7
8
9
10

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”, and “null” 被转换为相应的类型；
• 数字值转换为实际的数字类型；
• JSON值将会被解析，如果它是有效的JSON；
• 其它的一切作为字符串返回。

Zepto 基本实现data()只能存储字符串。如果你要存储任意对象，请引入可选的“data”模块到你构建的Zepto中。

each

each(function(index, item){ … }) ⇒ self
遍历一个对象集合每个元素。在迭代函数中，this关键字指向当前项(作为函数的第二个参数传递)。如果迭代函数返回 false，遍历结束。

1 2 3

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

empty

empty() ⇒ self
清空对象集合中每个元素的DOM内容。

eq

eq(index) ⇒ collection

从当前对象集合中获取给定索引值（愚人码头注：以0为基数）的元素。

1
2
3

$('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集合对象中时，才回被返回。

1
2

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对象集合。

  1 2 3

  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节点的对象。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  $('ol > li').has('a[href]') //=> get only LI elements that contain links ## hasClass > hasClass(name) ⇒ boolean 检查对象集合中是否有元素含有指定的class。 ```html <ul> <li>list item 1</li> <li class="yaotaiyang">list item 2</li> <li>list item 3</li> </ul> <p>a paragraph</p>

1
2
3
4

<script type="text/javascript">
    $("li").hasClass("yaotaiyang");
  //=> true
</script>

height

height() ⇒ number
height(value) ⇒ self
height(function(index, oldHeight){ … }) ⇒ self

获取对象集合中第一个元素的高度；或者设置对象集合中所有元素的高度。

1
2
3

$('#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中描述的所有类型。

1
2
3
4
5
6

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

1
2

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

indexOf

indexOf(element, [fromIndex]) ⇒ number

在当前对象集合中获取一个元素的索引值（愚人码头注：从0开始计数）。

• 如果给定formindex参数，从该位置开始往后查找，返回基于0的索引值，
• 如果没找到，则返回-1。

index 方法是基于这个方法实现的。

这是一个Zepto的方法，不是jquer的api。

insertAfter

insertAfter(target) ⇒ self

将集合中的元素插入到指定的目标元素后面（愚人码头注：外部插入）。
这个有点像 after，但是使用方式相反。

1

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

insertBefore

insertBefore(target) ⇒ self

将集合中的元素插入到指定的目标元素前面（愚人码头注：外部插入）。这个有点像 before，但是使用方式相反。

1

$('<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关键之指向当前循环的项（遍历函数中的第二个参数）。

• 遍历中返回 null和undefined，遍历将结束。

1

elements.map(function(){ return $(this).text() }).get().join(', ')

next

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

• 获取对象集合中每一个元素的下一个兄弟节点(可以选择性的带上过滤选择器)。

1

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

not

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

• 过滤当前对象集合，获取一个新的对象集合，它里面的元素不能匹配css选择器。
• 如果另一个参数为Zepto对象集合，那么返回的新Zepto对象中的元素都不包含在该参数对象中。
• 如果参数是一个函数。仅仅包含函数执行为false值得时候的元素，函数的 this 关键字指向当前循环元素。

与它相反的功能，查看 filter.

parent

parent([selector]) ⇒ collection

获取对象集合中每个元素的直接父元素。如果css选择器参数给出。过滤出符合条件的元素。

parents

parents([selector]) ⇒ collection

• 获取对象集合每个元素所有的祖先元素。如果css选择器参数给出，过滤出符合条件的元素。

• 如果想获取直接父级元素，使用 parent。

• 如果只想获取到第一个符合css选择器的元素，使用closest。

1

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

pluck

pluck(property) ⇒ array

获取对象集合中每一个元素的属性值。返回值为 null或undefined值得过滤掉。

1
2
3
4
5
6

$('body > *').pluck('nodeName') // => ["DIV", "SCRIPT"]
// implementation of Zepto's `next` method
$.fn.next = function(){
  return $(this.pluck('nextElementSibling'))
}

这是一个Zepto的方法，不是jquery的api

prepend
prepend(content) ⇒ self
将参数内容插入到每个匹配元素的前面（愚人码头注：元素内部插入）。插入d的元素可以试html字符串片段，一个dom节点，或者一个节点的数组。

$(‘ul’).prepend(‘

$(‘

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参数名称可以利用空格分隔。下例移除了两个class。

removeProp v1.2+
removeProp(name) ⇒ self
从集合的每个DOM节点中删除一个属性。这是用JavaScript的delete操作符完成。值得注意的是如果尝试删除DOM的一些内置属性，如className或maxLength，将不会有任何效果，因为浏览器禁止删除这些属性。

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 法。如果setting为false。相当于 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，如果为假，这个功能类似与 removeClass。

unwrap
unwrap() ⇒ self
移除集合中每个元素的直接父节点，并把他们的子元素保留在原来的位置。 基本上，这种方法删除上一的祖先元素，同时保持DOM中的当前元素。

$(document.body).append(‘

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(‘‘)

// wrap each code block in a div and pre:
$(‘code’).wrap(‘

// wrap all form inputs in a span with classname
// corresponding to input type:
$(‘input’).wrap(function(index){
return ‘‘
})
//=> ,
//

// WARNING: will not work as expected!
$(‘broken‘).wrap(‘

// wrap all buttons in a single div:
$(‘a.button’).wrapAll(‘

// wrap the contents of each navigation link in a span:
$(‘nav a’).wrapInner(‘‘)

// wrap the contents of each list item in a paragraph and emphasis:
$(‘ol li’).wrapInner(‘