a标签使用jquery跳转 a标签javascript

转载

jojo 2023-08-31 20:59:47

文章标签 a标签使用jquery跳转 js a标签超链接 js常用调用方法 文章分类 jQuery 前端开发

Js的几种调用方法（参考总结的）

众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法<a href="javascript:;"></a>，所以就来整理下a标签中href的几种用法。

  1、a href="javascript:js_method();"

这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候，

不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。

W3C标准不推荐在href里面执行javascript语句

  2、 a href="javascript:void(0);" onclick="js_method()"

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。

而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

  3、a href="javascript:;" onclick="js_method()"

这种方法跟跟2种类似，区别只是执行了一条空的js代码。

  4、a href="#" onclick="js_method()"

这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

  5、a href="#" onclick="js_method();return false;"

这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。

综合上述，在a中调用js函数最适当的方法推荐使用：

1. <a href="javascript:void(0);" onclick="js_method()"></a>
2. <a href="javascript:;" onclick="js_method()"></a>
3. <a href="#" onclick="js_method();return false;"></a>

代码示例：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>
   <body>
      <p><a href="http://www.baidu.com">href="http://www.baidu.com"</a></p>

     
      <!-- 1、a href="javascript:js_method();"
       这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候，
      不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。
      W3C标准不推荐在href里面执行javascript语句
       -->
      	<p><a href="javascript:method1()">href="javascript:method1()"</a></p>
     
 
      <!--2、 a href="javascript:void(0);" οnclick="js_method()" 
         这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。
         而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
      -->
		<p><a href="javascript:void(0);" onclick="method2()">href="javascript:void(0);" onclick="method2()"</a></p>
 
     
 
      <!-- 3、a href="javascript:;" οnclick="js_method()"
         这种方法跟跟2种类似，区别只是执行了一条空的js代码。   
       -->
		<p><a href="javascript:;" onclick="method3()">href="javascript:;" οnclick="method3()"</a></p>
 
     
 
      <!-- 4、a href="#" οnclick="js_method();return false;"      
      这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。
       -->
		<p><a href="#" onclick="method4();return false">href="#" οnclick="method4();return false;"</a></p>
 
      

      <!-- 5、a href="#" οnclick="js_method()"
       这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
       -->
	  <div style="width: auto; height: 1000px;"></div>	
      <p><a href="#" οnclick="method3()">返回顶部</a></p>
 
     
     
   </body>
   <script>
      function method1(){
         alert(111);
      }
 
      function method2(){
         alert(222);
      }

      function method3(){
         alert(333);
      }

      function method4(){
         alert(444);
      }
   </script>
</html>

a标签使用jquery跳转 a标签javascript_a标签使用jquery跳转