大厂都在看的购物车

2019-11-26 本文已影响0人前端菜鸡儿126

jquery

jQuery对象是一个类数组的对象，含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口。

其中我们用的非常频繁的一个函数是$()或者说是jQuery()，当我们调用他的时候会根据传入的参数的不同而达到不同的效果。

1.$()或者是jQuery()

1.1

jQuery(selector,context):

接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。

默认情况下，对匹配元素的查找都是从根元素ducument对象开始，也就是说查找范围是整棵文档树。但是如果给定了上下文context，则在指定上下文中查找.

ps.

</div>

$('span').css('background-color','red');//所有的span都会变红

$('span','.wrap').css('background-color','red');//只有.wrap中的span会变红

1.2

jQuery(html,ownerDocument) 、jQuery(html,props):

用所提供的html创建dom元素。

html参数是要创建的标签，可以是单标签也可以是多标签。

第二个参数用于创建新DOM元素的文档对象，如果不传入则默认为当前的文档对象。

//单标签两种方式都可以往body中插入div

$('<div>').appendTo('body');

$('<div></div>').appendTo('body');

// 多标签嵌套

$('<div><span>dfsg</span></div>').appendTo('body')

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

同样也有其他方法在被选元素的头部，以及头部外部，尾部外部添加元素。

1.3

jQuery(element or elementsArray)：

如果传入一个DOM元素或者是DOM元素的数组，则把DOM元素封装到jQuery对象中并返回。

<ul>

</ul>

// 传入DOM元素

$('li').each(function(index,ele){

$(ele).on('click',function(){

$(this).css('background','red');//这里的DOM元素就是this

})

//传入DOM数组

var aLi=document.getElementsByTagName('li');

aLi=[].slice.call(aLi);//集合转数组

var $aLi=$(aLi);

$aLi.html('我是jQuery对象');//所有的li的内容都变成'我是jQuery对象'

1.4

jQuery(object)：

如果传入的是一个object对象，则把该对象封装到jQuery对象中并返回。

var obj={name:'谦龙'};

var $obj=$(obj);//封装成jQuery对象

//绑定自定义事件

$obj.on('say',function(){

console.log(this.name)//输出谦龙

});

$obj.trigger('say')

1.5

jQuery(callback)：

当传进去的参数是函数的时候，则在document对象上绑定一个ready事件监听函数，当DOM结构加载完成的时候执行。

$(function(){

})

//以上代码和下面的效果是一样的

$(document).ready(function(){

...//代码

})

1.6

jQuery(jQuery object)：

当传进去的参数是一个jQuery对象的时候，则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素。

var aLi=$('li');

var copyLi=$(aLi);//创建一个aLi的副本

console.log(aLi);

console.log(copyLi);

console.log(copyLi===aLi);

1.7

jQuery()：

如果不传入任何的参数，则返回一个空的jQuery对象，属性length为0。

注意这个功能可以用来复用jQuery对象，例如可以创建一个空的jQuery对象，然后在需要的时候先手动修改其中的元素，然后在调用jQuery方法。从而避免重复创建jQuery对象。

2. :gt()

:gt 选择器选取 index 值高于指定数的元素。

ps.

$('tr:gt(0)')：选取下表为0 之后所有的tr元素。

扩展：

:lt 选择器来选取 index 值小于指定数的元素。

3. each()

each() 方法规定为每个匹配元素规定运行的函数。

通俗来讲就是循环便利，相当于是for,foreach.

$('tr:gt(0)').each(function () {

console.log(this);

这里的this指向的是循环遍历的每一个tr 下的 td;

ps.

输出结果：

<td width="150px">iphhone</td>

</td>

可以说是指向当前调用者;

})

4. find()

find() 方法返回被选元素的后代元素。

$(this).find('td:eq(2)')

4.1

eq():

:eq() 选择器选取带有指定 index 值的元素。

在第3部 $(this) 拿到每一个tr下面的所有td之后

.find('td:eq(2)') 去查找第三个td

5. children()

children() 方法返回返回被选元素的所有直接子元素，也就是说第一代子级

5.1

children()和find()的区别

children()：只返回儿子一级的子元素

find()：返回所有后代

6. first() last()

first():返回第一个匹配到的元素

last():返回最后一个匹配到的元素

7. 拿到加减号给加减号添加点击事件

7.1

$(this).find('td:eq(2)').children().first()

拿到tr下的第三个td找到里边的子元素获取到第一个元素减号添加点击事件

</td>

7.2

$(this).find('td:eq(2)').children().last()

拿到tr下的第三个td找到里边的子元素获取到最后一个元素加号添加点击事件

</td>

8. next() prev()

8.1

next()：方法返回被选元素的后一个同级元素

prev()：获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

8.2

$(this).next().val(); $(this).next().prev();

在加号减号分别拿到input里商品数量，进行商品数量操作。

9. val() text()

9.1

val()

方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

9.2

text()

方法设置或返回被选元素的文本内容。

当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。

当该方法用于设置内容时，则重写所有匹配元素的内容。

9.3

html()：补充

方法设置或返回被选元素的内容（innerHTML）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

9.4

text() html() 区别：

一个是操作文本内容，一个是操作元素内容。

10. 加减事件

10.1

加号事件

10.1.1

通过$(this).prev().val();拿到加号上一个元素，也就是input商品数量的值，进行加1

然后商品数量加了之后，

要给input重新赋值，

要重新计算商品的总价以及购物车的总金额

jia.click(function () {

var num = $(this).prev().val();

num++;

$(this).prev().val(num);//给input重新赋值

total($(this));//调用购物车总金额函数

allmoney();//调用购买商品总价函数

})

10.2

减号事件

10.2.1

通过$(this).next().val();拿到加号下一个元素，也就是input商品数量的值，进行加1

然后商品数量加了之后，

要给input重新赋值，

要重新计算商品的总价以及购物车的总金额

jian.click(function () {

var num = $(this).next().val();

num--;

if (num < 0) {

num = 0;

if (confirm("已经是0件了你确定要删除这件商品吗") == true) {

$(this).parent().parent().remove();

}

$(this).next().val(num);

total($(this));

allmoney();

})

10.2.2

confirm()

方法用于显示一个带有指定消息和确认及取消按钮的对话框。

如果访问者点击"确定"，此方法返回true，否则返回false。

11. parent()

方法返回被选元素的直接父元素。该方法只沿着 DOM 树向上遍历单一层级。

11.1

parents():方法返回被选元素的所有祖先元素。

祖先是父、祖父、曾祖父，依此类推。

该方法从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径（<html>）。

注意：

如果 filter 参数为空，该方法将从直接父元素直至 <body> 和 <html> 的所有路径中选取元素集合中的所有祖先。因此传递一个缩小搜索结果范围的选择器表达式是非常有用的。

11.2

closest(): 方法返回被选元素的第一个祖先元素。

祖先是父、祖父、曾祖父，依此类推。

该方法从当前元素向上遍历，直至文档根元素的所有路径（<html>），来查找 DOM 元素的第一个祖先元素。

11.2.1

parents() 与 closest() 的不同

parents()

从父元素开始

沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先

返回包含零个、一个或多个元素的 jQuery 对象

closest()

从当前元素开始

沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个祖先

返回包含零个或一个元素的 jQuery 对象

11.3

parentsUntil()：方法返回介于 selector 与 stop 之间的所有祖先元素。

该方法从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径，直到到达指定的元素为止。

注意：

如果两个参数都为空，该方法将返回所有祖先元素（与 parents() 方法相同）。

.parentsUntil(stop,filter)

12. substr()

方法可在字符串中抽取从 start 下标开始的指定数目的字符。

返回值:

一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符）处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。

13. remove()

方法移除被选元素，包括所有的文本和子节点。

该方法也会移除被选元素的数据和事件。

13.1

detach()

方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。

该方法会保留移除元素的副本，允许它们在以后被重新插入。

13.2

empty()

方法移除被选元素的所有子节点和内容。

该方法不会移除元素本身，或它的属性。

14. :not()

方法返回不符合一定条件的元素。

该方法让您规定一个条件。不符合条件的元素将从选择中返回，符合条件的元素将被移除。

该方法通常用于从被选元素组合中移除一个或多个元素。

14.1

filter()

方法返回符合一定条件的元素。

该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。

该方法通常用于缩小在被选元素组合中搜索元素的范围。

tr:not(:first):not(:last):

返回除了第一个和最后一个的tr元素集合。

15. 计算单个商品总价计算总购买价

15.1

单个商品总价

//商品单个总价

function total(o) {

// 参数o 加减调用时所传的当前的元素集合

var n = o.parent().children().first().next().val();

// n 代表的是找到o，也就是说找到加号或者是减号的 parent父级元素的 children儿子元素的 first第一个元素的 next下一个元素的 val值

// 也就是说拿到input框里的商品数量

var money = Number(o.parent().next().text().substr(1));

// money 代表的是 o 父级的下一个元素的text文本然后通过substr拿到商品单个价格也就是￥2000

o.parent().next().next().text(n * money);

//最后找到展示总价的td，计算出总价之后赋值。

}

15.2

计算所有商品的总价

//总购买价

function allmoney() {

var num = 0;

$('tr:not(:first):not(:last)').each(function () {

// tr:not(:first):not(:last) 这里的意思就是除了第一个tr 和最后一个tr 去循环

//因为这里的第一个tr和最后一个tr是表头和表尾

num += Number($(this).find('td:eq(4)').text());

//最后就是把所有的tr里面第五个td的文本也就是单个商品的总价相加计算出所有总价

})

$('tr:last').children().first().next().text(num);

// 最后找到最后一个tr里的儿子元素的第二个元素设置文本内容也就是总价。

}

16. 删除商品

16.1

拿到当前要删除商品的总价

$(this).parent().prev().text();

16.2

拿到购物车总价

$('tr:last').children().first().next().text();

16.3

最后用购物车总价减去单个商品的总价，重新给购物车总价赋值

$('tr:last').children().first().next().text(b-a);

然后删除整条元素

$(this).parent().parent().remove();

17. 清除购物车

17.1

删除所有商品

$('tr:not(:first):not(:last)').remove();

这里是除了第一个tr和最后一个tr，其余的tr元素全部删除，

操作dom，来改变购物车展示的内容。

17.2

清空总价数据为0

$('tr:last').children().first().next().text('0');

总结：

1.jquery 实际操作dom

2.涉及原生方法

3.购物车逻辑

3.1 添加商品，增加商品数量，增加单个商品总价，同时增加总金额

3.2 减少商品，减少商品数量，减少单个商品总价，同时减少总金额

当商品数量小于0时移除商品

3.3 删除商品，减少商品总价

3.4 清空购物车，总金额变为0

4.this指向

方法中的所有this均指向当前调用者

5.最后总结一下子，基础其实很重要。

附上源码：

<!DOCTYPE html>

<html>

<head>

</head>

td {

text-align: center;

height: 50px;

border-bottom: 1px solid gray;

}

a {

padding: 5px 10px;

background: red;

color: #fff;

font-weight: bold;

border-radius: 5px;

text-align: center;

}

tr:last-child td {

border: none;

}

</style>

<body>

<tr>

</tr>

<tr>

<td width="150px">iphhone</td>

</td>

</tr>

<tr>

<td width="150px">NOKIA</td>

</td>

</tr>

<tr>

<td width="150px">Samng</td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td width="0px"><a id="qingchu">清空购物车</a></td>

</tr>

</table>

</body>

$('tr:gt(0)').each(function () {

var jian = $(this).find('td:eq(2)').children().first()

var jia = $(this).find('td:eq(2)').children().last()

// 减点击事件

jian.click(function () {

var num = $(this).next().val();

num--;

if (num < 0) {

num = 0;

if (confirm("已经是0件了你确定要删除这件商品吗") == true) {

$(this).parent().parent().remove();

}

$(this).next().val(num);

total($(this));

allmoney();

})

//加点击事件

jia.click(function () {

var num = $(this).prev().val();

num++;

$(this).prev().val(num);

total($(this));

allmoney();

})

//商品单个总价

function total(o) {

var n = o.parent().children().first().next().val();

var money = Number(o.parent().next().text().substr(1));

o.parent().next().next().text(n * money);

}

//总购买价

function allmoney() {

var num = 0;

$('tr:not(:first):not(:last)').each(function () {

num += Number($(this).find('td:eq(4)').text());

})

$('tr:last').children().first().next().text(num);

}

//删除

$('.a').click(function () {

let a=$(this).parent().prev().text();//当前商品的总价

let b=$('tr:last').children().first().next().text();//购物车的总价

$('tr:last').children().first().next().text(b-a);

$(this).parent().parent().remove();

})

//清除购物车

$('#qingchu').click(function () {

$('tr:not(:first):not(:last)').remove();

$('tr:last').children().first().next().text('0');

})

</script>

</html>

大厂都在看的购物车

猜你喜欢

热点阅读