<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                ### 1、jquery頁面載入事件 **1、傳統加載事件** ~~~ <body onload=”函數名()”> 頁面全部html和css代碼加載完成之后再調用指定的onload函數 window.onload = function(){ 加載過程 } ~~~ **2、jquery實現加載事件** ~~~ ① $(document).ready(function(){加載代碼}); ② $().ready(function(){加載代碼}); ③ $(function(){加載代碼}); ----- jQuery.fn.init ~~~ 第三種方式是對前兩種方法封裝的簡便實用方法 ~~~ //jquery加載事件 //第一種使用 $(document).ready(function(){ //加載過程代碼 alert('abc'); }); //第二種使用 $().ready(function(){ alert('hello'); }); //第三種使用 $(function(){ alert('china'); }); $(function(){ alert('beijing'); }); ~~~ **3、jquery加載與傳統加載區別** ① jquery加載事件可以同時使用多個,傳統只有一個 1. 多個人可以定義各自的加載事件 1. jquery加載事件都放入一個數組里邊,遍歷數組 1. 傳統方式加載事件是存入一個變量里邊,多次使用變量值被覆蓋 ② jquery加載事件比傳統加載事件執行速度快 1. jquery加載事件執行時間點,dom樹結構在內存中繪制完畢就執行加載 1. 傳統方式加載執行時間點,全部內容在瀏覽器里邊呈現出來才會執行 ![這里寫圖片描述](https://box.kancloud.cn/2016-04-28_57218a0aa80c1.jpg "") jquery加載事件捕捉的時間點不一樣 - 內容繪制完畢之后就捕捉時間 DOMContentLoaded - 傳統方式是內容在瀏覽器顯示完畢之后再來捕捉window.onload jquery內部原理模擬: ~~~ //模擬jQuery的加載事件行為 document.addEventListener("DOMContentLoaed", function(){alert("abcd")}); ~~~ 給當前應用設置一個事件DOMContentLoaded,dom樹結構在內存繪制完畢就執行一些過程。 ### 2、jquery事件綁定(bind的省略) **1、原生js的時間綁定** ~~~ <input type=”text” onclick=”f1()” /> 缺點:結構和行為沒有分離 document.getElementById(‘id’).onclick=f1; 結構和行為分離 document.getElementById(‘id’).addEventListener(‘click’, function(){}); 主流瀏覽器 .attachEvent(“onclick”,fucntion(){}); IE事件綁定 ~~~ **2、jquery事件綁定**(input框設置點擊事件click) ~~~ $(“input”).click(function(){}); $(“input”).mouseover(function(){}); ~~~ 在jquery里邊把普通時間名字的on去掉,就是jquery對應的事件方法名字 注意: ~~~ $(“input”).click(fn); 給input框設置事件 $(“input”).click(); 觸發input框的click事件執行 $(“div”).mouseover(); 觸發div的鼠標移入事件執行 ~~~ ~~~ $(function(){ $("#result").click(function(){ console.log('click'); }); $("#result").mouseover(function(){ //觸發點擊事件一并執行 $(this).click(); console.log('mouseover'); }); }); ~~~ 鼠標移入div后會觸發點擊事件執行 ### 3、jquery事件綁定(bind綁定) 上述講的事件綁定方法有: ~~~ <input onclick=”f1()”> document.getElementById(“#apple”).click = function(){} document.getElementById(“#pear”).addEventListener(‘click’,function(){}); $(選擇器).click(function(){});//bind的省略形式 ~~~ jQuery定義了bind()方法作為統一的接口,用來為每一個匹配元素綁定事件處理程序。其基本語法: ~~~ bind(type,[data],fn); ~~~ 其中參數type表示事件類型,參數data是可選參數,它可以作為event.data屬性值傳遞給事件對象的額外數據對象。參數fn表示事件處理函數。 bind方法與之前事件綁定不同之處: **1. 事件綁定和取消** (1) 可以為多個不同的事件類型,綁定同一個處理過程 ~~~ a) $(“#apple”).bind(“click mouseover mouseout”,function(){事件處理}); b) 多個不同類型事件中間使用單個空格分隔。 ~~~ (2). 可以為同一個對象同時綁定多個不同類型事件 ~~~ a) $(“#apple”).bind({click:fn, mouseover:fn, mouseout:fn}); b) bind(json對象) ~~~ (3). 可以為同一個對象的同一類型事件綁定多個處理過程 ~~~ a) $(“#apple”).bind(‘click’,fn1); b) $(“#apple”).bind(‘click’,fn2); ~~~ (4). 可以靈活取消事件綁定 ~~~ a) 全部事件都取消 i. $(“#apple”).unbind(); b) 可以取消指定類型取消 i. $(“#apple”).unbind(‘click’); c) 可以取消指定類型指定處理過程事件 i. $(“#apple”).unbind(‘click’,fn1); d) 第三項事件取消注意: $(“div”).bind(‘click’,function(){}); 不靈 function f1(){} $(“div”).bind(‘click’,f1); 有效 ~~~ 示例: ~~~ <script> function a(){ alert("ok, I see"); } function b(){ alert("ok, you see"); } function f1(){ //$("div").bind(事件類型[,事件傳遞參數],事件處理); //①綁定多個同類型事件 //事件可以使用匿名函數表達式,也可以使用函數指針 $("div").bind('click',a); $("div").bind('click',b); //② 同時為多個事件綁定相同的處理過程 $("div").bind("click mouseover mouseout",function(){ $("#result").append('hello'); }); //③ 同時綁定不同事件 $("div").bind({ click:function(){ $("#result").append('click') }, mouseover:function(){ $("#result").append('over') }, mouseout:function(){ $("#result").append('out') } }); } function del(){ //全部取消 //$("div").unbind(); //取消指定事件 //$("div").unbind('mouseover'); //取消指定事件具體處理程序 $("div").unbind("click",a); } </script> <body> <div>bread and milk</div> <input type="button" value="觸發" onclick="f1()"/> <input type="button" value="取消" onclick="del()"/> <span id="result"></span> </body> ~~~ **2. 事件綁定參數** ~~~ $(“div”).bind(‘click’,{json對象參數}, function(evt){ //參數具體使用 evt.data.對象屬性名稱; }); ~~~ 示例: ~~~ <script> function f1(){ //$("div").bind(事件類型[,事件傳遞參數],事件處理); var name = "tom"; $("div").bind('click',{name:'tom',age:33},function(evt){ //evt就是event事件對象 alert(evt.data.name);//tom alert(evt.data.age);//33 }); //name被復制了一份傳遞給nm $("div").bind('click',{nm:name},function(evt){ //evt就是event事件對象 alert(name); alert(evt.data.nm); //tom }); name = "jack"; //name被復制了一份傳遞給nm $("#btn").bind('click',{nm:name},function(evt){ //使用參數name alert(name); alert(evt.data.nm); //jack }); } //tom jack //jack jack //內存中只有一個name值為jack // div設置事件的時候,內部并沒有執行函數(只是做了一個聲明),name也沒有被訪問 // 等待事件被觸發的時候,name的值已經變為jack </script> <body> <div>bread and milk</div> <input type="button" value="元素" id="btn" /> <input type="button" value="觸發" onclick="f1()"/> <span id="result"></span> </body> ~~~ **3.事件觸發模擬** 用戶出發觸發事件執行: ~~~ $(“form”).submit(); ~~~ 模擬用戶觸發事件執行trigger(): 具體用法: trigger(type, [data])===>只需將你的type設置為自定義的事件即可。 ~~~ $(“form”).trigger(‘submit’); $(“form”).triggerHandler(‘submit’);(沒有瀏覽器默認動作) ~~~ triggerHandler() 只會執行具體事件,沒有瀏覽器默認動作 例如:表單有提交事件 表單通過按鈕真實被提交后發生的事情 ① 執行“ok,馬上出發”彈出框(提交事件的處理程序執行) ② 瀏覽器需要提交給下個頁面(瀏覽器默認動作) ~~~ $(function(){ $("form").bind("submit",function(){ alert("ok, i go quickly"); }); }); function f1(){ //trigger 觸發器 $("form").trigger("submit"); $("form").trigger("submit");//觸發指定事件執行,同時有瀏覽器默認動作 //$("form").triggerHandler("submit"); $("form").triggerHandler("submit");//觸發指定事件執行,不會執行瀏覽器默認動作 } ~~~ trigger()還可以出發自定義時間 ### 4、阻止瀏覽器默認動作 瀏覽器默認動作:表單提交,頁面重定向, `<a>`標簽的超鏈接 利用提交事件可以實現表單域驗證,通過頁面就跳轉,否則頁面要停止跳轉 阻止瀏覽器默認動作有兩種方式: ① return false; //也可以阻止事件冒泡 ② event.preventDefault(); //推薦使用 ~~~ $(function(){ //表單提交需要驗證表單域,正確就可以提交走,否則沒有瀏覽器默認動作 $("form").bind('submit',function(evt){ //對表單域進行驗證, //用戶名不正確 alert('用戶名不正確'); //return false; evt.preventDefault();//阻止瀏覽器默認動作 }); }); ~~~ ### 5、阻止事件冒泡 html —>head ———>body —————–>div ————————>input input和div都有點擊事件,由于事件冒泡作用,input框被點擊觸發事件之后,div的點擊事件也要被觸發。 有的時候根據需要不要進行事件冒泡,需要對其進行阻止 事件冒泡阻止: ① return false; 容易與“瀏覽器默認動作阻止“混淆 ② event.stopPropagation(); 阻止事件冒泡 ~~~ $(function(){ $("div").bind('click',function(){ alert("divdiv"); }); $("input").bind('click',function(evt){ alert("inputinput"); //阻止事件冒泡 //return false; evt.stopPropagation(); }); }); ~~~ ### 6、事件委派與解除委派 事件委派與事件綁定效果一致,解除委派與時間取消類似。 ~~~ $().bind(type,fn); $().live(type,fn); $().die(type,fn);//不帶參數就是解除live事件,如果帶了參數type,那會移除相應的live事件,如果同時指定了第二個參數,則只能移除指定事件的處理函數。 ~~~ “事件委派“較比”事件綁定“不同之處: **使用事件委派,后增加的兄弟元素也有相同的事件被設置。** ~~~ <script type="text/javascript"> $(function(){ //使用live事件委派,增加的元素也有與兄弟一樣的事件 $("li").live('click',function(){ //li被點擊輸出自己的文本內容 alert($(this).html()); }); }); //方法聲明要在加載事件外部,否則會訪問不到 function f1(){ $("ul").append("<li>北京</li>"); } </script> <style type="text/css"> div {width:300px; height:200px; background-color:pink;} </style> <body> <ul> <li>天</li> <li>角</li> <li>涯</li> <li>海</li> </ul> <input type="button" value="增加" onclick="f1()" /> </body> ~~~ ### 7、事件合并 Query有兩個合成事件—-hover()和toggle(),這兩個方法都是jQuery自定義的方法 **1、hover()方法** 語法結構為 hover(enter,leave) hover()方法用于模擬光標懸停事件。當光標移動到元素上時,會觸發指定的第一個函數,離開時觸發第二個函數。 這個函數很好理解,而且實際開發中會有很多妙用。 ~~~ <ul> <li>天</li> <li>角</li> <li>涯</li> <li>海</li> </ul> ~~~ 鼠標移動在每個li身上,有高亮效果 本質:每個li都有鼠標移入和移出事件,有三種實現方法 1、第一種方式: ~~~ $(“li”).each(function(){ $(this).mouseover(fn); $(this).mouseout(fn); }); ~~~ 第二種方式: ~~~ $(“li”).mouseover(fn) $(“li”).mouseout(fn) ~~~ 第三種方式:hover() 該方法就是對mouseover和mouseout兩個事件封裝的簡便使用 ~~~ $(“li“).hover(兩個函數參數:移入和移出函數); $(“li”).hover( function(){}, function(){} ); ~~~ ~~~ <script> $(function(){ $("li").hover( function() { $(this).css('background-color','lightblue'); }, function() { $(this).css("background-color",""); } ); }); </script> <style type="text/css"> div {width:300px; height:200px; background-color:pink;} </style> <body> <ul> <li>天</li> <li>角</li> <li>涯</li> <li>海</li> </ul> </body> ~~~ **2、toggle()方法** 語法結構 `toggle(fn1,fn2,fn3...fnN)` toggle()方法用于模擬鼠標連續單擊事件,第一次單擊事件觸發指定的第一個函數,第二次就觸發第二個函數…. 如果有更多的函數則依次觸發,直到最后一個。隨后的每次單擊都是對這幾個函數的輪番調用。 看到這個方法第一想到的是toggleClass() 用于給元素對象切換樣式。 toggle方法也是挺好理解的,以前項目中倒是沒有應用過。舉個例子: ~~~ <html> <head> <title> unbind() </title> <script src="jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(function(){ $("input").toggle( function(){$("ul").append($("<li><h2>左 慈</h2></li>"))}, function(){$("ul").append($("<li><h2>曹 沖</h2></li>"))}, function(){$("ul").append($("<li><h2>神周瑜</h2></li>"))}, function(){$("ul").append($("<li><h2>神曹操</h2></li>"))}, function(){$("ul").append($("<li><h2>孫尚香</h2></li>"))}, function(){$("ul").append($("<li><h2>神關羽</h2></li>"));$(this).unbind()} ) }) //--> </script> </head> <body> <h1>三國殺變態武將</h1> <div > <ul> </ul> </div> <input type="button" value="連續點擊按鈕可切換事件" > </body> </html></span> ~~~ 注意:在上例中引用的jquery庫不是以前常用的jquery-2.1.0.min.js了,是因為在jquery1.9版本中將toggle()的切換功能去掉了,現在toggle這個功能只能控制元素的顯隱。 ### 8、事件命名空間 jQuery支持事件命名空間以方便管理事件。例如,在下面示例中為div元素綁定多個事件類型,然后使用命名空間進行規范,從而方便管理。所謂事件命名空間,就是在事件類型后面以點語法附加一個別名,以便于引用事件,如,click.a ,其中a就是click當前事件的別名。 ~~~ <html> <head> <title> jQuery命名空間 </title> <script src="jquery-2.1.0.min.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(function(){ $("div").bind("click.a",function(){ $("body").append("<p>click事件<p/>") }); $("div").bind("dblclick.a",function(){ $("body").append("<p>dblclick事件<p/>") }); $("div").bind("mouseover.a",function(){ $("body").append("<p>mouseover<p/>") }); $("div").bind("mouseout.a",function(){ $("body").append("<p>mouseout<p/>") }); }) //--> </script> </head> <body > <div id="" class=""> jQuery命名空間 </div> </body> </html> ~~~ 我們為div綁定的幾個事件都指定了命名空間,這樣在刪除事件的時候,就可以直接指定命名空間即可。例如調用下面一行代碼就可以把上面綁定的事件全部刪除: ~~~ $("div").unbind(".a"); ~~~ 同樣,假如我們為click事件類型指定了不同的命名空間,那么當我們只想刪一個的時候只要指定它的命名空間即可。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看