jquery尺寸方法、滚动操作、属性操作及循环
1.jquery尺寸方法
jQuery 提供多个处理尺寸的重要方法：
| 方法 | 概念 |
|---|---|
| width() | 设置或返回元素的宽度（不包括内边距、边框或外边距） |
| height() | 设置或返回元素的高度（不包括内边距、边框或外边距） |
| innerWidth() | 返回元素的宽度（包括内边距） |
| innerHeight() | 返回元素的高度（包括内边距） |
| outerWidth() | 返回元素的宽度（包括内边距和边框） |
| outerHeight() | 返回元素的高度（包括内边距和边框） |
| outerWidth(true) | 返回元素的宽度（包括内边距、边框和外边距） |
| outerHeight(true) | 返回元素的高度（包括内边距、边框和外边距） |
| scrollTop() | 获取垂直滚动的距离 即当前滚动的地方的窗口顶端到整个页面顶端的距离 |
| scrollLeft() | 获取水平滚动条的距离 |
尺寸方法图解：
注意：
$(document).height()与$(window).height()的区别：
$(document).height() //是获取整个页面的高度
$(window).height() //是获取当前 也就是浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的
2.jquery滚动操作
1.scroll()
当用户滚动指定的元素时，会发生scroll事件。适用于所有可滚动的元素和window对象（浏览器窗口）
语法：$(select).scroll([Data],fn);
举例：
//当页面发生滚动时，body的背景颜色变为紫色
$(function(){
$(window).scroll(function(){
$("body").css("backgroundColor","plum")
})
})
2.resize()
当调整浏览器窗口大小时，发生resize 事件
语法同scroll相同；
注意：需要注意的一点是,在resize和scroll方法中，scroll可是作为window和document的方法，但是resize只能作为window的方法.
3.属性操作
1.jquery文本值相关操作
html()方法:获取第一个匹配元素的html内容，内容包含子元素
语法：$(selector).html([value]);
注意：value选填，不填则获取元素内容，填写则给匹配的元素中间添加value数据,并替换掉原来的内容。value可以是纯文本还可以是标签
text()方法：获取第一个匹配元素的文本内容，内容不包含元素标签——文本中的标签会被解析成普通文本
语法：$(selector).text(value);
注意：value选填，不填则获取元素内容，填写则给指定元素内容设置文本内容，并替换掉原来的值。value只能是纯文本
val()方法：添加或获取元素value属性的值
语法：$(selector).val(value)；
注意：获取表单元素的值用val()，获取其他元素的值用val(value)
2.jQuery中的attr()方法/prop()方法
| 方法 | 概念 |
|---|---|
| attr() | 设置属性值或者返回被选元素的属性值 |
| removeAttr() | 删除属性节点 |
| prop() | 设置或者获取元素的属性值 |
| removeProp() | 删除属性 |
1. attr()
1. attr(name) //获取属性的值
2. attr(name,value) //设置属性的值
3. attr(name,fn) //设置属性的函数值
4. attr(properties) //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
2.removeAttr()
removeAttr(name) //要移除的属性
3.prop()
1. $(selector).prop(property) //返回属性的值
2. $(selector).prop(property,value) //设置属性和值
$(selector).prop(property,function(index,currentvalue)) //使用函数设置属性和值
$(selector).prop({property:value, property:value,...}) //设置多个属性和值
4.removeProp()
removeProp(name) //要移除的属性
注意：
attr方法和prop方法的区别：
- 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
4.jquery循环
遍历的四种方法：
1.$.each(arr/obj,function(i,item){})
2.$(arr/obj).each(function(i,item){})
3.$.map(arr/obj,function(i,item){})
4.$(arr/obj).map(function(i,item){})
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$("ul>li>a").each(function(){
console.log($(this).html());
$(this).prop("style","color:black;text-decoration:none;")
$(this).parent().prop("style","background-color:plum;list-style:none;width:20px;float:left;margin-left:10px;")
});
})
</script>
</head>
<body>
<ul>
<li><a href="#">11</a></li>
<li><a href="#">22</a></li>
<li><a href="#">33</a></li>
<li><a href="#">44</a></li>
<li><a href="#">55</a></li>
</ul>
</body>
</html>
map()和each()的区别：
map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。
each()返回的是原来的数组，并不会新创建一个数组。
map()方法会返回一个新的数组。如果在没有必要的情况下使用map()，则有可能造成内存浪费。
总结：
当遍历数组的时候，each()因为没有返回值，所以用不用return都不会改变其值，map()因为是创建一个新的数组，所以对原来的数组也不会造成影响。
当遍历对象的时候，each()遍历时候如果改动了参数值，原来的对象即被改变了，而map()遍历的时候改动了参数值（必须加return，否则返回空数组），遍历创建的新的对象和原来的对象均被改变了。
本文地址：https://blog.csdn.net/weixin_47150940/article/details/107536586
下一篇： jQuery基础知识梳理（三）