a标签阻止跳转的方法

 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="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)