目录

• JavaScript:void(0)
• • 分析语句1
  • 分析语句2
• JavaScript:void(0)和#
• • 分析语句1
  • 分析语句2
• javascript:void(0)和javascript:;
• 结论
• • 结论1
  • 结论2

JavaScript:void(0)

我们在编程时，经常会出现javaScript:viod(0)。

这是标签a的调用函数void(0)，而调用它有什么用呢？

javascript:viod(express)，这express可以是任何信息，比如js函数，常量等。但括号内必须有表达式，假如是void()，编辑器就会报错：expression expected，如图所示：

因而，我们需要在javascript:viod(express)设置表达式，既然说到了 javaScript:viod(0)，我们就来分析它，在分析它之前，我们先看一段脚本代码：

<a href="../计算器联系.html" id="testc" onclick="javascript:testc(this.id);">测试无javascript:void(0)</a>  <!--语句1-->

<a href="javascript:void(0)" id="testd" onclick="javascript:testc(this.id);">测试有javascript:void(0)</a>  <!--语句2-->

<form method="post" action="#">
   <input type="text" id="txt" />
</form>

<!--这是上述方法的script脚本-->
<script type="text/javascript">
  function testc(objId){
	var val=$("#txt").val();
	  if(val!=""){
	    $("#"+objId).attr("href","../计算器联系.html");
		return true;
	  }else{
		alert("文本框不能为空;");
		return false;
	}
  }
</script>

ps:“javascript:”是 JavaScript 标准的表达式

分析语句1

对于语句1来说，不论是返回的结果是true还是false，其都能跳转的制定的页面。

因而，这和我们最初的想法是不一致。

我们最初的想法，一开始不跳转，当条件成立时，其才跳转指定的页面。

分析语句2

对于语句2来说，首先javaScript:viod(0)是一个死循环，当用户点击testd时，其不会发生任何任何改变，但它如果符合某个条件时，testd就跟着发生改变了。

也就是说，如果条件为真时，就跳转到指定的页面，这就符合我们的想法了。

这也是javaScript:viod(0)的神奇之处。因而，我们可以利用javaScript:viod(0)这种操作，进行ajax、判断等一些操作。

JavaScript:void(0)和#

JavaScript:void(0)和#功能相似，一开始并不执行任何操作，当等到条件满足使，才会触发某个事件或函数，他们具体的区别在哪里呢？我们来看一段代码：

<form method="post" action="#">
  <input type="text" id="txt" />
  <input type="submit" value="测试javascript" onclick="return sub();return false;"/>			
</form>
<br />
<hr />
		
javascript:void(0)和#		
<a href="javascript:void(0)" id="testd" onclick="javascript:testc(this.id);">测试有javascript:void(0)</a>      <!--语句1-->
<a href="#" id="teste" onclick="javascript:testc(this.id);">测试#</a>   <!--语句2-->

<!--这是上述方法的script脚本-->
<script type="text/javascript">
  function testc(objId){
	var val=$("#txt").val();
	  if(val!=""){
	    $("#"+objId).attr("href","../计算器联系.html");
		return true;
	  }else{
		return false;
	}
  }
</script>

分析语句1

对于语句1来说，已经在上面讲述清楚了

分析语句2

我们使用了#，当该代码执行时，#会被优化成#top，也就是说，会默认生成一个top锚点。当添加不成立时，它会回滚到该页面的最上层，当条件成立时，它会会执行某个事件或跳抓到指定的页面。

javascript:void(0)和javascript:;

javascript:void(0)和javascript:;具有相同的功能，因而，我们有时会把javascript:void(0)写成javascript:;，如代码所示

<a href="javascript:;" id="testd" onclick="javascript:testc(this.id);">测试有javascript:void(0)</a>  <!--语句2-->

<form method="post" action="#">
    <input type="text" id="txt" />
</form>

<script src="jquery-3.4.1.js"></script>
<!--这是上述方法的script脚本-->
<script type="text/javascript">
    function testc(objId){
        var val=$("#txt").val();
        if(val!=""){
            $("#"+objId).attr("href","../计算器联系.html");
            return true;
        }else{
            alert("文本框不能为空;");
            return false;
        }
    }
</script>

结论

至此，你可能对#和JavaScript:void(0)有了初步的了解，我们也由此得到了两个结论。

结论1

为什么有的页面很长，我们在点击某个链接时，却跳转到了页眉的地方？因为内部使用了#。然而，javascript:void(0) 则不是如此，所以调用脚本时最好用javascript:void(0) 或者javascript:;。

结论2

如果我们想利用表前a进行ajax操作时，最后使用javascript:void(0)或者javascript:;。