<!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. jasmine官方api参考

    jasmine 简介 jasmine 是一个行为驱动开发(TDD)测试框架, 一个js测试框架,它不依赖于浏览器.dom或其他js框架 jasmine有十分简介的语法 使用 从 这里 下载 stant ...

  2. JSP与Servlet的中文乱码处理

    注:百度来的,改了改... jsp页面的的头要设置好 <%@ page language="java" contentType="text/html; charse ...

  3. 关于cvScalar的那些事

    CvScalar 可存放在1-,2-,3-,4-TUPLE类型的捆绑数据的容器 该函数包含4个浮点成员,可以用来表示B(Blue),G(Green),R(Red),Alpha(表示图像的透明度) ty ...

  4. c 统计字符串中字符出现的个数

    1.单纯用数组来解题 思路:从左往右循环,每次碰到一个字符就和左边的字符串比较,如果有相同的就右移,如果没有找到相同的就从这个位置向右统计个数并输出. #include<stdio.h> ...

  5. asp.net 分页的制作

    /// <summary> /// 数据分页方法 /// </summary> /// <param name="PageIndex">当前页& ...

  6. Create a custom configSection in web.config or app.config file

    config file: <?xml version="1.0" encoding="utf-8" ?> <configuration> ...

  7. Lucene站内搜索的设计思路

    正好近期部门有一个小需求需要做商品的搜索,虽然最终由于工作量等原因先做数据库搜索,我依然用刚接触的Lucene弄了一套自嗨. 首先看需求:搜索:根据商品标题和内容搜索 没错,就这么简单! 我想了想,数 ...

  8. linux中的fork()函数以及标准I/O缓冲

    1. fork()创建的新进程成为子进程.一次调用,两次返回,子进程的返回值是0,而父进程的返回值是新子进程的进程ID,如果出现错误,fork返回一个负值. 2. 可以通过fork返回的值来判断当前进 ...

  9. js基础 1.简单js 语法 关键字 保留字 变量

    简单js JavaScript 是一个松散性的语言 对象属性却不想c中的结构体或者c++ 和java的对象, 对象继承机制 使用原型的prototype(原型链),js的分为三部分ECMAScript ...

  10. [转] IOS中AppDelegate中的生命周期事件的调用条件

    IOS中AppDelegate中的生命周期事件的调用条件 //当应用程序将要进入非活动状态执行,在此期间,应用程序不接受消息或事件,比如来电 - (void)applicationWillResign ...