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

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