项目目录结构
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><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>标签各种情况的样式进行设定，这样就覆盖了默认样式。
网友评论