Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 99视频在线观看高清,国产999在线,婷婷在线视频国产综合 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          jQuery的事件（代碼演示如何使用）
          
        
           
          
	
	
          
		
                        
          、jQuery的事件有哪些？
          javscript的事件：onClick,onmouseover
          jquery的事件：click,mouseover
          注意jQuery的事件比javascript的事件少一個on
          1）鼠標事件
           click：單擊事件
           //dbclick：雙擊事件
           mouseover：鼠標懸念（移入）
           mouseout：鼠標移出
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
           <style>
           .abc{
           background-color: #aaa;
           }
           </style>
           <script type="text/javascript">
           $(function(){
           $("#nav li").mouseover(function(){
           $(this).addClass("abc");//當鼠標移入li元素時添加樣式
           }).mouseout(function(){
           //$(this).removeClass() //當鼠標移出時刪除所有樣式
           $(this).removeClass("abc") //當鼠標移出時刪除指定樣式
           });
           });
           </script>
           <div id="nav">
           <ul>
           <li><a href="#">首頁</a></li>
           <li><a href="#">服裝</a></li>
           <li><a href="#">電器</a></li>
           <li><a href="#">團購</a></li>
           <li><a href="#">在線瀏覽</a></li>
           </ul>
           </div>
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          2) 鍵盤事件
           keydown：鍵盤按下事件
           keypress：鍵盤按下并放開時觸發
           keydown：鍵盤放開時觸發
          • 1
          • 2
          • 3
          • 4
          • 5
           <script type="text/javascript">
           $(function(){
           //按回車鍵自動登錄(不用再點擊登錄按鈕)
           $(document).keydown(function(event){
           if(event.keyCode==13){
           $("#actionForm").submit();
           return true;
           }
           return false;
           })
           });
           </script>
           <form id="actionForm" action="../index.html">
           登錄名：<input id="txtLoginName" /><br />
           密碼：<input type="password" />
           <input type="button" value="登錄" />
           </form>
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          3) 表單事件
           focus：獲得焦點時觸發
           blur：失去焦點
           select：文本選中時觸發
          • 1
          • 2
          • 3
          • 4
          • 5
          <script type="text/javascript">
           $(function(){
           //文本框獲得焦點時，將當前文本框的內容清空（值等于"請輸入登錄名.."）
           //文本框失去焦點時，判斷內容是否為"請輸入登錄名.."或是否為空，那么將這個值"請輸入登錄名.."設回到文本框
           $("#txtLoginName").focus(function(){
           if($(this).val()=='請輸入登錄名...'){
           $(this).val('');//清空內容
           }
           }).blur(function(){
           if($(this).val().trim()==''){
           $(this).val('請輸入登錄名...');//清空內容
           }
           });
           });
           </script>
           <form id="actionForm" action="../index.html">
           登錄名：<input id="txtLoginName" value="請輸入登錄名..." /><br />
           密碼：<input type="password" />
           <input type="button" value="登錄" />
           </form>
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          4）其它事件
           bind()：綁定事件
           unbind()：移除綁定事件
          • 1
          • 2
          • 3
          • 4
           <script type="text/javascript">
           $(function(){
           //綁定單個事件
          // $("#btn1").bind('click',function(){
          // alert("OK");
          // });
           //綁定多個事件
           $("#btn1").bind({
           mouseover:function(){
           alert("鼠標懸念");
           },
           mouseout:function(){
           alert("鼠標移出");
           }
           })
           //解除綁定事件
           $("#btn2").click(function(){
           //$("#btn1").unbind("click");//解除綁定的單個事件
           $("#btn1").unbind("mouseover mouseout");//解除多個綁定的事件，用空格分隔
           //$("#btn1").unbind();//解除所有綁定的事件
           });
           });
           </script>
           <input type="button" id="btn1" value="點我" /><br />
           <input type="button" id="btn2" value="解除綁定" />
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
           hover()：相當于mouseover和mouseout的組合
          • 1
          • 2
           .abc{
           background-color: #aaa;
           }
           </style>
           <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
           <script type="text/javascript">
           $(function(){
          // $("#nav li").mouseover(function(){
          // $(this).addClass("abc");//當鼠標移入li元素時添加樣式
          // }).mouseout(function(){
          // //$(this).removeClass() //當鼠標移出時刪除所有樣式
          // $(this).removeClass("abc") //當鼠標移出時刪除指定樣式
          // });
           $("#nav li").hover(
           function(){
           $(this).addClass("abc");//當鼠標移入li元素時添加樣式
           },
           function(){
           $(this).removeClass("abc") //當鼠標移出時刪除指定樣式
           }
           );
           });
           </script>
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
           togger()：
           a) 鼠標連續點擊
           b) 顯示和隱藏 
          • 1
          • 2
          • 3
          • 4
          <script type="text/javascript">
           $(function(){
           //點擊當前頁面時顯示紅綠藍的背景色
           $("body").toggle(
           function(){
           $(this).css("background-color","red");
           },
           function(){
           $(this).css("background-color","green");
           },
           function(){
           $(this).css("background-color","blue");
           }
           );
           });
           </script>
           </head>
           <body>
           測試
           </body>
          節我們學習 jQuery 中的事件的使用，jQuery 是專門為響應 HTML 頁面中的事件而設計的。我們在使用時，需要遵循以下原則：
          • 把所有 jQuery 代碼置于事件處理函數中。
          • 把所有事件處理函數置于文檔就緒事件處理器中。
          • 把 jQuery 代碼置于單獨的 .js 文件中。
          • 如果存在名稱沖突，則重命名 jQuery 庫。
          什么是事件
          首先我們要知道什么是事件，頁面對不同訪問者的響應叫做事件，例如點擊某個按鈕，選擇單選框或復選框，滑動鼠標等，這些都可以稱為事件。
          jQuery常用事件
          在 jQuery 中，大多數 DOM 事件都有一個相應的 jQuery 方法。例如我們前面提到過的點擊事件的對應的方法為 click() 方法。
          click點擊事件
          當我們點擊元素時，會發生 click 點擊事件，這需要用到 click() 方法。
          示例：
          <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      alert("hello, xkd!");
    });
  });
</script>
</head>
<body>
  <div>
    <button>點擊按鈕</button>
  </div>
</body>
</html>

          在瀏覽器中的演示效果：
          載DOM
          以瀏覽器裝載文檔為例，在頁面加載完畢后，瀏覽器會通過javaScript為DOM元素添加事件，在常規的javaScript代碼中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready(function(){})方法，該方法是事件模塊中比較重要的一個函數，可以極大地提高Web應用程序的響應速度。jQuery就是用$(document).ready()代替傳統javaScript的window.onload方法，通過使用該方法，可以在DOM載入就緒時就對其進行操作并執行它所綁定的函數，在使用過程中需要注意$(document).ready()方法和window.onload方法之間的細微區別，區別如下：
          • 執行時機
          $(document).ready()和window.onload有相似的功能，但在執行時機方面是有區別的。window.onload是在網頁中所有的元素(包括元素的所有關聯文件)完全加載到瀏覽器之后才執行，而通過$(document).ready()方法注冊的事件處理程序，在DOM完全就緒時就可以被調用。
          舉一個例子，有一個大型的圖庫網站，為網頁中所有圖片添加某些行為，如單擊圖片后隱藏或顯示，如果用window.onload來處理，那么用戶必須等到每一幅圖片都加載完畢才可以進行操作，如果使用$(document).ready()方法來進行設置，只要DOM就緒即可操作，不需要等待所有圖片下載完畢，很顯然，把網頁解析為DOM樹的速度要比把頁面中所有關聯文件加載完畢的速度快的多。
          • 多次使用
          在頁面中可以多次使用$(document).ready()去綁定加載執行事件，綁定事件順序執行。
          • 簡寫方式
          $(document).ready(function(){ });可以簡寫為$(function(){ });，另外，$(document)也可以簡寫為$()，當$()不帶參數時，默認參數是“document”，因此還可以簡寫為$().ready(function(){ });。
          事件綁定
          在文檔裝載完成后，如果打算為元素綁定事件來完成某些操作，則可以使用()方法來對匹配元素進行特定事件的綁定，on()方法的調用格式為：
          on(events,[selector],[data],fn)
          說明如下：
          第1個參數是事件類型，類型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、keypress、keyup、和error等，當然也可以是自定義名稱。
          第2個參數為可選參數，一個選擇器字符串用于過濾器的觸發事件的選擇器元素的后代。如果選擇的< null或省略，當它到達選定的元素，事件總是觸發。
          第3個參數為可選參數，作為event.data屬性值傳遞給事件對象的額外數據對象。
          第4個參數則是用來綁定的處理函數。
          • 基本效果
          下面通過一個示例來了解on()方法的用法，假設網頁中有一個常見問題解答，單擊“標題”鏈接將顯示內容。
          HTML代碼如下：
          示例DOM
          按照需求，需要完成以下幾個步驟。
          1. 等待DOM裝載完畢。
          2. 找到“標題”所在元素，綁定click事件。
          3. 找到“內容”元素，將“內容”元素展示。
          根據分析的步驟，可以輕易地寫出如下jQuery代碼：
          $(function(){
	$("#panel h5.head").on("click",function(){
		$(this).next().show();//$(this).next()獲取"內容"元素
	});
});
          • 加強效果
          在上面的例子中，單擊“標題“顯示出“內容”；再次單擊“標題”，“內容”并沒有任何反應，現在需要加強效果：第2次單擊“標題”，“內容”隱藏；再次單擊“標題”，“內容”又顯示，兩個動作循環出現，為了實現這個功能，需要經過以下幾個步驟：
          1. 等待DOM裝載完畢。
          2. 找到“標題”所在元素，綁定click事件。
          3. 找到“內容”元素，如果“內容”元素是顯示的，則隱藏，否則顯示。
          為了判斷元素是否顯示，可以使用jQuery中的is()方法來完成，代碼如下：
          $(function(){
	$("#panel h5.head").on("click",function(){
		if($(this).next().is(":visible")){ //如果"內容"顯示
			$(this).next().hide();
		} else {
				$(this).next().show();
		}
	});
});
          通過以上的修改，當反復單擊“標題”鏈接時，“內容”會在隱藏和顯示兩種狀態下切換。
          • 改變綁定事件的類型
          上面的例子中，給元素綁定的事件類型是click，當用戶單擊的時候會觸發綁定的事件，執行事件的代碼，現在把事件類型換成mouseover和mouseout，即當光標滑過的時候就觸發事件，需要進行以下幾步操作：
          1. 等待DOM裝載完畢。
          2. 找到“標題”所在的元素，綁定mouseover事件。
          3. 找到“內容”元素，顯示內容。
          4. 找到“標題”所在元素，綁定mouseout事件。
          5. 找到“內容”元素，隱藏內容。
          根據分析的步驟，可以寫出如下代碼：
          $(function(){
	$("#panel h5.head").on("mouseover",function(){
		$(this).next().show();
	}).on("mouseout",function(){
		$(this).next().hide();
	});
});
          • 簡寫綁定事件
          像click、mouseover和mouseout這類事件，在程序中經常會使用到，jQuery為此也提供了一套簡單的寫法，簡單寫法和on()方法類似，實現的效果也相同，唯一的區別是能夠減少代碼量，簡寫如下：
          $(function(){
	$(on#panel h5.headon).mouseover(function(){
		$(this).next().show();
	}).mouseout(function(){
		$(this).next().hide();
	});
});
          合成事件
          jQuery有兩個合成事件——hover()和toggle()方法，類似前面講過的ready()方法，這兩個方法都屬于jQuery自定義的方法。
          • hover()方法
          hover()方法的語法結構為：
          hover(enter,leave);
          hover()方法用于模擬光標懸停事件，當光標移動到元素上時，會觸發指定的第1個函數(enter);當光標移除這個元素時，會觸發指定的第2個函數(leave)。
          將上面的例子改寫成hover()方法，jQuery代碼如下：
          $(function(){
	$("#panel h5.head").hover(function(){
		$(this).next().show();
	},function(){
		$(this).next().hide();
	});
});
          • toggle()方法
          toggle()方法的語法結構為：
          toggle(fn1,fn2,…fnN);
          toggle()方法用于模擬鼠標連續單擊事件，第1次單擊元素，觸發指定的第1個函數，當再次單擊同一元素時，則觸發指定的第2個函數，以此類推，直到最后一個，然后循環。
          $(function(){
	$("#panel h5.head").toggle(function(){
		$(this).next().show();
	},function(){
		$(this).next().hide();
	});
});
          toggle()方法在jQuery中還有另外一個作用：切換元素的可見狀態，如果元素是可見的，單擊切換后則為隱藏的，如果元素是隱藏的，單擊切換后則為可見的。
          若感覺對您有用，可以關注并轉發，您的關注是對我莫大的支持！
          關注并轉發后私信“jQuery基礎材料”獲取線下資料，包括完整基礎資料、chm文檔、示例代碼及其他參考資料。
          上一章：jQuery基礎回顧——jQuery中的DOM操作
          下一章：jQuery基礎回顧——事件冒泡、移除事件、模擬事件
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲AV午夜福利精品一区二区|
亚洲福利一区二区精品秒拍|
91精品一区二区|
国产成人精品亚洲一区|
成人中文字幕一区二区三区|
亚洲AV成人精品日韩一区18p|
国产乱码精品一区二区三区麻豆
|
国产色情一区二区三区在线播放|
色婷婷亚洲一区二区三区|
国产一区二区三区影院|
无码人妻一区二区三区在线视频|
国产波霸爆乳一区二区|
成人无码一区二区三区|
一区二区三区免费视频观看|
国产伦精品一区二区三区四区
|
亚洲爆乳无码一区二区三区|
岛国无码av不卡一区二区|
一区二区三区精品视频|
一区二区三区无码高清视频|
国产在线一区二区三区av|
国产精品亚洲专区一区|
美女福利视频一区二区|
人妻无码一区二区三区四区|
国产精品小黄鸭一区二区三区
|
欧洲精品无码一区二区三区在线播放|
一区二区三区电影网|
无码精品人妻一区二区三区影院|
精品一区二区三区在线播放|
国产一区二区三区日韩精品|
无码日韩精品一区二区人妻|
高清一区二区三区视频|
国产精品污WWW一区二区三区|
日韩精品无码一区二区三区AV|
国产亚洲日韩一区二区三区|
亚洲A∨无码一区二区三区|
免费无码VA一区二区三区|
精品人妻无码一区二区三区蜜桃一
|
国产主播一区二区三区|
黄桃AV无码免费一区二区三区|
国产在线观看一区二区三区精品|
福利一区二区三区视频在线观看
|