2. 程式人生 > >jQuery語法及事件函式總結

jQuery語法及事件函式總結

阿新 • • 發佈：2019-01-14

　　jQuery是繼prototype之後的又一個優秀的Javascript框架。它是由 John Resig 於 2006 年初建立的，它憑藉簡潔的語法和跨平臺的相容性，極大地簡化了 JavaScript開發人員遍歷HTML文件、操作DOM、處理事件、執行動畫和開發Ajax的操作。其獨特而又優雅的程式碼風格改變了JavaScript程式設計師的設計思路和編寫程式的方式。總之，無論是網頁設計師、後臺開發者、業餘愛好者還是專案管理者，也無論是JavaScript初學者還是JavaScript高手，都有足夠的理由去學習JQuery。

　　jQuery是一個快速、簡潔的JavaScript框架，是一個優秀的JavaScript庫。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事。

1、jQuery的功能

　　-HTML元素選取
　　-HTML元素操作
　　-CSS 操作
　　-HTML 事件函式
　　-JavaScript 特效和動畫
　　-HTML DOM 遍歷和修改
　　-AJAX
　　-Utilities
　　引用jQuery：將下載的jQuery檔案放在網頁的同一目錄下，然後才能使用jQuery。 

<head>
     <script src="jquery-1.10.2.min.js"></script>
</head>

2、jQuery語法

元素選擇器

　　jQuery選擇器參見此前轉載的一篇部落格

jQuery選擇器完全總結

文件就緒事件

　　我們的js程式碼都需要等文件載入完畢後才開始執行js程式碼。在jQuery中，所有 jQuery 函式位於一個 document.ready函式中，這是文件就緒事件。 

$(document).ready(function(){

   // 開始寫 jQuery 程式碼...

});

　　其實使用jQuery時，最常見的情況是像下面這樣開始寫指令碼的： 

$(function(){ 
      // do something 
});
//$(function()){}是jQuery的方法，等價於$(document).ready(function
 
(){}))
//$(document).ready(function(){})；$().ready(function(){})；和$(function(){})三者都是一樣的，
//最完整的寫法是：$(document).ready(function(){})，ready()函式僅能用於當前文件，因此無需選擇器。
//所以document選擇器可以不要，那麼就可以寫成：$().ready(function(){})
//最後$的預設事件就是ready，所以，ready也可以省略，寫成：$(function(){});

　　兩種寫法指令碼開始的寫法完全等價。ready事件在DOM結構繪製完成之後就會執行，這樣能確保就算有大量的媒體檔案沒加載出來，js程式碼一樣可以執行。

dom物件與jQuery物件相互轉換

<head>
     <script src="jquery-1.10.2.min.js"></script>
</head>
<body>
    <input id="username" type="text" value="zhangsan" >
    <script type="text/javascript"> 
        //獲取的是dom物件
        var n = document.getElementById("username");
        //將dom物件轉換成jQuery物件的語法：$(dom物件)
        //建議jQuery物件以$符開頭命名
        var $x = $(n);
        console.log($x.val());
    </script>
</body>

　　jQuery物件內部是一個數組，比如我們獲取所有文字框，然後得到一個jQuery物件，其實這個物件內部是陣列。直接使用陣列下標獲得陣列中的一個元素就得到了dom物件。 

<body>
    <input id="username" type="text" value="zhangsan" >
    <script type="text/javascript">
        var n = document.getElementById("username");
        //獲取jQuery物件
        var $n = $(n); 
        //兩種方式，將JQuery物件轉換成dom物件
        var n1 = $n[0];          //直接使用陣列下標獲得dom物件
        var n2 = $n.get(0);     //使用jQuery物件的get方法
        console.log(n1.value);
        console.log(n2.value);
    </script>
</body>

元素屬性設定與獲取

　　attr(name) 獲取指定屬性名的值
　　attr(name) 獲取指定屬性名的值
　　attr(key,value) 給一個指定屬性設定值
　　removeAttr(name) 移除指定屬性

<body>
    <input type="text" name="text1"><br>
    <script type="text/javascript">
        $(document).ready(function(){
            //使name為text1的文字框不可用
           $("input[name='text1']").attr("disabled","disabled");
            //使其可用
            $("input[name='text1']").removeAttr("disabled");
        });
    </script>
</body>

　　val() 獲取value值
　　val(“xxx”) 給value設定值
　　text() 獲取文字值
　　text(“xxx”)設定文字值
　　html() 獲取html程式碼
　　html(“xxx”)設定html程式碼 

<body>
    <div name="div1">
        <a>aaa</a>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
                console.log($("div").html());
                //獲取到的內容是<a>aaa</a>，如果是text，則只獲取aaa 
            });
    </script>
</body>

　　通過jQuery還可設定元素的CSS
　　css(name) 獲取指定名稱的css值
　　css(name,value) 給指定名稱的css屬性設定值
　　css({“propertyname”:”value”,”propertyname”:”value”,…}) 給多個css屬性設定值

<body>
    <div style="background:gray;width:100px;height:100px;"></div><br>
    <input type="button" id="btn" value="按鈕">
    <script type="text/javascript">
        $(document).ready(function(){
                $("#btn").click(function(){
                    $("div").css("background-color","red");
                });     
        });
    </script>
</body>

新增和刪除元素

　　元素的新增分為內部新增和外部新增兩種： 

A.append(B) 將B插入到A的內部後面 
<A>
    ...
    ...
    <B></B>
</A>

A.prepend(B) 將B插入到A的內部前面
<A>
    <B></B>
    ...
    ...
</A>
A.appendTo(B) 將A插入到B的內部後面
A.preendTo(B) 將A插入到B的內部前面

A.after(B)將B插入到A後面(同級)
<A></A>
<B></B>
A.before(B)將B插入到A前面 
<B></B>
<A></A>
A.insertAfter(B) 將A插入到B後面(同級)
A.insertBefore(B) 將A插入到B前面

　　內部新增元素示例： 

<body>
    <ul id="ul1">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="tj">天津</li>
    </ul>
    <br>
    <ul id="ul2">
        <li id="hn">河南</li>
        <li id="sd">山東</li>
        <li id="gz">廣州</li>
    </ul>
    <br>
    <input type="button" id="btn1" value="按鈕">
    <script type="text/javascript">
        $(document).ready(function(){

            $("#btn1").click(function(){
                //將上海新增到ul2中
                var $sh=$("#sh");
                var $ul2=$("#ul2");
                $ul2.append($sh);
            });
        });
    </script>
</body>

　　外部新增元素示例： 

<body>
    <ul id="ul1">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="tj">天津</li>
    </ul>
    <br>
    <ul id="ul2">
        <li id="hn">河南</li>
        <li id="sd">山東</li>
        <li id="gz">廣州</li>
    </ul>
    <p id="p1">第一句話</p>
    <p id="p2">第二句話</p>
    <p id="p3">第三句話</p>
    <br>
    <input type="button" id="btn1" value="按鈕">
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn1").click(function(){
                //將ul2插入到p2的後面
                var $p2=$("#p2");
                var $ul2=$("#ul2");
                $p2.after($ul2);
            });
        });
    </script>
</body>

　　 刪除元素的函式主要如下：
　　 empty()清空標籤體
　　 remove()刪除當前物件，移除繫結事件和繫結資料
　　 detach()刪除當前物件，保留繫結事件和繫結資料

　　 清空標籤體示例如下：

<body>
    <p id="p1">第一句話</p>
    <p id="p2">第二句話</p>
    <p id="p3">第三句話</p>
    <br>
    <input type="button" id="btn1" value="按鈕">
    <script type="text/javascript">
        $(document).ready(function(){
            //點選按鈕，清空p2內容
            $("#btn1").click(function(){
                var $p2=$("#p2");
                $p2.empty();
            });
        });
    </script>
</body>

　　 刪除物件示例如下：

<body>
    <p id="p1">第一句話</p>
    <p id="p2">第二句話</p>
    <p id="p3">第三句話</p>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#p1").click(function(){
                alert("哈哈");
            });
            //先刪除p1元素，再將p1新增到p3後面
            //用detach刪除，保留繫結事件，點選有效果
            var $p1=$("#p1").detach();
            //用remove刪除，不保留繫結事件，點選無效
            //var $p1=$("#p1").remove();
            $("#p3").after($p1);
        });
    </script>
</body>

複製和替換元素

　　 clone(Events)：複製元素，Events是一個boolean值，為true時表示同時複製物件的事件，預設為false。

<body>
    <input type="button" id="btn1" value="按鈕">
    <p id="p1">第一句話</p>
    <p id="p2">第二句話</p>
    <p id="p3">第三句話</p>
    <script type="text/javascript">
        $(document).ready(function(){
            //點選按鈕，複製當前元素，並新增在body內部後面
            $("#btn1").click(function(){
                var $new=$(this).clone();
                $("body").append($new);
            });
        });
    </script>
</body>

　　 A.replaceWith(B)表示用B替換A
　　 A.replaceAll(B)表示A替換B 

<body>
    <input type="button" id="btn1" value="按鈕">
    <p id="p1">第一句話</p>
    <p id="p2">第二句話</p>
    <p id="p3">第三句話</p>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn1").click(function(){
                //將所有p標籤用<a>xxx</a>替換
                $("p").replaceWith("<a>xxx</a>");
            });
    });
    </script>
</body>

過濾元素

　　 jQuery中進行元素過濾的函式較多：

eq(index|-index):
index：整數，從開頭獲得指定索引的元素。索引從0開始，0表示第一個
-index：負數，從尾部獲得指定索引的元素。索引從-1開始，-1表示最後一個
first()     選擇第一個元素 
last()      選擇最後一個元素 
is()        用於判斷 
hasClass()  判斷是否含有指定class。<xxx  class="xx">  
filter()    篩選出指定表示式匹配的元素集合，返回符合一定條件的元素 
not()       不符合條件的元素將從選擇中返回，符合條件的元素將被移除 
has()       返回擁有指定子元素的元素。 
slice(start,end)  擷取元素，包含頭不包含尾slice(2,4),則篩選2和3元素

　　 例1：

<body>
    <div style="background:gray;width:100px;height:100px;"></div><br>
    <div style="background:gray;width:100px;height:100px;"></div><br>
    <div style="background:gray;width:100px;height:100px;"></div><br>
    <div style="background:gray;width:100px;height:100px;"></div><br>
    <input type="button" id="btn" value="按鈕">
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
                 //選擇索引為2的div，索引從0開始
                $("div").eq(2).css("background-color","red");
                //選擇第一個div
                $("div").first().css("background-color","yellow");
                //選擇最後一個div
                $("div").eq(-1).css("background-color","blue");    
            });     
        });
    </script>
</body>

　　 例2：

<body>
    <div style="background:gray;width:100px;height:100px;" class="div1"></div><br>
    <div style="background:gray;width:100px;height:100px;"><p>China</p></div><br>
    <div style="background:gray;width:100px;height:100px;"></div><br>
    <div style="background:gray;width:100px;height:100px;" class="div4"></div><br>
    <input type="button" id="btn" value="按鈕">
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
                //判斷第一個div class屬性是不是div1
                alert($("div").first().is(".div1"));
                //判斷最後一個div class是否是div4
                alert($("div").last().hasClass("div4"));
                //選擇含有p元素的div
                $("div").has("p").css("background-color","red");
            });     
        });
    </script>
</body>

　　 例3：

<body>
    <div style="background:gray;width:100px;height:100px;" class="div1"></div><br>
    <div style="background:gray;width:100px;height:100px;"><p>China</p></div><br>
    <div style="background:gray;width:100px;height:100px;"></div><br>
    <div style="background:gray;width:100px;height:100px;" class="div4"></div><br>
    <input type="button" id="btn" value="按鈕">
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
                //篩選有class屬性的div
                $("div").filter("[class]").css("background-color","red");
                //篩選沒有class屬性的div
                $("div").not("[class]").css("background-color","yellow");  
            });     
        });
    </script>
</body>

　　 例4：

<body>
    <div style="background:gray;width:100px;height:100px;" class="div1"></div><br>
    <div style="background:gray;width:100px;height:100px;"><p>China</p></div><br>
    <div style="background:gray;width:100px;height:100px;"></div><br>
    <div style="background:gray;width:100px;height:100px;" class="div4"></div><br>
    <input type="button" id="btn" value="按鈕">
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
                //擷取第2.3個div
                $("div").slice(1,3).css("background-color","red");
            });     
        });
    </script>
</body>

3、jQuery事件

　　 常用的jQuery事件函式羅列如下：

blur()          失去焦點 
change()        選擇改變時候觸發事件，例如select列表 
click()         單擊 
dbclick()       雙擊 
focus()         獲得焦點 
keydown()       鍵盤按下的過程 
keypress()      鍵盤按到底時 
keyup()         鍵盤彈起 
mousedown()     滑鼠按下 
mousemove()     滑鼠移動 
mouseout()        滑鼠移出指定元素 
mouseover()     滑鼠移入指定元素    
mouseup()       滑鼠彈起 
resize()        改變大小，例如窗體改變大小 
scroll()        滾動條滾動 
select()        選擇 
submit()        提交 
unload()        頁面解除安裝，頁面關閉時 
focusin()       獲得焦點,跟focus區別在於，他可以在父元素上檢測子元素獲取焦點的情況。例如父元素內部有一個子元素，當焦點在子元素時，會觸發fucusin。但是不會觸發focus。 
focusout()      失去焦點，跟blur事件區別在於，他可以在父元素上檢測子元素失去焦點的情況。例如父元素內部有一個子元素，當子元素失去焦點時，會觸發fucusout。但是不會觸發blur。 
mouseenter()    滑鼠移入,跟mouseover事件不同，只有在滑鼠指標移入被選元素時，才會觸發mouseenter事件。如果滑鼠穿過被選元素的子元素，不會觸發，但是會觸發mouseover事件。 
mouseleave()    滑鼠移出,跟mouseout事件不同，只有滑鼠指標離開被選元素時，才會出發mouseleave事件。如果滑鼠指標離開被選元素的子元素，不會觸發，但是會觸發mouseout事件。

　　 常用事件函式例子：

<body>
    <input id="e01" type="text" /><span id="textMsg"></span> 
    <hr>
    <div id="e02" ></div><span id="divMsg"></span> 
    <hr>
    <input id="e03" type="button" value="可以點選"/><span id="buttonMsg"></span>
    <script type="text/javascript">
        $(document).ready(function(){

            $("#e01").blur(function(){
                $("#textMsg").html("文字框失去焦點：blur");
            }).focus(function(){
                $("#textMsg").html("文字框獲得焦點：focus");
            }).keydown(function(){
                $("#textMsg").append("鍵盤按下：keydown");
            }).keypress(function(event){
                $("#textMsg").append("鍵盤按下：keypress");
            }).keyup(function(){
                $("#textMsg").append("鍵盤按下：keyup");
            });


            //記錄移動的次數
            var i = 0;
            $("#e02").mouseover(function(){
                $("#divMsg").html("滑鼠移上：mouseover");
            }).mousemove(function(){
                $("#divMsg").html("滑鼠移動：mousemove , " + i++ );
            }).mouseout(function(){
                $("#divMsg").html("滑鼠移出：mouseout");
            }).mousedown(function(){
                $("#divMsg").html("滑鼠按下：mousedown");
            }).mouseup(function(){
                $("#divMsg").html("滑鼠彈起：mouseup");
            });


            $("#e03").click(function(){
                $("#buttonMsg").html("單擊：click");
            }).dblclick(function(){
                $("#buttonMsg").html("雙擊：dblclick");
            });

        });
    </script>
</body>

4、jQuery動畫效果

　　 常用效果函式如下：

顯示與隱藏
show([speed],[function])       顯示
hide([speed],[function])        隱藏。
toggle([speed],[function])     在hide()和show()方法之間切換

滑動
slideDown([speed],[function])    通過調整高度來滑動顯示被選元素
slideUp([speed],[function])         通過調整高度來滑動隱藏被選元素
slideToggle([speed],[function])  在slideDown()和slideUp()方法之間切換 

淡入淡出
fadeIn(speed,callback)              淡出顯示
fadeOut(speed,callback)           淡入隱藏
fadeToggle(speed,callback)      在fadeIn()和fadeOut()方法之間切換 
fadeTo(speed,opacity,callback) 允許漸變為指定的透明度。
opacity指定透明度，在0與1之間；speed指定顯示的時間，單位是毫秒。

　　 示例：

<head>
    <style type="text/css">
        div{
            border:1px solid #000;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <input type="button" id="b1" value="顯示/隱藏 b1Div" />
    <div id="b1Div"></div> 
    <hr>
    <input type="button" id="b2" value="滑出/滑入b2Div"/>
    <div id="b2Div"></div> 
    <hr>
    <input type="button" id="b3" value="淡出/淡入b3Div" />
    <div id="b3Div"></div>
    <hr>
    <input type="button" id="b4" value="設定指定的透明度b4Div" />
    <div id="b4Div"></div>
    <script type="text/javascript">
        $(document).ready(function(){
            //點選按鈕1是隱藏和顯示   
            $("#b1").click(function(){
                $("#b1Div").toggle("1000");
            });

            //點選按鈕2，是滑動
            $("#b2").click(function(){
                $("#b2Div").slideToggle("slow");
            });

            //點選按鈕3，是淡入淡出
            $("#b3").click(function(){
                $("#b3Div").fadeToggle("slow");
            });

            //點選按鈕4，設定指定透明度
            $("#b4").click(function(){
                $("#b4Div").fadeTo("slow",0.25);
            });

        });
    </script>
</body>

5、jQuery的Ajax

相關推薦

jQuery語法及事件函式總結

　　jQuery是繼prototype之後的又一個優秀的Javascript框架。它是由 John Resig 於 2006 年初建立的，它憑藉簡潔的語法和跨平臺的相容性，極大地簡化了 JavaScri

python序列之元組概念及相關函式總結（一）

元組是序列的一種，元組是不可變序列（不能修改，替換），但可進行查詢，增添；元組的建立語法很簡單：用逗號分隔一些值，用圓括號括起來，元組就建立了。 1.先來一個簡單的元組：（圓括號也可以不帶） tou

jQuery語法與事件

jQuery 網站上提供了兩種方式的釋出檔案。一種是內容經過壓縮的檔案；另一種是原始檔案。前者檔案中不包含程式碼註釋以及程式碼執行過程中不需要的空白字元，它適合於生產環境(正式使用的環境)中使用，可以減少檔案載入所需時間。後者檔案中包含詳細的程式碼註釋，適合於開發和測試環境中使用。

SQL語法及常用函式

1. INSERT 全列或指定列插入值 INSERT INTO 表名稱 VALUES (值1, 值2,....) INSERT INTO 表名稱 (列1, 列2,...) VALUES (值1, 值2,....) 2. DISTINCT 僅選取唯一不同的值，我們需

JQuery中常用 事件 清單總結

所有事件都是方法 所有事件都是方法blur(fn) ：當失去焦點時觸發 change(fn) ：當狀態改變時觸發 click(fn) ：當單擊時觸發 dblclick(fn) ：當雙擊時觸發 focu

JQuery下載及選擇器總結

dex 文件 不同的 一起 類選擇器 first 找到 tor 屬性選擇器 JQuery下載 JQuery只是一個JS函數庫，要使用其中的方法還是要在JS文件中進行調用。 一般去https://mvnrepository.com/這個網站下載，搜索JQuery就能找到JS

【總結】裝置樹語法及常用API函式

一、DTS編寫語法 二、常用函式 裝置樹函式思路是：uboot啟動時將裝置樹地址傳給核心，核心解析裝置樹，並建立裝置，初始化相關屬性，驅動中通過of_get_XXX函式去獲取裝置樹載入時建立的裝置。

JavaScript事件委托原理及Jquery中的事件委托

and 就是 傳播 break scrip lock -i 位置 dom 概念 事件委托，通俗來說就是將元素的事件委托給它的父級或者更外級元素處理。 事件流 事件流描述的是從頁面中接收事件的順序。 事件冒泡：事件開始由最具體的元素接收，然後逐級向上傳播到較為不具體的節點

【總結整理】JQuery基礎學習---事件篇

交互 .... over 指針 events 返回值 避免 func 坐標 jQuery鼠標事件之click與dbclick事件 用交互操作中，最簡單直接的操作就是點擊操作。jQuery提供了兩個方法一個是click方法用於監聽用戶單擊操作，另一個方法是dbclick方

Web開發——JavaScript庫（jQuery 語法 / 選擇器 / 事件）

gb2312 cto 選擇 sel color 事件處理器 效果 處理程序 http 　　通過 jQuery，您可以選取（查詢，query） HTML 元素，並對它們執行“操作”（actions）。 1、jQuery 語法 1.1 jQuery語法舉例 1.1.1 $(th

jQuery中bind（），one（），on（），live（）這幾個繫結事件函式的區別

1、bind（）方法 為每個匹配元素的特定事件繫結事件處理函式。bind（）方法的底層邏輯是on（）方法。 .bind() 方法是用於往文件上附加行為的主要方式。所有JavaScript事件物件，比如focus, mouseover, 和 resize，都是可以作為type引數傳遞進來

03： 迴圈結構 case語句 、 函式及中斷控制 總結和答疑

Top NSD SHELL DAY03 案例1：使用for迴圈結構 案例2：使用while迴圈結構 案例3：基於case分支編寫指令碼 案例4：使用Shell函式 案例5：中斷及退出 1 案例1：使用for迴圈結構 1.1 問題 本案例要求

Javascript和Jquery語法對比總結

目的 相信大家都知道jq是js的一個類庫,是為了方便我們開發前端，但是筆者在剛開始學習js和jq時經常將兩者的語法記混和混用，所以整理下兩者實現相同功能之前的語法區別。 宣告變數 javascript宣告變數 語法 var + 變數名 =值；或者 let + 標量名=值；ES6新增了let命令，用於宣

js中的onclick事件和JQuery中的click方法以及on方法事件用法總結

1.onclick是繫結的事件(它是一個事件)，注意該事件繫結只是JacaScript中有(js中的)，Jquery中並沒有此事件，告訴瀏覽器在滑鼠點選時候要做什麼 2.click方法(jquery中的)作用是觸發onclick事件，只要執行了元素的click()方法，就會觸發onclick事件

201711671223《Java程式設計》第九周學習總結 第9章元件及事件處理

201711671223《Java程式設計》第九周學習總結 第9章元件及事件處理 教材內容學習總結 元件可以觸發焦點事件。元件可以用addFocusListener(FocusListener listener)註冊焦點事件監視器，當元件獲得焦點監視器後如果元件從無輸入焦點變成有輸入焦點或者

MySQL常用函式總結及用法

1、字串函式ascii(str)   返回字串str的第一個字元的ascii值(str是空串時返回0)  mysql> select ascii('2');  　　-> 50  mysql> select ascii(2);&nbs

Python+Selenium WebDriver API：瀏覽器及元素的常用函式及變數整理總結

      由於網頁自動化要操作瀏覽器以及瀏覽器頁面元素，這裡筆者就將瀏覽器及頁面元素常用的函式及變數整理總結一下，以供讀者在編寫網頁自動化測試時查閱。 from selenium import webdriver driver=webdriver.Firefox()

jQuery中阻止事件冒泡的方式及區別

方法一：event.stopPropagation(); $("#div").mousedown(function(event){ event.stopPropagation(); }); 方法二：return false; $("#di

jQuery之ajax資料互動（語法及示例）

一、jajx基礎語法 　1.1寫法 $.ajax({ 　　url:'地址', 　 data:{ 　　　　引數:xxx,   　　　　引數:xxx 　　}, 　　type:'POST/GET', 　　success:function(str){ //成功回撥函式

jQuery原始碼-解除繫結事件函式unbind

jQuery提供的解除事件繫結的介面,其實jQuery任何解除事件繫結的介面都最終會走this.off函式 解除委託委託繫結也是如此 undelegate介面函式也是最終走off函式 unbind: function( types, fn ) {return this.of