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

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

程序员文章站 2022-06-15 15:01:38
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

相关标签: jquery