记录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>标签各种情况的样式进行设定，这样就覆盖了默认样式。