javascript:void(0)我们在a标签添加click等事件的时候经常用到a标签href属性,像下面这样
<a href='javascript:void(0);' onclick='dosomething()'>mooshine</a>
a链接的href属性由两部分组成,javascript: void(0);
javascript:是什么呢?是一种伪协议,我们熟知的几种协议有:http,https.file,ftp,telnet,tcp,udp等互联网协议,那么伪协议又是什么鬼呢?
伪装协议就如实让浏览器执行一些外部程序,或者一些内置功能,不如现在有些网站用data:(base64编码数据)来显示图片,也算是一种伪装的协议。
javascript:就是让浏览器执行一段js代码。a标签的href属性是支持协议的,同时也支持这些伪装的协议。
void是js中的一个操作符,虽然我们对这个操作符除了在a标签之外用的很少,但是任何版本的浏览器都支持它。
void操作符将执行一段表达式,然后返回undefined。无论表达式是什么,void操作符总是恒定返回undefined属性。
void expression; void 0; void (0);
void(0)中的括号不是void操作符要求的,括号是要执行的表达式的一部分,有没有括号的意思是一样的,只是一种习惯写法而已。
我们可以写一段代码测试一下void的功能
var rst=void function testvoid() { console.log("mooshine"); return "mooshine"; }(); console.log(rst)
运算结果如下:
其中function函数后面加的小括号表示是自执行函数,也就变成了函数表达式,前面就可以通过void操作符来运算他了。
在函数中虽然用return语句指定返回结果,但是由于void操作符的作用,返回结果仍然是undefined。
所以我们就可以在a标签的href属性中使用javascript:void(0);来避免跳转,同时使用onclick属性做一些操作,把a标签作为一个伪button元素。
javascript:;的写法跟javascript:void(0);在含义上是一致的,返回的结果也是undefined,所以可以用javascript:;替代javascript:void(0); 毕竟javascript:;比javascript:void(0)少7个字符呢,反正我是比较懒,喜欢用javascript:;来设置href属性的。
a标签的href还有一些其他的写法用来实现一些特定功能
通过#号指向同一文章中id为id的元素,并将此元素显示在浏览器视窗中,叫做“锚文本”,href="#"和href="#top"是相同的,锚点都是指向文章开头。
<a href="mailto:mooshine@163.com">向我发送邮件</a>
mailto:伪协议用来打开客户端的邮件程序,向指定的邮箱发送邮件。
<a href="tel:8888888">88888888</a>
通过tel:伪协议,在手机端可以调用用户拨打电话的程序,并将tel中的电话号码显示为拨出号码。
a标签有一个target属性,用来指示浏览器打开链接的方式,此属性有几个可选值
在当前窗口打开链接
在新窗口打开链接
在frameset或者iframe嵌套的页面中,表示在父窗口打开链接,否则_parent和_self相同
在frameset或者iframe嵌套的页面中,表示顶层窗口,否则_top和_self相同
在指定id或者name为xxx的iframe中打开窗口,这里如果要良好的兼容性,iframe的id和name的属性值都要为xxx。
H5中对a标签添加了一些新属性,简化我们一些功能的实现。
down属性表示一个a标签的href所指定的url地址不要作为页面打开,要作为文件下载。
<a href="images/egg.jpg" download="mooshine">下载图片</a>
down的属性的属性值会作为下载文件的文件名。此文件名允许用户修改,不过在chrome等一些浏览器会直接下载,而不会弹出另存为的对话框。
使用down属性还可以把canvas.toDataURL()的url设置为a标签的href属性,将canvas生成的图片下载到本地,免去了与服务器的交互。
目前a标签的down属性支持不是很完善,ie要到edge 13才支持,safari不支持,如果不是出于安全性原因的问题相信safari很快也会支持的。
很快我们就可以使用a标签的down属性来实现文件的下载功能。这多么酷炫,多么令人期待啊。
a标签是很基础的html标签了,文中提到的用法,大家也都很熟悉,缺少的也就是对这些用法问个为什么。可能你会问,你这些都是自己知道的么,肯定不是啊,没有人生下来就知道的,我也是通过文档资料了解到的,然后自己写代码做一些测试,做深入理解。那么就是有参考文献了啊,是的,有参考文献,一般就是微软出的DHTML文档,js文档,MDN的官网,Microsoft的开发者指南官网这里几个地方。微软做的比较好,都是中文文献,就是服务器在国外,访问速度有点慢。MDN对我们国内人来说就有些差了。全是英文的,对于我这种英语水平不好的人看起来是相当费劲的,要一边看,一边查字典,不过也有好处,自己的英文词汇来那个确实也跟着看文档提升了不少。