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{
            width: 200px;
            height: 100px;
        }
        .div1{
            padding: 20px;
            border: 5px solid red;
            margin: 3px;
            background-color: yellowgreen;
        }

        .div2{
            background-color: #2b91af;
        }

        /*.outer{*/
        /*    position:relative;*/
        /*}*/
    </style>
</head>
<body>

<div class="div1"></div>
<div class="outer">
    <div class="div2"></div>
</div>


<script src="jquery-3.4.1.js"></script>
<script>
//offset就是標籤距離視口的偏移量
//     console.log($(".div1").offset().top);
//     console.log($(".div1").offset().left);
//     console.log($(".div2").offset().top);
//     console.log($(".div2").offset().left);

//position相對於已經定位的父標籤的偏移量
//     console.log($(".div1").position().top);
//     console.log($(".div1").position().left);
//     console.log($(".div2").position().top);
//     console.log($(".div2").position().left);


//訪問尺寸
    console.log($(".div1").height());  //不帶參數，只返回高度（只看元素內容的大小，不包括邊框和邊距）
    console.log($(".div1").innerHeight());  //包括padding邊框的高度，上下各20就是40
    console.log($(".div1").outerHeight());  //包括padding和border邊框的高度，40+5+5=50
    console.log($(".div1").outerHeight(true));  //帶一個true參數就包括padding，border和margin三種邊框的高度
    //帶上參數，則設置高度
    $(".div1").height("300px");

</script>
</body>
</html>

三、克隆外層標籤

1、測試代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆標籤jQuery</title>
</head>
<body>
<div class="outer">
    <div class="item1">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>
</div>

<script src="jquery-3.4.1.js"></script>
<script>
    function add(self) {
        var $clone_obj=$($(self)).parent().clone();  //複製一份，賦值給變量$clone_obj

        //將克隆對象的加號變成減號
        $clone_obj.children("button").html("-").attr("onclick","remove_obj(this)");

        $(".outer").append($clone_obj);  //在大的div裏添加克隆的內容
    }
    
    function remove_obj(self) {
        $(self).parent().remove();  //刪除整個item1，包括button和文本框
    }
</script>
</body>
</html>

2、測試效果

四、jQuery實現的模態對話框

1、測試代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模態對話框</title>
    <style>
        .content{
            height: 1500px;
            background-color: white;
        }

        .shade{
            position: fixed;
            top:8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            background-color: grey;
            opacity: 0.5;  /*透明度*/
        }

        .model{
            width:200px;
            height: 200px;
            background-color: yellowgreen;
            position:fixed;
            top:50%;
            left:50%;
            margin-top: -100px;
            margin-left: -100px;
        }

        /*剛訪問時讓組件隱藏起來*/
        .hide{
            display:none;
        }
    </style>
</head>
<body>

<div class="content">
    <button onclick="show(this)">登陸</button>
    我是背景層！
</div>

<div class="shade hide"></div>
<!--遮罩層：加在content表面的一層，讓原來的頁面顏色變淡-->

<div class="model hide">
    <button onclick="cancel(this)">取消</button>
    model部分
</div>

<script src="jquery-3.4.1.js"></script>
<script>
    function show(self){
        $(self).parent().siblings().removeClass("hide");
        //意爲：找到登陸button的父級標籤，再操作父級標籤同級的非父級標籤，
        // 即遮罩層和對話框層，去除他們的hide屬性值，就會顯示出來
    }

    function cancel(self){
        //法一：
        // $(self).parent().addClass("hide");  //將父級div（對話框）添加hide隱藏起來
        // $(self).parent().prev().addClass("hide");  //將對話框的上一個（遮罩層）添加hide隱藏起來

        //法二：
        $(self).parent().parent().children(".shade, .model").addClass("hide");
        //找父級（對話框）的父級（body標籤）下的shade和model屬性名的標籤，添加hide屬性，隱藏起來
    }
</script>
</body>
</html>

2、測試結果

五、嵌套返回頂部

1、測試代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回頂部（jQuery）</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .div2{
            width: 100%;
            height: 800px;
        }

        .div1{
            background-color: yellowgreen;
            overflow: auto;  /*防止溢出*/
        }
        .div1{
            height:200px;
        }

        .div2{
            background-color: #2b91af;
        }

        .returnTop{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 80px;
            height: 50px;
            background-color: midnightblue;
            color:white;
            text-align:center;
            line-height: 50px;
        }

        .hide{
            display:none;
        }
    </style>
</head>
<body>

<div class="div1">
    <h1>1111</h1>
    <h1>2222</h1>
    <h1>3333</h1>
    <h1>4444</h1>
    <h1>5555</h1>
    <h1>6666</h1>
    <h1>7777</h1>
    <h1>8888</h1>
    <h1>9999</h1>
</div>

<div class="outer">
    <div class="div2">
<!--    <button onclick="toTop2()">小窗口返回頂部</button>-->
<!--   用jQuery綁定事件-->
    <button>小窗口返回頂部</button>
    </div>
</div>

<div class="returnTop hide" onclick="toTop()">返回頂部</div>

<script src="jquery-3.4.1.js"></script>
<script>
//綁定滾動事件,用窗口來實現動態監聽
    window.onscroll=function() {
        //滾動條：scrollTop
        // console.log($(window).scrollTop());  //不加參數，則返回滾動條頂端的位置

        //設置滑動了一段距離才顯示返回頂部的圖標
        if($(window).scrollTop()>=300){
            $(".returnTop").removeClass("hide");  //去除隱藏的效果，則顯示
        }
        else{
            $(".returnTop").addClass("hide");
        }
    };

    function toTop(){
        //返回頂部，則是將滾動條位置變爲0
        $(window).scrollTop(0);  //即將滾動條頂端置爲0，就是頂部了
    }

    // function toTop2(){
    //     //返回頂部，則是將滾動條位置變爲0
    //     $(".div1").scrollTop(0);  //即將滾動條頂端置爲0，就是頂部了
    // }

//改成jQuery的事件綁定方式
    $(".div2 button").click(function(){
        $(".div1").scrollTop(0);  //即將滾動條頂端置爲0，就是頂部了
    });
</script>
</body>
</html>

2、測試效果

六、集體綁定事件

1、測試代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>集體綁定事件</title>
</head>
<body>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
</ul>

<button class="b1">點我</button>

<script src="jquery-3.4.1.js"></script>
<script>
    //綁定事件的簡寫
    // $("ul li").click(function(){
    //     alert("集體觸發！");
    // })

    //完整寫法（不常用）
    $("ul li").bind("click",function(){
        alert("集體觸發！");
    })
    //解除綁定
    $("ul li").unbind("click")

    $(".b1").click(function() {
        var $ele=$("<li>");  //創建一個li標籤，
        var len=$("ul li").length;  //將len賦值爲ul列表的長度
        $ele.html((len+1)*1111);
        $("ul").append($ele);
    })
</script>
</body>
</html>

2、測試結果

JavaScript之jQuery夠用即可（each循環、位置偏移量和大小、克隆外層標籤、嵌套返回頂部、集體綁定事件）

文章目錄

一、each循環

二、位置偏移量和大小

1、offset就是標籤距離視口的偏移量

2、position相對於已經定位的父標籤的偏移量

3、訪問尺寸

4、測試代碼

三、克隆外層標籤

四、jQuery實現的模態對話框

五、嵌套返回頂部

六、集體綁定事件

Python 潮流週刊#52：Python 處理 Excel 的資源

Python之進程+線程+協程（multiprocessing多進程模塊）

JavaScript之jQuery夠用即可（jQuery的引入、查找選擇器、左側菜單欄）

初學者python筆記（map()函數、reduce()函數、filter()函數、匿名函數）

Python之網絡編程（socketserver模塊詳解、鏈接認證）

Python之進程+線程+協程（進程的本質與 threading線程模塊）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結