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 亚洲精品国产精品国自产观看,国内精品久久久久影院网站,91视频专区 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          jQuery的事件（代碼演示如何使用）
          
        
           
          
	
	
          
		
                        
          、jQuery的事件有哪些？
          javscript的事件：onClick,onmouseover
          jquery的事件：click,mouseover
          注意jQuery的事件比javascript的事件少一個(gè)on
          1）鼠標(biāo)事件
           click：?jiǎn)螕羰录?/p>
           //dbclick：雙擊事件
           mouseover：鼠標(biāo)懸念（移入）
           mouseout：鼠標(biāo)移出
          • 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");//當(dāng)鼠標(biāo)移入li元素時(shí)添加樣式
           }).mouseout(function(){
           //$(this).removeClass() //當(dāng)鼠標(biāo)移出時(shí)刪除所有樣式
           $(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時(shí)刪除指定樣式
           });
           });
           </script>
           <div id="nav">
           <ul>
           <li><a href="#">首頁(yè)</a></li>
           <li><a href="#">服裝</a></li>
           <li><a href="#">電器</a></li>
           <li><a href="#">團(tuán)購(gòu)</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) 鍵盤(pán)事件
           keydown：鍵盤(pán)按下事件
           keypress：鍵盤(pán)按下并放開(kāi)時(shí)觸發(fā)
           keydown：鍵盤(pán)放開(kāi)時(shí)觸發(fā)
          • 1
          • 2
          • 3
          • 4
          • 5
           <script type="text/javascript">
           $(function(){
           //按回車鍵自動(dòng)登錄(不用再點(diǎn)擊登錄按鈕)
           $(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：獲得焦點(diǎn)時(shí)觸發(fā)
           blur：失去焦點(diǎn)
           select：文本選中時(shí)觸發(fā)
          • 1
          • 2
          • 3
          • 4
          • 5
          <script type="text/javascript">
           $(function(){
           //文本框獲得焦點(diǎn)時(shí)，將當(dāng)前文本框的內(nèi)容清空（值等于"請(qǐng)輸入登錄名.."）
           //文本框失去焦點(diǎn)時(shí)，判斷內(nèi)容是否為"請(qǐng)輸入登錄名.."或是否為空，那么將這個(gè)值"請(qǐng)輸入登錄名.."設(shè)回到文本框
           $("#txtLoginName").focus(function(){
           if($(this).val()=='請(qǐng)輸入登錄名...'){
           $(this).val('');//清空內(nèi)容
           }
           }).blur(function(){
           if($(this).val().trim()==''){
           $(this).val('請(qǐng)輸入登錄名...');//清空內(nèi)容
           }
           });
           });
           </script>
           <form id="actionForm" action="../index.html">
           登錄名：<input id="txtLoginName" value="請(qǐng)輸入登錄名..." /><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(){
           //綁定單個(gè)事件
          // $("#btn1").bind('click',function(){
          // alert("OK");
          // });
           //綁定多個(gè)事件
           $("#btn1").bind({
           mouseover:function(){
           alert("鼠標(biāo)懸念");
           },
           mouseout:function(){
           alert("鼠標(biāo)移出");
           }
           })
           //解除綁定事件
           $("#btn2").click(function(){
           //$("#btn1").unbind("click");//解除綁定的單個(gè)事件
           $("#btn1").unbind("mouseover mouseout");//解除多個(gè)綁定的事件，用空格分隔
           //$("#btn1").unbind();//解除所有綁定的事件
           });
           });
           </script>
           <input type="button" id="btn1" value="點(diǎn)我" /><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()：相當(dāng)于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");//當(dāng)鼠標(biāo)移入li元素時(shí)添加樣式
          // }).mouseout(function(){
          // //$(this).removeClass() //當(dāng)鼠標(biāo)移出時(shí)刪除所有樣式
          // $(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時(shí)刪除指定樣式
          // });
           $("#nav li").hover(
           function(){
           $(this).addClass("abc");//當(dāng)鼠標(biāo)移入li元素時(shí)添加樣式
           },
           function(){
           $(this).removeClass("abc") //當(dāng)鼠標(biāo)移出時(shí)刪除指定樣式
           }
           );
           });
           </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) 鼠標(biāo)連續(xù)點(diǎn)擊
           b) 顯示和隱藏 
          • 1
          • 2
          • 3
          • 4
          <script type="text/javascript">
           $(function(){
           //點(diǎn)擊當(dāng)前頁(yè)面時(shí)顯示紅綠藍(lán)的背景色
           $("body").toggle(
           function(){
           $(this).css("background-color","red");
           },
           function(){
           $(this).css("background-color","green");
           },
           function(){
           $(this).css("background-color","blue");
           }
           );
           });
           </script>
           </head>
           <body>
           測(cè)試
           </body>
          節(jié)我們學(xué)習(xí) jQuery 中的事件的使用，jQuery 是專門為響應(yīng) HTML 頁(yè)面中的事件而設(shè)計(jì)的。我們?cè)谑褂脮r(shí)，需要遵循以下原則：
          • 把所有 jQuery 代碼置于事件處理函數(shù)中。
          • 把所有事件處理函數(shù)置于文檔就緒事件處理器中。
          • 把 jQuery 代碼置于單獨(dú)的 .js 文件中。
          • 如果存在名稱沖突，則重命名 jQuery 庫(kù)。
          什么是事件
          首先我們要知道什么是事件，頁(yè)面對(duì)不同訪問(wèn)者的響應(yīng)叫做事件，例如點(diǎn)擊某個(gè)按鈕，選擇單選框或復(fù)選框，滑動(dòng)鼠標(biāo)等，這些都可以稱為事件。
          jQuery常用事件
          在 jQuery 中，大多數(shù) DOM 事件都有一個(gè)相應(yīng)的 jQuery 方法。例如我們前面提到過(guò)的點(diǎn)擊事件的對(duì)應(yīng)的方法為 click() 方法。
          click點(diǎn)擊事件
          當(dāng)我們點(diǎn)擊元素時(shí)，會(huì)發(fā)生 click 點(diǎn)擊事件，這需要用到 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>點(diǎn)擊按鈕</button>
  </div>
</body>
</html>

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

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
中文字幕精品亚洲无线码一区
|
少妇激情一区二区三区视频|
国产麻豆精品一区二区三区|
亚洲日韩国产欧美一区二区三区
|
chinese国产一区二区|
全国精品一区二区在线观看|
一区二区国产精品|
精品永久久福利一区二区|
免费看无码自慰一区二区|
一区二区在线视频观看|
日韩免费无码一区二区三区|
亚洲AV日韩综合一区|
国产日韩精品一区二区三区在线|
精品欧洲AV无码一区二区男男|
精品无码人妻一区二区三区18|
精品视频在线观看你懂的一区
|
久久无码一区二区三区少妇|
蜜桃臀无码内射一区二区三区|
日韩精品一区二区三区中文字幕|
亚洲综合无码一区二区|
中文字幕在线一区二区三区|
天堂va在线高清一区
|
亚洲色精品VR一区区三区|
韩国福利一区二区三区高清视频|
免费无码一区二区三区蜜桃大|
国产乱码一区二区三区爽爽爽|
精品一区二区三区在线观看l
|
精品人妻无码一区二区色欲产成人
|
亚洲香蕉久久一区二区三区四区
|
久久久国产一区二区三区
|
亚洲AV无码一区二区一二区|
无码一区二区三区|
久久福利一区二区|
日韩精品视频一区二区三区
|
亚洲av色香蕉一区二区三区|
日韩免费一区二区三区在线|
亚洲av无码一区二区三区在线播放|
无码人妻一区二区三区在线
|
日韩中文字幕精品免费一区|
亚洲欧洲无码一区二区三区|
无码日韩AV一区二区三区|