有一種很方便的東西叫jQuery

標籤：操作   載入   參數   dom   內容   func   ide   錨點   animate   

* jQuery文法
         *
         * 1、jQuery("選取器").action();通過選取器呼叫事件函數
         *   但jQuery中，jQuery可以用$代替，即$("選取器").action();
         *   ①選取器，可以直接使用CSS選取器，選中元素
         *   ②.action()表示對元素執行的操作
         * 2、文檔就緒函數：防止文檔在完全載入(就緒)之前運行JQuery代碼
         *     $(document).ready(function(){
         *         //JQuery代碼
         *         });
         *     簡寫： $(function(){
         *                 //JQuery代碼
         *                });
         *
         *     【文檔就緒函數& window.onload區別】
         *     ①window.onload需在網頁所有內容載入完成後執行(包括圖片音頻)
         *         文檔就緒函數，只需要在網頁DOM結構載入以後就可以執行
         *     ②window.onload只能寫一個，寫多個只會執行最後一個
         *         文檔就緒函數，可以寫多個，也不會被覆蓋
         * 3、JQuery對象與原生DOM對象互轉
         *     ①原生DOM對象轉JQuery對象： $(DOM對象);
         *         var p=document.getElementsByTagName("p");
         *         $(p);    //轉換為JQuery對象
         *     ②JQuery對象轉原生DOM對象：$("#p").get(0)    $("#p")[0]
         *         $("#p").get(0).style.color="red";

 

// 事件綁定捷徑
            /*$("button:first").click(function(){
                alert(1);
            });*/
            
            /*
             * 使用on綁定事件
             */
            
            // ① 使用on進行單事件綁定
            /*$("button").on("click",function(){
                // $(this) 取到當前呼叫事件函數的對象
                console.log($(this).html());
            });*/
            
            // ② 使用on同時為多個事件，綁定同一函數
            /*$("button").on("mouseover click",function(){
                console.log($(this).html())
            })*/
            
            // ③ 調用函數時，傳入自訂參數
            /*$("button").on("click",{name:"jianghao"},function(event){
                // 使用event.data.屬性名稱 找到傳入的參數
                console.log(event.data.name);
            })*/
            
            // ④ 使用on進行多事件多函數綁定
            /*$("button").on({
                click:function(){
                    console.log("click")
                },
                mouseover:function(){
                    console.log("mouseOver")
                }
            });*/
            
            /* ⑤ 使用on進行事件委派
             * >>> 將原本需要綁定到某元素上的事件，改為綁定在父元素乃至根節點上，然後委派給當前元素生效；
             *     eg：$("p").click(function(){});
             *                  ↓
             *         $(document).on("click","p",function(){});
             * >>> 作用：
             *     預設的綁定方式，只能綁定到頁面初始時已有的p元素，當頁面新增p元素時，無法綁定到新元素上；
             *     使用事件委派方式，當頁面新增元素時，可以為所有新元素繫結事件
             *
             *
             */
            /*$("button").on("click",function(){
                var p = $("<p>444444</p>");
                $("p").after(p);
            });*/
            
            /*$("p").click(function(){
                alert(1);
            });*/
            
            /*$(document).on("click","p",function(){
                alert(1);
            });*/
            
            
            
            
            /* off() 取消事件綁定
             *
             * 1. $("p").off(): 取消所有事件
             * 2. $("p").off("click"): 取消點擊事件
             * 3. $("p").off("click mouseover"):取消多個事件
             * 4. $(document).off("click","p"):取消事件委派
             *
             */
            
            
            
            /*
             * 使用.one() 綁定事件，只能執行一次
             */
            /*$("button").one("click",function(){
                alert(1);
            })*/
            
            
            
            /* .trigger("event")：自動觸發某元素的事件
             *
             * $("p").trigger("click",["haha","hehe"]); 觸發事件時，傳遞參數
             */
            /*$("p").click(function(event,arg1,arg2){
                alert("觸發了P的click事件"+arg1+arg2);
            })
            
            $("button").click(function(){
                $("p").trigger("click",["haha","hehe"]);
            })*/

 

/********************************動畫*************************************/
            
            /* .show()：讓隱藏元素顯示，同時修改元素的寬度、高度、opacity屬性
             *
             * ① 不傳參：讓隱藏的元素直接顯示，不進行動畫
             * ② 傳入時間：多少毫秒之內完成動畫
             * ③ 傳入(時間,函數)：完成動畫之後，執行回呼函數
             *
             * .hide():讓顯示元素隱藏，與show()相反；
             *
             *
             *
             * .slideDown(): 讓隱藏元素顯示，效果為從上往下，增加高度
             * .slideUp(): 讓顯示的元素隱藏，效果從下往上，減小高度
             * .slideToggle():讓顯示的隱藏，讓隱藏的顯示
             *
             *
             * .fadeOut(): 讓顯示元素隱藏，淡出
             * .fadeIn()： 讓隱藏元素顯示，淡入
             * .fadeToggle(): 讓顯示的隱藏，讓隱藏的顯示。淡入淡出
             * .fadeTo(時間，透明度，函數):同fadeToggle，但是多了透明度參數，可以指定顯示的最終透明度
             *
             *
             * .animate({最終的樣式屬性索引值對},動畫時間,動畫效果("linear" "swing"),回呼函數)： 自訂動畫
             *
             */

 

/* HTTP:超文字傳輸通訊協定 (HTTP)。
         *
         * URL：統一資源定位器
         * 組成： 協議名://主機名稱(IP地址):連接埠號碼/項目資源地址?傳遞參數索引值對#錨點
         * eg: http://127.0.0.1:8080/jd/index.html?name=jianghao
         *
         * localhost或127.0.0.1表示本機IP
         *
         */
        
        /* JSON 對象
         *
         * 1、JSON對象是索引值對的集合，鍵與值之間用":"分隔，多個索引值對之間，用","分隔
         * 2、多個JSON對象，可以放到數組中去。JSON對象和數組，可以相互嵌套；
         *
         * JSON的鍵，必須是字串。
         *
         */

有一種很方便的東西叫jQuery