JQuery：JQuery語法、選擇器、事件處理

時間 2019-11-14

原文原文鏈接

JQuery語法：
經過 jQuery，您能夠選取（查詢，query） HTML 元素，並對它們執行"操做"（actions）。css

1、語法：
jQuery 語法是經過選取 HTML 元素，並對選取的元素執行某些操做。
基礎語法： $(selector).action()
　　美圓符號$定義 jQuery
　　選擇符（selector）"查詢"和"查找" HTML 元素
　　jQuery 的 action() 執行對元素的操做
實例:
　　$(this).hide() - 隱藏當前元素
　　$("p").hide() - 隱藏全部 <p> 元素
　　$("p.test").hide() - 隱藏全部 class="test" 的 <p> 元素
　　$("#test").hide() - 隱藏全部 id="test" 的元素html

2、文檔就緒事件：
您也許已經注意到在咱們的實例中的全部 jQuery 函數位於一個 document ready 函數中，這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。若是在文檔沒有徹底加載以前就運行函數，操做可能失敗。jquery

寫法格式以下：框架

$(document).ready(function(){
// 開始寫 jQuery 代碼...
});

或者（簡寫的方式）ide

$(function(){
// 開始寫 jQuery 代碼...
});

注意：內部的JQuery代碼其實即便事件的處理，若是執行多個事件處理，每個方法用","隔開就是...函數

3、選擇器：
3.1
jQuery 選擇器容許您對 HTML 元素組或單個元素進行操做。
jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。它基於已經存在的 CSS 選擇器，除此以外，它還有一些自定義的選擇器。
jQuery 中全部選擇器都以美圓符號開頭：$()。
3.2
最多見的就是元素選擇器、#id選擇器、.class選擇器
元素選擇器：在頁面中選取全部 <p> 元素
　　$("p")
#id選擇器：選擇"id=test"的元素
　　$("#test")
.class選擇器：選取"class=test"的元素
　　$(".test")
更多實例如圖所示:網站

3.3
獨立文件中使用 jQuery 函數
若是您的網站包含許多頁面，而且您但願您的 jQuery 函數易於維護，那麼請把您的 jQuery 函數放到獨立的 .js 文件中。
當咱們在教程中演示 jQuery 時，會將函數直接添加到 <head> 部分中。不過，把它們放到一個單獨的文件中會更好，就像這樣（經過 src 屬性來引用文件）：this

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

4、事件：
4.1
jQuery 是爲事件處理特別設計的。
頁面對不一樣訪問者的響應叫作事件。
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
事件主要是：在元素上移動鼠標、選取單選按鈕、點擊元素
在事件中常常使用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。
常見 DOM 事件如圖所示：spa

4.2
jQuery 事件方法語法：在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。
頁面中指定一個點擊事件：
設計

$("p").click();

下一步是定義什麼時間觸發事件。您能夠經過一個事件函數實現：

$("p").click(function(){
// 動做觸發後執行的代碼!!
});

4.3
經常使用的 jQuery 事件方法：$(document).ready()
$(document).ready() 方法容許咱們在文檔徹底加載完後執行函數。該事件方法在 jQuery 語法章節中已經提到過。
click() 方法是當按鈕點擊事件被觸發時會調用一個函數。該函數在用戶點擊 HTML 元素時執行。
實例1：使用click()方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {

            //單擊按鈕會隱藏p元素
            $("#btn").click(function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <p id="p1">若是按鈕被單擊，我就被隱藏了</p>
    <button id="btn">按鈕</button>
</body>
</html>

實例2：當雙擊元素時，會發生 dblclick 事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {

            // dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數
            // 雙擊時，p元素隱藏
            $("#btn").dblclick(function(){
                $("#p1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="p1">若是按鈕被單擊，我就被隱藏了</p>
    <button id="btn">按鈕</button>
</body>
</html>

實例3：當鼠標指針穿過元素時，會發生 mouseenter 事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {

            //mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時運行的函數
            $("#p1").mouseenter(function(){
                    alert("you enter p1");
                 }
            );
        });
    </script>
</head>
<body>
    <p id="p1">JQuery框架的使用</p>
</body>
</html>

實例4：當鼠標指針離開元素時，會發生 mouseleave 事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {

            ///mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時運行的函數
            $("#p1").mouseleave(function(){
                    alert("Bye! you leave p1 now");
                 }
            );
        });
    </script>
</head>
<body>
    <p id="p1">JQuery框架的使用</p>
</body>
</html>

實例5：當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {

            ///當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件
            $("#p1").mousedown(function(){
                    alert("Mosue down over p1");
                 }
            );
        });
    </script>
</head>
<body>
    <p id="p1">JQuery框架的使用</p>
</body>
</html>

實例6：當在元素上鬆開鼠標按鈕時，會發生 mouseup 事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {

            ///mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函數
            $("#p1").mouseup(function(){
                    alert("Mosue up over p1");
                 }
            );
        });
    </script>
</head>
<body>
    <p id="p1">JQuery框架的使用</p>
</body>
</html>

實例7：hover()方法用於模擬光標懸停事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {

            //當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)
            $("#p1").hover(function(){
                    alert("you enter p1");
                 }, function(){
                     alert("Bye! you leave p1 now");
                }
            );
        });
    </script>
</head>
<body>
    <p id="p1">JQuery框架的使用</p>
</body>
</html>

實例8：當元素得到焦點時，發生 focus 事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {

            //focus(),當經過鼠標點擊選中元素或經過 tab 鍵定位到元素時，該元素就會得到焦點
            $("#input").focus(function(){
                $(this).css("background-color","red");
            });
        });
    </script>
</head>
<body>
    <input type="text" id="input">
</body>
</html>

實例9：當元素失去焦點時，發生 blur 事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>
    <script>
        $(document).ready(function () {

            //blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數
            $("#input").blur(function(){
                $(this).css("background-color","blue");
            });
        });
    </script>
</head>
<body>
    <input type="text" id="input">
</body>
</html>