jQuery杂项
jQuery属性操作
一、prop()方法
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。
也就是说prop()方法用于设置标签本身就有的属性
提示：如需检索 HTML 属性，请使用 attr() 方法代替。
提示：如需移除属性，请使用 removeProp() 方法。
语法
返回属性的值：
$(selector).prop(property)
设置属性和值：
$(selector).prop(property,value)
使用函数设置属性和值：
$(selector).prop(property,function(index,currentvalue))
设置多个属性和值：
$(selector).prop({property:value, property:value,...})
| 参数 | 描述 |
|---|---|
| property | 规定属性的名称。 |
| value | 规定属性的值。 |
| function(index,currentvalue) | 规定返回要设置的属性值的函数。 index - 检索集合中元素的 index 位置。 currentvalue - 检索被选元素的当前属性值。 |
二、attr()方法
attr() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。
attr()方法可以用来设置自定义属性
语法同prop()一模一样
三、data()方法
data() 方法向被选元素附加数据，或者从被选元素获取数据。
提示：如需移除数据，请使用 removeData() 方法。
从元素返回数据
从被选元素中返回附加的数据。
语法
$(selector).data(name)
| 参数 | 描述 |
|---|---|
| name | 可选。规定要取回的数据的名称。 如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。 |
向元素附加数据
向被选元素附加数据。
语法
$(selector).data(name,value)
| 参数 | 描述 |
|---|---|
| name | 必需。规定要设置的数据的名称。 |
| value | 必需。规定要设置的数据的值。 |
使用对象向元素附加数据
使用带有名称/值对的对象向被选元素附加数据。
语法
$(selector).data(object)
| 参数 | 描述 |
|---|---|
| object | 必需。规定包含名称/值对的对象。 |
jQuery文本操作
html()方法
html() 方法设置或返回被选元素的内容（innerHTML）。
当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。
语法
返回内容：
$(selector).html()
设置内容：
$(selector).html(content)
使用函数设置内容：
$(selector).html(function(index,currentcontent))
| 参数 | 描述 |
|---|---|
| content | 必需。规定被选元素的新内容（可包含 HTML 标签）。 |
| function(index,currentcontent) | 可选。规定返回被选元素的新内容的函数。 index - 返回集合中元素的 index 位置。 currentcontent - 返回被选元素的当前 HTML 内容。 |
text()方法
text() 方法设置或返回被选元素的文本内容。
当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如需设置或返回被选元素的 innerHTML（文本 + HTML 标记），请使用 html() 方法。
其语法与参数与html()一模一样
val()方法
val() 方法返回或设置被选元素的 value 属性。
**当用于返回值时：
**该方法返回第一个匹配元素的 value 属性的值。
**当用于设置值时：
**该方法设置所有匹配元素的 value 属性的值。
注意：val() 方法通常与 HTML 表单元素一起使用。
其语法与参数与html()一模一样
jQuery元素操作
each()方法
遍历一个jQuery对象，为每个匹配元素执行一个函数。
语法
$(selector).each(function(index,element))
| 参数 | 描述 |
|---|---|
| function(index,element) | 必需。为每个匹配元素规定运行的函数。 index - 选择器的 index 位置 element - 当前的元素（也可使用 "this" 选择器） |
.each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。
例，使用each遍历使得元素变色：
1
2
3
tips：你可以使用 'return' 来提前结束 each() 循环。
jQuery.each()方法
一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
语法
jQuery.each( collection, callback(indexInArray, valueOfElement) )
| 参数 | 描述 |
|---|---|
| collection | 类型: Object 遍历的对象或数组 |
| callback(indexInArray, valueOfElement) | 类型: Function() 该函数会在每次迭代时被调用。 |
$.each()函数和 $(selector).each()是不一样的，那个是专门用来遍历一个jQuery对象。$.each()函数可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或数组。在迭代数组的情况下，回调函数每次传递一个数组索引和相应的数组值作为参数。（该值也可以通过访问this关键字得到，但是JavaScript将始终将this值作为一个Object ，即使它是一个简单的字符串或数字值。）该方法返回其第一个参数，这是迭代的对象。
例，遍历一个数组：
例，遍历一个对象：
jQuery DOM元素操作
创建元素
可以直接往$()里添加html标签
var li = $('hello world ');
添加元素
内部添加
append()方法
append() 方法在被选元素的结尾插入指定内容。
提示：如需在被选元素的开头插入内容，请使用 prepend() 方法。
语法
$(selector).append(content,function(index,html))
| 参数 | 描述 |
|---|---|
| content | 必需。规定要插入的内容（可包含 HTML 标签）。 可能的值： HTML 元素 jQuery 对象 DOM 元素 |
| function(index,html) | 可选。规定返回待插入内容的函数。 index - 返回集合中元素的 index 位置。 html - 返回被选元素的当前 HTML。 |
prepend()方法
prepend() 方法在被选元素的开头插入指定内容。
其语法和参数和append一模一样
- 11
- 22
- 33
hello
world
外部添加
before()方法
before() 方法在被选元素之前插入指定的内容。
提示：如需在被选元素后插入内容，请使用 after() 方法。
其语法和参数和append一模一样
after()方法
after() 方法在被选元素后插入指定的内容。
其语法和参数和append一模一样
- 11
- 22
- 33
hello
删除元素
remove()方法
remove() 方法移除被选元素，包括所有的文本和子节点。
该方法也会移除被选元素的数据和事件。
提示：如需移除元素，但保留数据和事件，请使用 detach() 方法代替。
提示：如只需从被选元素移除内容，请使用 empty() 方法。
语法
$(selector).remove()
detach() 方法
detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
该方法会保留移除元素的副本，允许它们在以后被重新插入。
语法
$(selector).detach()
empty() 方法
empty() 方法移除被选元素的所有子节点和内容。
注意：该方法不会移除元素本身，或它的属性。
语法
$(selector).empty()
html()方法
html()方法将里面的值设置为空，即可使所选元素的子节点和内容为空
- 11
- 22
- 33
hello
jQuery尺寸操作
width() 方法设置或返回被选元素的宽度。
当该方法用于返回宽度时， 则返回第一个匹配元素的宽度。
当该方法用于设置宽度时，则设置所有匹配元素的宽度。
相关方法：
- height() - 设置或返回元素的高度
- innerWidth() - 返回元素的宽度（包含 padding）
- innerHeight() - 返回元素的高度（包含 padding）
- outerWidth() - 返回元素的宽度（包含 padding 和 border）
- outerHeight() - 返回元素的高度（包含 padding 和 border）
语法
返回宽度：
$(selector).width()
设置宽度：
$(selector).width(value)
使用函数设置宽度：
$(selector).width(function(index,currentwidth))
| 参数 | 描述 |
|---|---|
| value | 当设置宽度时是必需的。规定元素的宽度，单位为 px、em、pt 等。 默认单位是 px。 |
| function(index,currentwidth) | 可选。规定返回被选元素新宽度的函数。 index - 返回集合中元素的 index 位置。 currentwidth - 返回被选元素的当前宽度。 |
其他方法用法与width()方法基本相同
outerHeight()和outerWidth方法中参数为true时，返回的是含有margin的值；默认为false，不包含margin的值。
jQuery位置操作
offset()方法
offset() 方法设置或返回被选元素相对于文档的偏移坐标。
当用于返回偏移时：
该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。
当用于设置偏移时：
该方法设置所有匹配元素的偏移坐标。
语法
返回偏移坐标：
$(selector).offset()
设置偏移坐标：
$(selector).offset({top:value,left:value})
使用函数设置偏移坐标：
$(selector).offset(function(index,currentoffset))
| 参数 | 描述 |
|---|---|
| {top:value,left:value} | 当设置偏移时是必需的。规定以像素为单位的 top 和 left 坐标。 可能的值： 名/值对，比如 {top:100,left:100} 一个带有 top 和 left 的对象（实例） |
| function(index,currentoffset) | 可选。规定返回包含 top 和 left 坐标的对象的函数。 index - 返回集合中元素的 index 位置。 currentoffset - 返回被选元素的当前坐标。 |
position()方法
position() 方法返回第一个匹配元素的位置（相对于它的父元素）。
该方法返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。
语法
$(selector).position()
注意
该方法不可设置属性，只可获取返回值
scrollTop()/scrollLeft()方法
scrollTop() 方法设置或返回被选元素的垂直滚动条位置。
提示：当滚动条位于最顶部时，位置是 0。
当用于返回位置时：
该方法返回第一个匹配元素的滚动条的垂直位置。
当用于设置位置时：
该方法设置所有匹配元素的滚动条的垂直位置。
语法
返回垂直滚动条位置：
$(selector).scrollTop()
设置垂直滚动条位置：
$(selector).scrollTop(position)
| 参数 | 描述 |
|---|---|
| position | 规定以像素为单位的垂直滚动条位置。 |
DEMO
Document