<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script type="text/javascript" src="jquery-1.7.1.js"></script>

 <script type="text/javascript" src="my.js"></script>

 <script>

     $(function(){

         $('#id_btn').bind('click',function(){

             alert('启用ajax');

             var $rtn = $.ajax('https://www.hao123.com/?tn=95784386_hao_pg',{dataType:'json'});

             //alert('接收到的消息json；'+JSON.stringify($rtn));

             var $rtn2 = $.ajax('http://www.zhihu.com/',

                 {dataType:'text'}

             ).done(function(){

                 alert('成功了：');

             }).fail(function(xhr,status){

                 alert('失败了：'+xhr.status+',原因：'+status);

             }).always(function(){

                 alert('请求完成，无论失败或者成功都会返回');

             });

             // .getResponseHeader(function(key){

             //     alert('key:'+key);

             // });

             alert('接收到的消息html；'+JSON.stringify($rtn2));

         });

     })

     /**

         flag: fasle ,那么就阻止冒泡

     */

     function myalert(msg,flag){

         alert('提示消息：'+msg+' ,flag:'+flag);

         return flag;

     }

 </script>

 </head>

 <body>

 <a href="www.baidu.com" >lianjie</a>

 <div class="img-container">

                     <img alt="体坛风云" src="http://i0.pdim.gs/t01e55d0f747dc41727.jpg">

                      <img alt="如果src属性值没有对应找到相应的图片，那么就显示我，我是img标签的alt属性" src="http://weibo.com/daxixis/home?wvr=5&sudaref=www.bing.com">

                   </div>

 <ul>

     <li>

         <a href="http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html">参照这个</a>

     </li>

     <li>

         <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>

     </li>

     <li>

         <a href="http://wayouliu.duapp.com/">我的小站</a>

     </li>

     <li>

         <a href="http://wayouliu.duapp.com/" onclick="return myalert(this.href,false)" >我的小站</a>

     </li>

 </ul>

 <p>这是p标签不是a标签，我不会受影响</p>

 <input type="button" value="点击" id="id_btn"/>

 <div style="width:200px; height:200px; background:red"></div>

 </body>

 </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:

 (function(j){

     j.extend({

     // extend用法1：扩展jQuery静态方法.

     readName:function(name){

         // alert(typeof this);      //chrome和IE：function

         var type = typeof this.name;//chrome: string ;  IE:undefined

         // alert(typeof this.name);

         alert(typeof this);

         if(name==null||name==undefined||name==''){

             alert('没有入参name！');

         }else{

             alert('入参name：'+name);

         }

     }

 });

     j.fn.WsetColor=function(options){

         alert('ddd');

         var defaults = {

             'yanse':'green',

             'zitiSize':'12px'

         };

         var settings = j.extend(defaults,options);

         alert('yanse:'+settings.yanse);

         // return this.css({color:settings.yanse,fontSize:settings.zitiSize});

         // this.css({color:settings.yanse,fontSize:settings.zitiSize});

         //$("p").css("color","red");

         this.css("color","black");

     };

     j.fn.myPlugin = function(options) {

         alert('22222222');

   //   var defaults = {

   //       'color': 'red',

   //       'fontSize': '12px'

   //   };

   //   var settings = $.extend(defaults, options);

   //   return this.css({

   //       'color': settings.color,

   //       'fontSize': settings.fontSize

   //   });

     this.css('color','red');

 }

 })(jQuery)

a标签阻止跳转的方法的更多相关文章

  1. 解决MUI阻止a标签默认跳转事件—方法总结

    用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...

  2. 5阻止A默认行为和JS实现页面跳转的方法

    <!--HTML中阻止A标签的默认行为: href="javascript:;" href="javascript:void 0;"--><! ...

  3. 阻止点击<a>标签链接跳转

      我们常用的在a标签中有点击事件(<a href="地址">链接</a>),其中“href”参数只要不为空,点击该链接时,页面会自动跳转:如果指定的“hr ...

  4. Web设计中打开新页面或页面跳转的方法 js跳转页面

    Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...

  5. 最齐全的站点元数据meta标签的含义和使用方法

    最齐全的站点元数据meta标签的含义和使用方法 随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到现在Windows 7.Windows 8的I ...

  6. a 标签的跳转属性

     a 标签中调用js的几种方法   我们常用的在a标签中有点击事件:1. a href="JavaScript:js_method();" 这是我们平台上常用的方法,但是这种方法在 ...

  7. embed标签 阻止点击事件 让父元素处理点击事件

    由于规定页面显示的PDF文件要有固定大小,使得页面风格统一 最开始发现了CSS样式pointer-events 写出如下代码,在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面 <a ...

  8. 使用mui框架后a标签无法跳转

    由于最近工作项目上使用到前台mui框架,笔者在将H5转换为jsp时,遇见各种各样问题,原因归结为对mui框架不熟悉,今天就遇见一个特别奇怪的问题,界面中超链接<a>标签无法跳转,笔者试着添 ...

  9. 用select标签实现跳转

    用select标签实现跳转 一.用select标签实现跳转JavaScript代码 我们经常有遇到需要用select标签跳转到新网页的情况,dw生成的代码太复杂,那么有没有精简的代码得以实现呢?经过仔 ...

随机推荐

  1. 补丁(patch)的制作与应用

    命令简介 用到的两个命令是diff和patch. diff diff可以比较两个东西,并可同时记录下二者的区别.制作补丁时的一般用法和常见选项为: diff [选项] 源文件(夹) 目的文件(夹) - ...

  2. cpu亲和力总结taskset和setcpu及其他相关

    一:taskset -- 获取或指定进程运行的CPU. man taskset出现 CPU affinity is a scheduler property that "bonds" ...

  3. 动画画圆的效果特效ios源码

    一款不错的支持动画画圆的效果特效源码,该效果实现了动画画圆,还可以扩展成画其他平面图形功能等,大家可以下载看看吧. //定义所需要画的图形  -(void)intiUIOfView  {      U ...

  4. tree（简单并差集）

    tree  Accepts: 156  Submissions: 807  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 65536/65 ...

  5. SDOI(队列)

    SDOI Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Sub ...

  6. [ javascript ] 司徒正美的fadeOut-fadeIn效果!

    首先感谢司徒正美的文章! 在司徒大神的博客看到一个简单的渐入渐出的效果.全然採用js实现. 例如以下: <!doctype html> <html dir="ltr&quo ...

  7. 2013杭州网络赛D题HDU 4741(计算几何 解三元一次方程组)

    Save Labman No.004 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  8. javascript的函数相关属性和方法

    作为一名前端初学者,应该坚持每天去学习,去总结 ,去复习,去接触更新鲜的事物.但是这段时间很浮躁,虽说也是在一直学习,自己能吸收的少之又少.今日在这突然冒出来,实感惭愧. 1.函数名.name 获得函 ...

  9. CD key 生成

    题目描述如下: 某欧软件需要实现简易的CD-KEY算法,输入3个正整数,以空格隔开,根据者3个正整数生成的cd-key字符串.输出格式:xxxx-xxxx-xxxx-xxyy. 包含16个字符,以短划 ...

  10. c++ primer plus 习题答案(3)

    p296.3 #include<iostream> #include<cstdlib> #include<string> #include<cstring&g ...