1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文檔</title> 6 <script type="text/javascript" src="jquery-1.7.1.js"></script> 7 <script type="text/javascript" src="my.js"></script> 8 <script> 9 $(function(){ 10 $('#id_btn').bind('click',function(){ 11 alert('啟用ajax'); 12 var $rtn = $.ajax('https://www.hao123.com/?tn=95784386_hao_pg',{dataType:'json'}); 13 //alert('接收到的消息json；'+JSON.stringify($rtn)); 14 15 var $rtn2 = $.ajax('http://www.zhihu.com/', 16 {dataType:'text'} 17 ).done(function(){ 18 alert('成功了：'); 19 }).fail(function(xhr,status){ 20 alert('失敗了：'+xhr.status+',原因：'+status); 21 }).always(function(){ 22 alert('請求完成，無論失敗或者成功都會返回'); 23 }); 24 25 // .getResponseHeader(function(key){ 26 // alert('key:'+key); 27 // }); 28 alert('接收到的消息html；'+JSON.stringify($rtn2)); 29 }); 30 }) 31 32 /** 33 flag: fasle ,那么就阻止冒泡 34 */ 35 function myalert(msg,flag){ 36 alert('提示消息：'+msg+' ,flag:'+flag); 37 return flag; 38 } 39 </script> 40 </head> 41 42 <body> 43 <a href="www.baidu.com" >lianjie</a> 44 45 <div class="img-container"> 46 <img alt="體壇風雲" src="http://i0.pdim.gs/t01e55d0f747dc41727.jpg"> 47 <img alt="如果src屬性值沒有對應找到相應的圖片，那么就顯示我，我是img標簽的alt屬性" src="http://weibo.com/daxixis/home?wvr=5&sudaref=www.bing.com"> 48 </div> 49 <ul> 50 51 <li> 52 <a href="http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html">參照這個</a> 53 </li> 54 <li> 55 <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a> 56 </li> 57 <li> 58 <a href="http://wayouliu.duapp.com/">我的小站</a> 59 </li> 60 <li> 61 <a href="http://wayouliu.duapp.com/" onclick="return myalert(this.href,false)" >我的小站</a> 62 </li> 63 64 65 66 </ul> 67 <p>這是p標簽不是a標簽，我不會受影響</p> 68 <input type="button" value="點擊" id="id_btn"/> 69 <div style="width:200px; height:200px; background:red"></div> 70 </body> 71 </html>
a標簽阻止跳轉的關鍵代碼：
<a href="http://wayouliu.duapp.com/" onclick="return myalert(this.href,false)" >我的小站</a>
這里的onclick屬性加了 return 這個關鍵字，因為myalert(msg,flag)這個方法會有一個返回值，如果返回值為false那么 onclick事件發生的時候就會return false，也就阻止了冒泡事件。
需要引入的my.js代碼如下：
my.js:
1 (function(j){ 2 j.extend({ 3 // extend用法1：擴展jQuery靜態方法. 4 readName:function(name){ 5 // alert(typeof this); //chrome和IE：function 6 var type = typeof this.name;//chrome: string ; IE:undefined 7 // alert(typeof this.name); 8 alert(typeof this); 9 if(name==null||name==undefined||name==''){ 10 alert('沒有入參name！'); 11 12 }else{ 13 alert('入參name：'+name); 14 } 15 } 16 }); 17 j.fn.WsetColor=function(options){ 18 alert('ddd'); 19 var defaults = { 20 'yanse':'green', 21 'zitiSize':'12px' 22 }; 23 var settings = j.extend(defaults,options); 24 alert('yanse:'+settings.yanse); 25 // return this.css({color:settings.yanse,fontSize:settings.zitiSize}); 26 // this.css({color:settings.yanse,fontSize:settings.zitiSize}); 27 //$("p").css("color","red"); 28 this.css("color","black"); 29 }; 30 31 32 j.fn.myPlugin = function(options) { 33 alert('22222222'); 34 // var defaults = { 35 // 'color': 'red', 36 // 'fontSize': '12px' 37 // }; 38 // var settings = $.extend(defaults, options); 39 // return this.css({ 40 // 'color': settings.color, 41 // 'fontSize': settings.fontSize 42 // }); 43 this.css('color','red'); 44 45 } 46 })(jQuery)