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遍历使得元素变色：
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var array = ['red', 'blue', 'green'];
$('div').each(function(index, domEle) {
console.log($(this).text());
$(domEle).css('color', array[index]);
});
</script>
</body>
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 ，即使它是一个简单的字符串或数字值。）该方法返回其第一个参数，这是迭代的对象。
例，遍历一个数组：
<script>
var array = [11, 22, 33];
$.each(array, function(index, num) {
console.log(index + ':' + num);
});
</script>
例，遍历一个对象：
<script>
$.each({
name: 'david',
sex: 'men'
}, function(attr, value) {
console.log(attr + ':' + value);
});
</script>
jQuery DOM元素操作
创建元素
可以直接往$()里添加html标签
如
var li = $('<li>hello world</li>');
添加元素
内部添加
append()方法
append() 方法在被选元素的结尾插入指定内容。
提示：如需在被选元素的开头插入内容，请使用 prepend() 方法。
语法
$(selector).append(content,function(index,html))
| 参数 | 描述 |
|---|---|
| content | 必需。规定要插入的内容（可包含 HTML 标签）。 可能的值： HTML 元素 jQuery 对象 DOM 元素 |
| function(index,html) | 可选。规定返回待插入内容的函数。 index - 返回集合中元素的 index 位置。 html - 返回被选元素的当前 HTML。 |
prepend()方法
prepend() 方法在被选元素的开头插入指定内容。
其语法和参数和append一模一样
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<div>hello</div>
<div>world</div>
<script>
var li = $('<li>hello world</li>');
//$('ul').append(li); //内部添加且放在内容的最前面
$('ul').prepend(li); //内部添加且放在内容的最后面
</script>
</body>
外部添加
before()方法
before() 方法在被选元素之前插入指定的内容。
提示：如需在被选元素后插入内容，请使用 after() 方法。
其语法和参数和append一模一样
after()方法
after() 方法在被选元素后插入指定的内容。
其语法和参数和append一模一样
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<div>hello</div>
<script>
var div = $('<div>hi</div>');
//$('div').before(div); //外部添加且放在内容的最前面
$('div').after(div); //外部添加且放在内容的最后面
</script>
</body>
删除元素
remove()方法
remove() 方法移除被选元素，包括所有的文本和子节点。
该方法也会移除被选元素的数据和事件。
提示：如需移除元素，但保留数据和事件，请使用 detach() 方法代替。
提示：如只需从被选元素移除内容，请使用 empty() 方法。
语法
$(selector).remove()
detach() 方法
detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。
该方法会保留移除元素的副本，允许它们在以后被重新插入。
语法
$(selector).detach()
empty() 方法
empty() 方法移除被选元素的所有子节点和内容。
注意：该方法不会移除元素本身，或它的属性。
语法
$(selector).empty()
html()方法
html()方法将里面的值设置为空，即可使所选元素的子节点和内容为空
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<div>hello</div>
<script>
//$('ul').remove(); //删除匹配元素，包括子节点
//$('ul').empty(); //删除匹配元素的子节点
$('ul').html(''); //删除匹配元素的子节点
</script>
</body>
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.father {
position: relative;
margin-left: 100px;
margin-top: 100px;
width: 400px;
height: 400px;
background-color: skyblue;
}
.son {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
.father-two {
width: 400px;
height: 2000px;
background-color: tan;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="father-two"></div>
<script>
console.log($('.son').offset());
console.log($('.son').offset().top); //获取距离文档顶部的值
console.log($('.son').offset().left); //获取距离文档左边的值
$('.son').offset({ //设置距离文档顶部和左边的值，以对象形式传递
top: 200,
left: 200
});
console.log($('.son').position());
console.log($('.son').position().top); //获取距离有定位的父级元素顶部的距离，此时为.father元素
console.log($('.son').position().left); //获取距离有定位的父级元素左边的距离，此时为.father元素
$(window).scroll(function() {
//scroll()方法只会用于滚动条产生的那个节点，也就是谁产生了滚动条，就获取谁的头部被卷去的距离
//console.log($('.father-two').scrollTop()); //值一直为0
console.log($(document).scrollTop());
});
</script>
</body>
</html>
