JQuery中美圓符號$

時間 2020-11-30

標籤 javascript css html 前端 java jquery 數組前端框架框架學習欄目 JQuery 简体版

原文原文鏈接

1. 概述

前端技術得更新換代實在太快，JQuery可能已經再也不適合着重學習，不過JQuery得思想已經融入了不少前端框架技術之中，好比這個美圓符號，老是能夠在一些地方看到，做爲最開始使用得JS庫，就學習下JQuery中得使用。javascript

2. 詳論

2.1. 加載腳本

在HTML頁面中引入原生的JS腳本通常都會這樣開頭：css

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

使用window.onload()的緣由是由於通常都會但願直到網頁加載完畢後，再馬上執行JS腳本的操做，不然會形成在執行JS腳本的時候， HTML文檔沒有渲染完成，DOM樹是不完整，獲取DOM中元素未定義的錯誤。html

與window.onload()相對應的，包含JQuery或者採用類似技術的框架會這樣加載js腳本：前端

$(document).ready(function(){ 
    Func1();
    Func2();
    Func3();
    .....
});

$(document)表示的就是選擇整個文檔對象，.ready()就是DOM加載完成時的相應事件。這個寫法進一步簡化，就是以下的加載方案：java

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>樣例</title>
    <script src="./3rdParty/jquery-3.5.1.js">
    </script>
    <script>
        $(function () {       
            console.log(jQuery.fn.jquery);
        });
    </script>
</head>

<body>
    <p>這是一個段落。</p>
</body>

</html>

固然，window.onload與jQuery ready()兩種加載方式仍是有區別的：
jquery

2.2. 選擇器

能夠認爲JQuery的美圓符號就是一種選擇器，基於已經存在的 CSS 選擇器（固然不侷限於），可以選取網頁中的各類元素。CSS有三種經常使用的選擇器：元素選擇器、ID選擇器和類選擇器；JQuery也有對應的選擇器。數組

2.2.1. 元素選擇器

下面例子展現經過實現選取標籤元素，實現了一個效果：每次點擊按鈕，就會修改P元素的顏色屬性。前端框架

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>樣例</title>
    <script src="./3rdParty/jquery-3.5.1.js">
    </script>
    <script>
        $(function () {
            var active = false;
            $("button").click(function () {                
                if(active){
                    $("p").css("color","#ff0000");
                }else{              
                    $("p")[0].style.color = "#00ff00";                   
                }   
                active = !active;             
            })
        });
    </script>

    <style type="text/css">
        p {
            color:#ff0000;
        }
    </style>

</head>

<body>
    <p>這是一個段落。</p>
    <button>點我</button>
</body>

</html>

經過$選擇器，能夠實現獲取html中的標籤元素，從而進一步實現修改對應的CSS屬性。框架

2.2.2. ID選擇器

給上面那個例子加上另一個P標籤的段落，id屬性設置爲test，那麼能夠像設置css選擇器同樣設置$()的參數：學習

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>樣例</title>
    <script src="./3rdParty/jquery-3.5.1.js">
    </script>
    <script>
        $(function () {
            var active = false;
            $("button").click(function () {                
                if(active){
                    $("#test").css("color","#ff0000");
                }else{                         
                    $("p#test")[0].style.color = "#00ff00";                   
                }   
                active = !active;             
            })
        });
    </script>

    <style type="text/css">
        p {
            color:#ff0000;
        }

        #test {
            color:#0000ff;
        }
    </style>

</head>

<body>
    <p>這是一個段落。</p>
    <p id="test">這是另一個段落</p>
    <button>點我</button>
</body>

</html>

顯示結果與以前的例子相似，一樣是P標籤元素，只有id值爲test的元素改變顏色的功能生效了。

2.2.3. 類選擇器

類選擇器仍然與css同樣，經過.符號+類名做爲$()的參數，選擇全部有相同class的元素：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>樣例</title>
    <script src="./3rdParty/jquery-3.5.1.js">
    </script>
    <script>
        $(function () {
            var active = false;
            $("button").click(function () {                
                if(active){
                    $(".test1").css("color","#ffff00");
                }else{                               
                    $("p.test1")[0].style.color = "#00ff00";     
                    $("h2.test1")[0].style.color = "#00ff00";                 
                }   
                active = !active;             
            })
        });
    </script>

    <style type="text/css">
        p {
            color:#ff0000;
        }

        #test {
            color:#0000ff;
        }

        .test1{
            color: #ffff00;
        }
    </style>

</head>

<body>
    <h2 class="test1">這是一個標題</h2>
    <p class="test1">這是一個段落。</p>
    <p id="test">這是另一個段落</p>
    <button>點我</button>
</body>

</html>

須要注意這時選取到元素可能元素標籤可能不一樣。