jQuery基礎語法

zhangzengxiu發表於2020-12-11

JS框架

jQuery

jQuery就是一個早期的JS框架，本質上就是對js事件和DOM操作進行封裝的一個js檔案。在使用該框架時，只需要引入外部的js檔案，就可以使用裡面已經定義好的函式。

快速入門

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery快速入門</title>
</head>
<body>
<div id="div">我是div</div>
</body>
<!--引入外部js檔案-->
<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //普通方式js獲取元素
    //方法一
    //  let d = document.getElementById("div");
    //   document.write(d.innerText);
    //方法二
    let jsdiv = document.querySelector("#div");
    alert(jsdiv); //[object HTMLDivElement]
    alert(jsdiv.innerHTML); //我是div

    //通過jQuery方式獲取元素物件
    let jqdiv = $("#div");
    alert(jqdiv); //[object Object]
    alert(jqdiv.html());  //我是div


</script>
</html>

js物件與jQuery物件之間的轉換

為了讓jQuery也可以使用js的相關操作，同時js也可以使用jQuery使用一些jQuery的操作，可以將二者之間進行相互轉換

js轉為jQuery物件，將js包裝為jQuery物件，小括號內不能加雙引號

jQuery可以看做為一個裝有js物件的容器（陣列/集合）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js與jq之間的物件轉換</title>
</head>
<body>
<div id="div">我是div</div>
</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //js方式，通過id屬性值來獲取div元素
    let jsdiv = document.querySelector("#div");
    //  document.write(jsdiv);  //[object HTMLDivElement]
    document.write(jsdiv.innerHTML);
    document.write("<br>");

    //jQuery方式，通過id屬性值獲取div元素
    let jqdiv = $("#div");
    //   document.write(jqdiv);
    document.write(jqdiv.html());
    document.write(jqdiv.innerHTML + "---"); //undefined
    document.write("<br>");

    document.write("<br>===轉換中===<br>");

    //js轉為jQuery物件，將js包裝為jQuery物件，小括號內不能加雙引號
    //   let js1 = $(jqdiv);
    let jq2 = $(jsdiv);
    document.write(jq2);//[object Object]
    document.write("<br>");
    document.write(jq2.html());//我是div
    document.write("<br>");
    // document.write(jsdiv.html());  //報錯因為此時的jsdiv是js物件，而不是jQuery物件，故不能使用jQuery的函式
    // document.write(jsdiv);//[object HTMLDivElement]  js物件
    document.write("<br>");

    //jQuery轉為js物件

    //可以將jQuery物件看做是一個封裝為js物件的陣列
    let js3 = jq2[0];
    document.write(js3);//[object HTMLDivElement]  js物件
    // document.write(js3.html());  報錯 已經此時的js3已被轉為js物件，不能使用jquery的方法
    document.write("<br>");


    //將jQuery看做為一個集合，通過get的方式獲取裡面的元素
    let js4 = jq2.get(0);
    document.write(js4);//[object HTMLDivElement]   js物件
    document.write(js4.innerHTML);  //我是div

</script>

</html>

在這裡插入圖片描述

jQuery常見的事件

其實jQuery是將js中的一些事件封裝為了對應的方法，eg: .onclick()------>click()

常見的事件:click()、dblclick()、change()、focus()、blur()、keyup()、mouseout()、mouseover()、scroll()、submit()、$(document).ready()/$()

jQuery事件函式的兩個功能：1.為元素繫結事件；2.觸發相應的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常見事件</title>
</head>
<body>
<input type="button" id="btn" value="點我">
<br>
<input type="text" id="input">

</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //為按鈕繫結click滑鼠單擊事件
    $("#btn").click(function () {
        alert("你還真點啊！！！");
    });

    //獲取焦點事件
    $("#input").focus(function () {
     alert("獲取到焦點了");

    });

    //失去焦點事件
    $("#input").blur(function () {
      alert("失去焦點了");
    });

    //設定一個定時器，實現迴圈點選
   // setInterval(" $(\"#btn\").click()", 3000);

    $("#btn").click();
    $("#btn").click();


</script>

</html>

頁面載入事件

程式的入口

js中為一個屬性值，多次使用會出現值覆蓋的情況，最終只會呈現一個結果，即最終的值。 window.onload = function(){}

jQuery中為一個函式/方法，可以多次呼叫，不會出現覆蓋情況。 $(document).ready(function(){})

簡寫： $(function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁面載入事件</title>
</head>
<body>

</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //js程式入口
    window.onload = function () {
        alert("頁面載入完成1");
    };

    window.onload = function () {
        alert("頁面載入完成2");
    };

    window.onload = function () {
        alert("頁面載入完成3");   //顯示   因為js的程式入口相當於是一個屬性，只能有一個值，後面的值會把前面的值覆蓋掉
    };

    //jQuery程式入口
    //以下均會顯示，因為這是一個方法，可以被多次呼叫，且不會出現覆蓋的情況
    $(document).ready(function () {
        alert("頁面載入完成1");
    });

    $(document).ready(function () {
        alert("頁面載入完成2");
    });

    $(document).ready(function () {
        alert("頁面載入完成3");
    });

    //jQuery程式入口函式簡化寫法
    $(function () {
        alert("頁面載入完成");
    });



</script>

</html>

事件繫結

on繫結事件

off解綁事件，傳遞要解綁的事件名，否則會解綁該物件所有的事件

one繫結一個一次性事件，單次有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件繫結</title>
</head>
<body>
<div id="div">我是div</div>
<input type="button" id="btn1" value="按鈕1"/>
<input type="button" id="btn2" value="按鈕2"/>
<input type="button" id="btn3" value="按鈕3"/>
</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //基本的繫結方式
    $("#div").click(function () {
        alert("單擊事件");
    });

    //on/off/one
    //on繫結事件
    $("#btn1").on("click",function () {
        alert("按鈕1單擊事件");
    });

    $("#btn1").on("mouseover",function () {
        alert("按鈕1mouseover事件");
    });

    $("#btn2").on("click",function () {
        alert("按鈕2單擊事件");
    });

    $("#btn2").on("mouseover",function () {
        alert("按鈕2mouseover事件");
    });
    

    //off解綁事件，必須要傳要解綁的事件的名稱，否則會解綁該物件所有的事件
    $("#btn1").off("click");
    
    
    //one繫結一個一次性事件
    $("#btn3").one("click",function () {
        alert("一次性事件");
    })
    
    
</script>

</html>

繫結多個事件

方式一：單獨為指定物件繫結多個事件

方式二：鏈式繫結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>繫結多個事件</title>
</head>
<body>
<div ><input type="text" id="input" style="width: 100% ;height:100px" ></div>

</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>

    //方法一
    //單獨定義每一個事件，繫結多個事件
    $("#input").on("mouseover",function () {
        $(this).css("background", "red");
    });

    $("#input").mouseout(function () {
        $("#input").css("background", "blue");
    });


    //方法二
    //鏈式繫結多個事件
    $("#input").on("mouseover",function () {
        $(this).css("background", "red");
    }). mouseout(function () {
        $("#input").css("background", "blue");
    });


</script>

</html>

事件的切換

toggle
兩個功能

在多個點選事件之間輪流執行 1.9之前可用可以遷移到1.9-版本使用該功能
讓元素顯示或隱藏
遷移步驟1.匯入新版本的jq檔案;2.匯入低版本的遷移檔案;3.使用低版本的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件切換</title>
</head>
<body>
<div id="div">我是div</div>
</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script src="../../js/jquery-migrate-1.2.1.min.js"></script>
<script>

    //事件的切換
    //可以通過函式的方式實現 hover滑鼠懸停移出的事件切換
/*
    $("#div").hover(function () {
        $(this).css("background", "red");
    },function () {
        $(this).css("background", "blue");
    });*/

    //toggle
    // 2. toggle
    // 兩個功能
    // 1. 在多個點選事件之間輪流執行  1.9之前可用 可以遷移到1.9-版本使用該功能
    // 2. 讓元素顯示或隱藏
    //
    // 遷移步驟
    // 1. 匯入新版本的jq檔案
    // 2. 匯入低版本的遷移檔案
    // 3. 使用低版本的功能

    $("#div").toggle(function () {
        // this表單當前事件繫結的元素物件
        $(this).css("background", "red");
    }, function () {
        $(this).css("background", "blue");
    }, function () {
        // this表單當前事件繫結的元素物件
        $(this).css("background", "green");
    }, function () {
        // this表單當前事件繫結的元素物件
        $(this).css("background", "pink");
    }, function () {
        // this表單當前事件繫結的元素物件
        $(this).css("background", "orange");
    });



</script>

</html>

基礎語法遍歷

jQuery物件可以看做為一個裝有js物件的容器，所以，遍歷出來的每一個元素均為js物件，要操作js相關的功能

四種遍歷方式

方式一：傳統方式：遍歷jq物件/js陣列物件/js集合物件

方式二：jq物件.each()方法只能遍歷jq物件

方式三：$.each()方法：遍歷jq物件/js陣列物件/js集合物件。與方式二相似

方式四：for of 語句遍歷增強for 沒有索引。不可以操作索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍歷</title>
</head>
<body>
<input type="button" id="btn" value="遍歷列表項">
<ul>
    <li>傳智播客</li>
    <li>黑馬程式設計師</li>
    <li>傳智專修學院</li>
</ul>
</body>

<script src="../../js/jquery-3.3.1.js"></script>
<script>
    /*
       遍歷的是js陣列物件/js集合物件/jq物件
   */
    //方式一：傳統方式：遍歷jq物件/js陣列物件/js集合物件
 /*   $("#btn").click(function () {
        let lis = $("li");
        alert(lis);
        for (let i = 0; i <lis.length ; i++) {
            alert(i + ":" + lis[i].innerHTML);
        }
    });*/


    //方式二：jq物件.each()方法 只能遍歷jq物件
/*    $("#btn").click(
        function () {
            let lis = $("li");
            lis.each(function (index, ele) {
                alert(index + ":" + ele.innerHTML);
            })
        }
    );*/

    //方式三：$.each()方法：遍歷jq物件/js陣列物件/js集合物件
/*    $("#btn").click(function () {
        let lis = $("li");
        $.each(lis,function (index, ele) {
            alert(index + ":" + ele.innerHTML);
        })
    });*/

    //方式四：for of 語句遍歷 增強for 沒有索引。遍歷jq物件/js陣列物件/js集合物件
    $("#btn").click(function () {
        let lis = $("li");
        for (ele of lis) {
            alert(ele.innerHTML);
        }
    })

</script>
</html>

jQuery 基礎語法
2022-02-27
jQuery
新知識：jQuery語法基礎與操作
2018-05-06
jQuery
Java基礎-語法基礎
2020-07-27
Java
基礎語法
2024-07-14
scala基礎語法-----Spark基礎
2020-09-29
Spark
Python基礎：語法基礎（3）
2018-12-22
Python
jQuery 語法
2022-07-21
jQuery
jQuery語法
2021-10-09
jQuery
CSS 基礎語法
2019-01-11
CSS
Dart語法基礎
2019-03-08
Dart
JAVA語法基礎
2018-06-30
Java
CSS基礎語法
2024-04-27
CSS
Markdown基礎語法
2024-03-18
Python基礎語法
2024-03-17
Python
Vue基礎語法
2019-08-14
Vue
mysql基礎語法
2020-09-27
MySql
JavaScript 基礎語法
2020-09-29
JavaScript
Scala基礎語法
2020-10-28
kotlin基礎語法
2019-05-09
Kotlin
go 基礎語法
2024-10-27
Go
Java 基礎語法
2021-09-09
Java
Markdown 基礎語法
2021-01-02
redis 基礎語法
2021-01-05
Redis
Python 基礎語法
2020-11-29
Python
python基礎語法—語句
2019-02-25
Python
JavaScript 基礎卷（一）：基礎語法
2019-12-26
JavaScript
Dart語法篇之基礎語法(一)
2019-10-27
Dart
Python的基礎語法
2019-01-08
Python
python 基礎語法（三）
2018-12-15
Python
Python基礎語法（二）
2018-12-05
Python
Python基礎語法（一）
2018-12-05
Python
Vuejs 基礎與語法
2018-09-06
VueJS
Scala 的基礎語法
2023-12-15
20200126 - PHP 基礎語法
2020-01-26
PHP
JavaSE的基礎語法
2020-10-02
Java
Drools之基礎語法
2020-07-04
Python基礎(06)：if語法
2019-02-11
Python
c++--基礎語法
2024-08-18
C++