当前位置: 萬仟网 > IT编程>开发语言>Jquery > jquery尺寸方法、滚动操作、属性操作及循环

jquery尺寸方法、滚动操作、属性操作及循环

2020年07月24日  | 萬仟网IT编程  | 我要评论
1.jquery尺寸方法jQuery 提供多个处理尺寸的重要方法:方法概念width()设置或返回元素的宽度(不包括内边距、边框或外边距)height()设置或返回元素的高度(不包括内边距、边框或外边距)innerWidth()返回元素的宽度(包括内边距)innerHeight()返回元素的高度(包括内边距)outerWidth()返回元素的宽度(包括内边距和边框)outerHeight()返回元素的高度(包括内边距和边框)outerW

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1