jQuery的簡單使用

發布時間：2020-06-22 14:25:12 來源：網絡閱讀：563 作者：ZeroOne01 欄目：web開發

通過jQuery注冊事件

jQuery注冊事件也很簡單，通過選擇器包裝好標簽對象后，調用相關的事件方法即可，調用事件方法時需要傳遞一個函數對象，當事件被觸發就會執行函數里的代碼。在jQuery里的事件名稱并沒有與html中的事件名稱有多大區別，還是那個熟悉的味道熟悉的套路，示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button" name="click" >單擊事件</button>
        <button type="button" name="dbclick" >雙擊事件</button>
    </body>
    <script>
        $("button[name='click']").click(function(e){
            alert('單擊事件！');
        });
        $("button[name='dbclick']").dblclick(function(e){
            alert('雙擊事件！');
        });
    </script>
</html>

函數中的參數就是事件源對象：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button" name="click" >單擊事件</button>
        <button type="button" name="dbclick" >雙擊事件</button>
    </body>
    <script>
        $("button[name='click']").click(function(e){
            alert(e.toString());
        });
        $("button[name='dbclick']").dblclick(function(e){
            alert(e.toString());
        });
    </script>
</html>

在函數中可以使用this來表示當前觸發事件的對象，也可以通過選擇器去獲取當前對象：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button" name="click" >單擊事件</button>
        <button type="button" name="dbclick" >雙擊事件</button>
    </body>
    <script>
        $("button[name='click']").click(function(e){
            $("button[name='click']").html("Change");
        });
        $("button[name='dbclick']").dblclick(function(e){
            $(this).html("Change");
        });
    </script>
</html>

給標簽添加/刪除樣式

在jQuery中有一個addClass方法，可以給標簽添加類樣式，相對的removeClass方法則是刪除標簽中的類樣式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <style>
        .text_p{
            color: royalblue;
            font-size: 22px;
        }
    </style>
    <body>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
    </body>
    <script>
        $("p").mousemove(function(){
            $(this).addClass("text_p");
        });
        $("p").mouseout(function(){
            $(this).removeClass("text_p");
        });
    </script>
</html>

除了以上的方法外，還有一個css方法可以添加樣式，以鍵值的方式添加：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
    </body>
    <script>
        $("p").mousemove(function(){
            $(this).css("color","royalblue");
            $(this).css("font-size","22px");
        });
        $("p").mouseout(function(){
            $(this).css("color","black");
            $(this).css("font-size","16px");
        });
    </script>
</html>

如果css方法中傳遞的是鍵，那么就可以得到該鍵的值：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <style>
        .text_p{
            color: royalblue;
            font-size: 22px;
        }
    </style>
    <body>
        <p class="text_p">Hello World!</p>
        <p class="text_p">Hello World!</p>
        <p class="text_p">Hello World!</p>
    </body>
    <script>
        $("p").click(function(){
            alert($(this).css("color"));
            alert($(this).css("font-size"));
        });
    </script>
</html>

運行結果：
jQuery的簡單使用

控制標簽

通過jQuery可以很方便的控制標簽，例如可以對某個標簽增加子標簽，或者刪除某個標簽等等，append方法就可以給某個標簽添加一個子標簽：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <body>
        <button type="button">添加標簽</button>
        <div></div>
        <select></select>
    </body>
    <script>
        $("button").click(function(){
            $("div").append("<p>Hello Wolrd!</p>");
            $("select").append("<option>hello</option>");
        });
    </script>
</html>

remove方法可以刪除某個標簽：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">刪除標簽</button>
        <div>
            <p>hello world!</p>
            <p>hello world!</p>
            <p>hello world!</p>
            <p>hello world!</p>
            <p>hello world!</p>
        </div>
    </body>
    <script>
        $("button").click(function() {
            $("p").remove();
        });
    </script>

</html>

html方法類似于innerHTML方法，可以給開始和結束標簽之間填充HTML或文本：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">添加HTML</button>
        <div></div>
    </body>
    <script>
        $("button").click(function() {
            $("div").html("<p>Hello Wolrd!</p>");
        });
    </script>
</html>

text方法可以給開始和結束標簽之間填充純文本內容，即便傳的是HTML代碼也會被轉換成文本：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">添加文本</button>
        <p></p>
    </body>
    <script>
        $("button").click(function() {
            $("p").text("<p>Hello Wolrd!</p>");
        });
    </script>

</html>

val方法可以返回或設置被選元素的值，元素的值是通過 value 屬性設置的。該方法大多用于 input 元素。如果該方法未設置參數，則返回被選元素的當前值：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <body>
        <button type="button">得到/設置value</button>
        <input type="text" value="test" />
    </body>
    <script>
        $("button").click(function() {
            alert($("input").val());
            $("input").val("Hello World！");
        });
    </script>

</html>

控制標簽屬性

attr方法可以控制標簽的所有屬性，通過這個方法可以給某個標簽動態設置屬性，也可以通過這個方法來獲得某個屬性的值，而removeAttr方法則可以刪除指定的屬性：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test_div{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" id="add">設置屬性</button>
            <button type="button" id="del">刪除屬性</button>
            <img />
        </div>
    </body>
    <script>
        $("button").click(function() {
            $("img").attr("src","img/TIM截圖20180105215155.png");
            $("img").addClass("test_div");
        });
        $("#del").click(function(){
            $("img").removeAttr("src");
        });
    </script>

</html>

運行結果：
jQuery的簡單使用

jQuery的顯示/隱藏效果

show方法可以顯示某個組件，hide方法則可以隱藏某個組件：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" name="show">顯示</button>
            <button type="button" name="hide">隱藏</button>
            <img class="test" src="img/TIM截圖20180105215155.png" />
        </div>
    </body>
    <script>
        $("button[name='show']").click(function() {
            $("img").show();
        });
        $("button[name='hide']").click(function(){
            $("img").hide();
        });
    </script>

</html>

show以及hide方法中都有可選的參數，第一個參數可以設置元素從隱藏到完全可見的速度，可以直接傳遞毫秒數，也可以傳遞字符串：slow、normal、fast等。在設置速度的情況下，元素從隱藏到完全可見的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。第二個參數就是回調函數，show 函數執行完之后，要執行的函數，示例：

<script>
        function show_img(){
            alert("顯示完成！");
        }
        function hide_img(){
            alert("隱藏完成！");
        }
        $("button[name='show']").click(function() {
            $("img").show(5000,show_img);
        });
        $("button[name='hide']").click(function(){
            $("img").hide(5000,hide_img);
        });
</script>

toggle方法可以切換元素的可見狀態，如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素，同樣的可以設置過程時間和回調函數：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" name="toggle">顯示/隱藏</button>
            <img class="test" src="img/TIM截圖20180105215155.png" />
        </div>
    </body>
    <script>
        function done(){
            alert("完成！");
        }
        $("button[name='toggle']").click(function() {
            $("img").toggle(3000,done)
        });
    </script>

</html>

想要有淡入淡出的效果可以使用以下四種fade方法：

fadeIn() 方法用于淡入已隱藏的元素
fadeOut() 方法用于淡出可見元素
fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換
fadeTo() 方法允許漸變為給定的不透明度（值介于 0 與 1 之間）

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
    <body>
        <div>
            <button type="button" name="fadeIn">顯示</button>
            <button type="button" name="fadeOut">隱藏</button>
            <button type="button" name="fadeToggle">顯示/隱藏</button>
            <button type="button" name="fadeTo">淡出</button>
            <img class="test" src="img/TIM截圖20180105215155.png" />
        </div>
    </body>
    <script>
        function fadeIn_img(){
            alert("顯示完成！");
        }
        function fadeOut_img(){
            alert("隱藏完成！");
        }
        function done_img(){
            alert("完成！");
        }
        $("button[name='fadeIn']").click(function() {
            $("img").fadeIn(3000,fadeIn_img);
        });
        $("button[name='fadeOut']").click(function(){
            $("img").fadeOut(3000,fadeOut_img);
        });
        $("button[name='fadeToggle']").click(function(){
            $("img").fadeToggle(3000,done_img);
        });
        $("button[name='fadeTo']").click(function(){
            $("img").fadeTo("slow",0.5);
        });
    </script>

</html>

通過jQuery實現元素滑動效果可以使用以下三個方法：

slideDown() 方法用于向下滑動元素。
slideUp() 方法用于向上滑動元素。
slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style>
        .test {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>

    <body>
        <button type="button" name="slideDown">向下滑動</button>
        <button type="button" name="slideUp">向上滑動</button>
        <button type="button" name="slideToggle">向下滑動/向上滑動</button>
        <div>
            <img class="test" src="img/TIM截圖20180105215155.png" />
        </div>
    </body>
    <script>
        function slideDown_img() {
            alert("向下滑動完成！");
        }

        function slideUp_img() {
            alert("向上滑動完成！");
        }

        function done_img() {
            alert("完成！");
        }
        $("button[name='slideDown']").click(function() {
            $("div").slideDown(3000,slideDown_img);
        });
        $("button[name='slideUp']").click(function() {
            $("div").slideUp(3000,slideUp_img);
        });
        $("button[name='slideToggle']").click(function() {
            $("div").slideToggle(3000,done_img);
        });
    </script>

</html>

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

jQuery的簡單使用

通過jQuery注冊事件

給標簽添加/刪除樣式

控制標簽

控制標簽屬性

jQuery的顯示/隱藏效果

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

jQuery的簡單使用

通過jQuery注冊事件

給標簽添加/刪除樣式

控制標簽

控制標簽屬性

jQuery的顯示/隱藏效果

猜你喜歡

最新資訊

相關推薦

相關標簽