欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-15 15:06:38
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() 获取水平滚动条的距离

尺寸方法图解:
jquery尺寸方法、滚动操作、属性操作及循环
注意:

$(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