学习笔记-------jquery选择遍历相对于js的选择遍历的优越性

一.在今天的学习中,在做前端页面购物车的时候,因为用户购买商品的不确定性,需要我们动态创建标签,在做页面交互的时候,深深感觉到了js在动态生成标签并遍历选择的时候的不便利,因此写下笔记

1.在这里简化一下,添加一个按钮,用来点击动态生成购物车的标签,下面是一个购物车的抬头
    <button id="adds">添加</button>
    <table border="1" id="shops">
    <tr id="title">
        <td><input type="checkbox">全选</td>
        <td style="width:40%">店铺宝贝</td>
        <td>获积分</td>
        <td>单价(元)</td>
        <td>数量</td>
        <td>小计(元)</td>
        <td>操作</td>
    </tr>
    <tr id="shoptitle">
        <td colspan="7">
        <span>店铺:</span>
        <a href="#" >纤巧百娜时尚鞋坊</a>
        <span>卖家:</span>
        <a href="#" >纤巧百媚</a>
        <img src="images/lianxi_03.jpg">
        </td>
    </tr>
2.先写出一行购物车的代码确定样式
<!-- <tr class="shop" id="shop">
<td><input type="checkbox" id="check" style="margin-left: 20px;"></td>
<td>
<img src="images/nvxie.jpg"/>
<span>
<a href="##">日韩流行风时尚美眉最爱独特米子拼图金属坡跟公主靴子黑色</a>
<p >颜色:棕色尺码:37</p>
<p >保障:<img src="images/baozhang_03.jpg"/></p>
</span>
</td>
<td id="integral" style="text-align:center">5</td>
<td id="unitPrice" style="text-align:center">138.00</td>
<td style="text-align:center">
<input type="button" value=" - ">
<input type="text" value="1" id="num">
<input type="button" value=" + ">
</td>
<td id="subtotal" style="text-align:center">138.00</td>
<td id="delete" style="text-align:center">删除</td>
</tr> -->
3.样式表
<style>
*{
margin:0;
padding:0;
list-style:none;
font-size:14px;
}
html,body{
/* height:100%; */
width:100%;
border:1px solid red;
}
table{
width:60%;
margin:50px auto;
}
#title{
/* border:1px solid red; */
text-align:center;
}
#shoptitle td{
height:20px;
line-height:20px;
}
#shoptitle td span{
margin:0 10px;
}
.shop td>img{
height: 100px;
width: 100px;
margin: 10px;
float: left;
display: inline-block;
}
.shop td>span{
border:1px solid red;
height:100%;
width:60%;
line-height:24px;
margin: 10px;
float: left;
display: inline-block;
}
</style>
4.实现的基本效果

5.js动态生成标签需要用到document.createElement();
将上面的一行商品信息的代码用js动态生成,并绑定到按钮adds的点击事件上
function $(id){
return document.getElementById(id);
}
$("adds").onclick=function(){
var tr = document.createElement("tr");
tr.className="shop";
tr.id="shop";
var td1 = document.createElement("td");
var input1 = document.createElement("input");
input1.type = "checkbox";
input1.id="check"+flag;
input1.style.marginLeft='20px';
td1.append(input1);
var td2 = document.createElement("td");
var img1 = new Image;
img1.src='images/nvxie.jpg';
td2.append(img1);
var span1 = document.createElement("span");
var a1 = document.createElement('a');
a1.href="##";
a1.innerHTML='日韩流行风时尚美眉最爱独特米子拼图金属坡跟公主靴子黑色';
span1.append(a1);
var p1 =document.createElement('p');
p1.innerHTML="颜色:棕色尺码:37";
span1.append(p1);
var p2 = document.createElement('p');
var img2 = new Image;
img2.src='images/baozhang_03.jpg';
p2.append(img2);
span1.append(p2);
td2.append(span1);
var td3 = document.createElement("td");
td3.id='integral';
td3.style.textAlign='center';
td3.innerHTML=5;
var td4 = document.createElement("td");
td4.id='unitPrice';
td4.style.textAlign='center';
td4.innerHTML=138.00;
var td5 = document.createElement("td");
td5.style.textAlign='center';
var input2 = document.createElement('input');
input2.type = "button";
input2.value=" - ";
td5.append(input2);
var input3 = document.createElement('input');
input3.type = "text";
input3.value="1";
td5.append(input3);
var input4 = document.createElement('input');
input4.type = "button";
input4.value=" + ";
td5.append(input4);
var td6 = document.createElement("td");
td6.id='subtotal';
td6.style.textAlign='center';
td6.innerHTML=138.00;
var td7 = document.createElement("td");
td7.id='delete';
td7.style.textAlign='center';
td7.innerHTML='删除';
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td5);
tr.append(td6);
tr.append(td7);
$('shops').append(tr);
}
点击按钮实现添加一行商品信息

6.因为是动态添加的标签样式,因此在交互上的鼠标事件如果每生成一次就添加一次就会显得代码很沉重,因可以在其父元素上添加鼠标监听事件
$('shops').addEventListener('click',function(e){
var obj = e || window.event;
var objtrg = obj.srcElement || obj.target;
//监听删除点击
if (objtrg.id=="delete") {
objtrg.parentNode.parentNode.removeChild(objtrg.parentNode);
//
} else if(objtrg.id=='check'){
//监听数量减
} else if(objtrg.value==' - '){
if (objtrg.nextSibling.value>1) {
objtrg.nextSibling.value= parseInt(objtrg.nextSibling.value) - 1;
objtrg.parentNode.nextSibling.innerHTML= parseInt(objtrg.nextSibling.value)*objtrg.parentNode.previousSibling.innerHTML;
};
//监听数量加
} else if(objtrg.value==' + '){
objtrg.previousSibling.value= parseInt(objtrg.previousSibling.value) + 1;
objtrg.parentNode.nextSibling.innerHTML= parseInt(objtrg.previousSibling.value)*objtrg.parentNode.previousSibling.innerHTML;
}
});


可以看到在动态生成和添加以及在后面选择交互的时候显得非常麻烦

8.jquery优势:
选择元素:
js:
document.getElementsByTagName('p')
document.getElementById('id')
document.getElementsByName('name')
document.getElementsByClassName('classname')
jquery:
$('p')
$('#id)
$('.classname')
生成元素:
js: document.createElement('p');
jquery:$("<p></p>").text("Text.");
获取当前元素及其同胞,父子元素
js:
childNodes; //得到s的全部子节点
parentNode; //得到s的父节点
nextSibling; //获得s的下一个兄弟节点
previousSibling; //得到s的上一个兄弟节点
firstChild; //获得s的第一个子节点
lastChild; //获得s的最后一个子节点
jquery:
关于js与jquery选择器的优缺点对比

总结:jquery选择与遍历非常方便,js选择与遍历的速度比jquery快,在数据量非常大的情况下,选择原生js将可以优化性能.