当前位置: 萬仟网 > IT编程>开发语言>Jquery > jQuery尺寸相关,滚动事件,属性操作及循环

jQuery尺寸相关,滚动事件,属性操作及循环

2020年07月24日  | 萬仟网IT编程  | 我要评论
1尺寸相关,滚动事件1.1获取和设置元素尺寸width()、height() //获取元素width和height innerWidth()、innerHeight() //包括padding的width和height outerWidth()、outerHeight() //包括padding和border的width和height outerWidth(true)、outerHeight(true) //包括padding和border以及margin的width和heig

1尺寸相关,滚动事件

1.1获取和设置元素尺寸

width()height()    //获取元素width和height  
innerWidth()innerHeight()  //包括padding的width和height  
outerWidth()outerHeight()  //包括padding和border的width和height  
outerWidth(true)outerHeight(true)   //包括padding和border以及margin的width和height
总结获取元素尺寸的两种方式:方法一($("div").css("width");)方法二(var width1 = $('div').width();)
1.2获取元素相对页面的绝对位置
var weizhi1 = $('.son').offset();    //获取设置距离文档的位置{top+left}(偏移) offset
var weizhi2=$('.son').offset().top;  //获取设置距离文档上边的位置
var weizhi3=$('.son').offset().left;  //获取设置距离文档左边的位置
// console.log(weizhi1);
console.log($(".son").position());   // . 获取距离带有定位父级位置(偏移) position   如果没有带有定位的父级,则以文档为准这个方法只能获取不能设置偏移
			
注:$('.son') .position()这个方法只能获取距离带有定位父级位置(偏移)如果父级没有定位则以文档(body)为准
1.3获取其余相关位置
        // 获取浏览器可视区的宽度和高度
        $(window).width();
        $(window).height();
        // 获取页面文档的宽度高度
        $(document).width();
		$(document).height();
		// 获取页面的滚动距离
        $(document).scrollTop();
        $(document).scrollLeft();

1.4滚动事件

$(window).scroll(function() {
          
        })

2,jQuery的属性操作

2.1普通元素内容html()相当于原生的(inner HTML)

// 通过html()取出或设置html的内容
var ysu = $('div').html('<span>第二部分内容</span>');
注:利用html()设置的元素和内容可以解析html标签同时会覆盖页面内原有的内容
2.2普通元素文本内容text()相当于原生的(inner Text)
var ysu = $('div').text('<span>第三部分内容</span>')
注:利用text() 设置元素文本内容并不能解析html标签,同时也会覆盖原有文本
2.3表单的值val()相当于原生的(value)
 var ysu = $('input').val('02')

2.4 元素固有属性值prop()

$('div').prop({
            class: 'v_01',
            style: 'border: 1px solid pink;width:200px;background-color:blue;'
        })

3,jQuery的循环

3.1 each()循环

        // 语法一:$(selector).each(function(index,element))
        $('div').each(function(index, value) {

            })
        // 语法二:
        $each($('div'), function(index, value) {

        })
        //打印a里面的内容
        $('ul>li a').each(function(index, value) {
                console.log($(this).text());
            })
注:此处获取的value是每个DOM元素不是jQuery对象,所以若想使用jQuery的 方法需将获取的value元素转换为jQuery对象$('value')
3.2 map()循环
$.map($('ul>li a'), function(index, value) {
                console.log($(index).text());
            })
注:map() 方法主要用来遍历操作数组和对象。each() 方法主要用于遍历jquery对象。each() 方法返回的是原来的数组,并不会新创建一个数组。map() 方法会返回一个新的数组。如果在没有必要的情况下使用map,则有可能造成内存浪费。

本文地址:https://blog.csdn.net/weixin_42056687/article/details/107537045

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

相关文章:

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