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插件-做右键菜单2
下一篇: DVWA-DOM型XSS全等级绕过方法