JavaScript之jQuery够用即可（each循环、位置偏移量和大小、克隆外层标签、嵌套返回顶部、集体绑定事件）

文章目录

一、each循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery循环</title>
</head>
<body>
<p>P一号</p>
<p>P二号</p>
<p>P三号</p>

<script src="jquery-3.4.1.js"></script>
<script>
    arr=[11,22,33];

    //jQuery与js嵌套使用
    // for(var i=0; i<arr.length; i++)
    // {
   
   
    //     $("p").eq(i).html(arr[i]);  //用i索引来取标签的同时用索引取数组的值
    // }

    //jQuery循环，一参是遍历对象，二参是操作函数
    //方式一：遍历数组
    // $.each(arr,function(x,y){
   
   
    //     console.log(x);  //x是下标（索引）位置
    //     console.log(y);  //y是对应的值
    // });

    //方式二：遍历某一类标签
    $("p").each(function(){
   
   
        console.log($(this));  //直接获得整个标签对象，之后可以进行各种操作
        $(this).html("哈哈哈");
    })
</script>
</body>
</html>

二、位置偏移量和大小

1、offset就是标签距离视口的偏移量

	console.log($(".div1").offset().top);
    console.log($(".div1").offset().left);
    console.log($(".div2").offset().top);
    console.log($(".div2").offset().left);

2、position相对于已经定位的父标签的偏移量

	console.log($(".div1").position().top);
    console.log($(".div1").position().left);
    console.log($(".div2").position().top);
    console.log($(".div2").position().left);

3、访问尺寸

height()——>只看元素内容的大小，不包括边框和边距
innerHeight()——>包括padding边框的高度
outerHeight()——>包括padding和border边框的高度
outerHeight(true)——>包括padding，border和margin三种边框的高度

4、测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery之offset</title>
    <style>
        *{
   
   
            margin:0px;
            padding:0px;
        }
        .div1, .div2