记录1

项目目录结构

one
--css
-- --cart.css
--image
-- --1.jpg
-- --2.jpg
-- --3.jpg
-- --4.jpg
-- --5.jpg
-- --6.jpg
-- --7.jpg
--js
-- --cart.js
--index.html
--test.html

index.html页面代码排布

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CartPage</title>
    <!-- 导入css文件 -->
    <link rel="stylesheet" type="text/css" href="css/cart.css">
    <!-- 导入js文件 -->
    <script type="text/javascript" src="js/cart.js"></script>
</head>
<body>
    <!-- 带标题行的购物车表单 -->
    <!-- CartList -->
    <table id="cartList">
        <!-- 表达的标题行 -->
        <thead>
        </thead>
        <!-- 表单主体,列出所有购买的商品 -->
        <tbody>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
        </tbody>
    </table>

    <!-- 底部结算导航条 -->
    <div class="foot" id="foot">
        <label class="f1 select-all"><input type="checkbox" class="check-all check"> 全选</label>
        <a class="f1 delete" id="deleteAll" href="javascript:;">删除</a>
        <div class="fr closing">结算</div>
        <div class="fr total">合计: ¥<span id="priceTotal">0.00</span></div>
        <div class="fr selected" id="selected">已选商品<span class="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
        <div class="selected-view">
            <div id="selectedViewList" class="clearfix">
                <div>![](image/1.jpg)<span>取消选择</span>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
</html>

我们要添加<meta charset="utf-8">,否则页面中文部分都会乱码。

效果图如下:
+附上图片

href="javascript:;"

我们在底部导航条那里看到下面那行代码

<a class="f1 delete" id="deleteAll" href="javascript:;">删除</a>

javascript: 是一个伪协议,其他的伪协议还有mail: tel: file: 等等。

举个栗子

<a id="updatePassword" href="javascript:;">修改密码</a>

javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码。
javascript:;表示什么都不执行,也就是点击<a>标签没有任何反应。
一般在使用javascript:;的时候我们会给<a>绑定一个事件回调来执行业务代码:

理解描述

问:我们能不能理解为href="javascript:;"就是去掉<a>标签的默认行为,跟href="javascript:void(0)"是一样的?
答:是一样的。
void是JavaScript的一个运算符,void(0)就是什么都不做的意思。这两种写法是等价的。

栗子执行

<a>标签必须带有href属性,如果没有该属性就可以用其他标签代替了。

  • <a id="updatePassword" href="javascript:;">修改密码</a>
    我们在项目根目录下创建一个test.html文件
<!-- 情况一:javascript:; -->
    <a id="updatePassword" href="javascript:;">修改密码</a>
    <script type="text/javascript">
        document.getElementById("updatePassword").addEventListener('click',function(e){
            e.preventDefault();
            //当<a>触发click时,处理业务的代码
            alert("test first");
        },false);
    </script>

我们给<a>标签添加一个回调函数,当监听到该表情有点击动作时,就出发回调执行业务代码--弹出对话框,对话框中文本是test first。

而javascript的作用就是去掉<a>标签的默认行为,也就是不会有默认的页面跳转动作。

  • <a id="updatePassword1" href="">修改密码1</a>
<!-- 情况二:href="" -->
    <a id="updatePassword1" href="">修改密码1</a>
    <script type="text/javascript">
        document.getElementById("updatePassword1").addEventListener('click',function(e){
            e.preventDefault();
            //当<a>触发click时,处理业务的代码
            alert("test first 1");
        },false);
    </script>
  • <a id="updatePassword2" href="javascript:void(0)">修改密码2</a>
<!-- 情况三:href="javascript:void(0)" -->
    <a id="updatePassword2" href="javascript:void(0)">修改密码2</a>
    <script type="text/javascript">
        document.getElementById("updatePassword2").addEventListener('click',function(e){
            e.preventDefault();
            //当<a>触发click时,处理业务的代码
            alert("test first 2");
        },false);
    </script>
  • <a id="updatePassword3" href="javascript:">修改密码3</a>
<!-- 情况四:href="javascript:" -->
    <a id="updatePassword3" href="javascript:">修改密码3</a>
    <script type="text/javascript">
        document.getElementById("updatePassword3").addEventListener('click',function(e){
            e.preventDefault();
            //当<a>触发click时,处理业务的代码
            alert("test first 3");
        },false);
    </script>

通过比较上面四种情况,我们发现结果都是一样的。
javascript:void(0)与javascript:;是一样的,这符合我们预期。但是href=""和href="javascript:"也是一样的效果,那么我们添加javascript:;完全是多余的吗?

e.preventDefault();

<!-- 情况五:href="javascript:" -->
    <a id="updatePassword4" href="javascript:">修改密码4</a>
    <script type="text/javascript">
        document.getElementById("updatePassword4").addEventListener('click',function(e){
            // e.preventDefault();
            //当<a>触发click时,处理业务的代码
            alert("test first 4");
        },false);
    </script>

在test.html页面中添加情况五的代码,运行结果与前面四种情况是一样的。

有效案例

前面情况五的代码是无法测试e.preventDefault()的作用的,因为该方法用于阻止默认事件产生,例如点击<a>标签不打开url,点击提交按钮不提交表单等等。而前面我们的情况都是是禁止了<a>标签的默认事件的,所以就算不使用该方法打开<a>标签一样不会打开url。
通过下面情况六和情况七我们就能明白该方法的作用:
在情况六中,只会弹出对话框然后结束。这是因为<a>标签默认事件是打开url进行页面跳转,而e.preventDefault()方法阻止了该默认事件,所以不会打开index.html页面的url进行页面跳转。
在情况七中,会先弹出对话框"test first5"然后跳转到index.html页面。

    <!-- 情况六:// e.preventDefault(); -->
    <a id="updatePassword5" href="index.html">修改密码5</a>
    <script type="text/javascript">
        document.getElementById("updatePassword5").addEventListener('click',function(e){
            e.preventDefault();
            //当<a>触发click时,处理业务的代码
            alert("test first 5");
        },false);
    </script>

    <!-- 情况七:// e.preventDefault(); -->
    <a id="updatePassword6" href="index.html">修改密码6</a>
    <script type="text/javascript">
        document.getElementById("updatePassword6").addEventListener('click',function(e){
            // e.preventDefault();
            //当<a>触发click时,处理业务的代码
            alert("test first 6");
        },false);
    </script>

<a>标签点击之后颜色变更问题

前面一共写了七种情况的案例,我们发现前面5种在点击<a>标签前后字体颜色都是蓝色。最后两种情况在点击前是蓝色,点击之后字体颜色变成棕色(颜色变更表示已经点过该链接了)。那么为什么前面的不会变更颜色而后面的会呢?

这是因为<a> 标签的默认css样式,默认点击前的动作对应蓝色,点击后的动作样式变成棕色。触发颜色更改的前提条件是<a>标签的href属性值需要是一个html页面的url,不管是否阻止了该url的跳转,如情况六和情况七。而前面五种情况的href属性值都不是url,所以不会变色。

我们可以修改默认样式成为我们理想中的效果,方式是添加一个css样式:
a{ ... }a .link{ ... } a .hover{ ... } ...
也就是我们把手动对<a>标签各种情况的样式进行设定,这样就覆盖了默认样式。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,805评论 1 91
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 128,972评论 18 137
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 15,552评论 32 459
  • 全文链接 第一章 创建一个blog应用第二章 使用高级特性来增强你的blog第三章 扩展你的blog应用第四章上 ...
    夜夜月阅读 8,306评论 40 34
  • 今天礼拜三,是我的生日,女儿非常喜欢过生日,问我能不能把生日让给她,我问她为什么呀,她告诉我想吃蛋糕,哈哈,...
    包先生的日记k阅读 93评论 0 2
  • 今天是妈妈的生日,一家人坐在一起其乐融融,小弟郝建掌厨,妈妈一脸的幸福! 两个孩子在边玩边捣乱! 两个大学生没回来...
    改变的爱阅读 76评论 0 1
  • 本系列所有文章目录 获取示例代码 本文将给大家介绍法线贴图的相关知识,在游戏中由于GPU资源有限,尤其是在移动设备...
    handyTOOL阅读 2,243评论 1 8
  • 工业机器人是一种装备有记忆装置和末端执行装置的、能够完成各种移动或工艺来代替人类劳动的通用机器。通常在生产中能代替...
    Jason徐老头阅读 2,168评论 2 9
  • (1)只有极少项目是在原有的项目范围内完成的。 范围的变化是不可避免的,他不仅可能打击项目成员的士气,甚至可能破话...
    SincereDu阅读 407评论 0 0