第三方库 jQuery
常用第三方库概览
名称 | 文档 | 一句话介绍 |
jQuery | 官网:https://jquery.com/ 中文网:https://jquery.cuishifeng.cn/ | 让操作DOM变得更容易 |
Lodash | 官网:https://lodash.com/docs 中文网:https://www.lodashjs.com/ | 你能想到的工具函数它都帮你写了 |
Animate.css | 官网:https://animate.style/ | 常见的CSS动画效果都帮你写好了 |
Axios | 官网:https://axios-http.com/zh/ | 让网络请求变得更简单 |
MockJS | 官网:http://mockjs.com/ | ajax拦截和模拟数据生成 |
Moment | 官网:https://momentjs.com/ 中文网:http://momentjs.cn/ | 让日期处理更容易 |
ECharts | 官网:https://echarts.apache.org/zh | 搞定所有你能想到的图表 |
animejs | 官网:https://animejs.com/ | 简单好用的JS动画库 |
editormd | 官网:https://pandao.github.io/editor.md | markdown编辑器 |
validate | 官网:http://validatejs.org/ | 简单好用的JS对象验证库 |
date-fns | 官网:https://date-fns.org/ | 功能和Moment几乎相同 支持tree shaking |
zepto | 官网:https://zeptojs.com/ | 功能和jQuery几乎相同 对移动端支持更好 包体积更小 |
nprogress | 官网:https://github.com/rstacruz/nprogress | 简单好用的进度条插件 YouTube就使用的是它 |
qs | 官网:https://github.com/ljharb/qs | 一个用于解析url的小工具 |
CDN
称之为内容分发网络(Content Delivery Network),
国内使用广泛的免费CDN站点 https://www.bootcdn.cn/
微软 CDN
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>
第三方库 zepto
现在 jQuery 的体积有 100kb 左右,
因此出现了另外一个第三方库叫 zepto,它相当于 jquery 的简化版,
https://zeptojs.com/
精简阉割一些平时用不到的功能,把体积变小了,提高了传输是速率
https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js
一、初探
jQuery 针对 DOM 的操作无非以下几种
1. 获取它
2. 创建它
3. 监听它
4. 改变它
jQuery 提供了一个全局的函数 $,也可以写作 jQuery,
这两个是一样的,该函数提供了强大的 DOM 控制能力
console.log(jQuery); // ƒ (a,b){return new e.fn.init(a,b,h)} jQuery === $ // true
jQuery 对象提供了很多方法,这些方法都可以批量的去操作元素,比如
.text()
.remove()
.css()
.click()
.addClass()
等等...
通过下面的示例,可以快速理解 jQuery 的核心功能
// 获取类样式名为.container的所有DOM const container = $('.container'); // 获取container后面的兄弟元素,元素类样式必须包含list container.nextAll(".list").addClass('my-data'); // 删除元素 container.remove(); // 找到所有类样式为list元素的后代li元素,给他们加上类样式item $('.list li')addClass('item'); // 为所有p元素添加一些style $("p").css({"color": "#ff0011", "background": "blue"}); // 注册DOMContentLoaded事件 $(function(){ // ... }); // 给所有li元素注册点击事件 $('li').click(function(){ // ... }) // 创建一个a元素,设置内容为link,然后将他作为子元素追加到类样式为.list的元素中 $("<a>").text("link").appendTo(.list);
jQuery 最常见的
1. 选择器
2. 筛选
3. 事件
4. 属性
5. 样式
6. 文档处理
二、选择器
集训营笔记
选择器支持 css 选择器,也支持一些特有的选择器
$("选择器") 选中满足要求的元素,返回一个 jQuery 对象,返回 jQuery 对象是一个伪数组,后续会大量用到
<div class="container" id="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script> <script> var a = $(".item"); console.log(a) // X {0: div.item, 1: div.item, 2: div.item, length: 3, selector: '.item'} </script>
返回一个伪数组
{
0: div.item
1: div.item
2: div.item
length: 3
}
什么是伪数组?
对象里面有索引
有 length 属性
var a = { 0: "a", 1: "b", length: 2 }
jQuery 和普通 dom 的转换
1. $(普通dom) 转换为jQuery对象
2. jqObj[index] 使用索引获取普通 dom 对象
var box = document.getElementById("box"); // 1.选择器里面传一个普通dom对象,返回一个jQuery对象(一个伪数组) jqObj = $(box); console.log(jqObj) // X {0: div#box.container, length: 1, selector: ''} // 2.使用索引获取普通 dom 对象 console.log(jqObj[0]) // <div class="container" id="box"></div>
练习,
1. 选中所有类样式带有 .item 的元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <style> .container{float:left;margin:10px;} </style> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script> </head> <body> <div class="container"> <ul class="list"> <li><a href="">选项1</a></li> <li><a href="">选项2</a></li> <li><a href="">选项3</a></li> <li><a href="">选项4</a></li> <li><a href="">选项5</a></li> <li><a href="">选项6</a></li> <li><a href="">选项7</a></li> <li><a href="">选项8</a></li> <li><a href="">选项9</a></li> <li><a href="">选项10</a></li> </ul> <input type="hidden" /> </div> <div class="container"> <div class="test" style="display: none;"></div> <input type="hidden" /> <div class="item"><a href="">item1</a></div> <div class="item"><a href="">item2</a></div> <div class="item"><a href="">item3</a></div> <div class="item"><a href="">item4</a></div> <div class="item"><a href="">item5</a></div> <div class="item"><a href="">item6</a></div> <div class="item"><a href="">item7</a></div> <div class="item"><a href="">item8</a></div> <div class="item"><a href="">item9</a></div> <div class="item"><a href="">item10</a></div> </div> <script> var result = $(".item"); console.log(result); // S {0: div.item, 1: div.item, 2: div.item, 3: div.item, 4: div.item, 5: div.item, 6: div.item, 7: div.item, 8: div.item, 9: div.item, length: 10, prevObject: S} </script> </body> </html>
2. 选中第一个 .container 中的所有 a 元素
var result = $(".container:eq(0) a");
3. 选中第二个 .container 中的所有隐藏的元素,
1. jQuery 中的 :hidden,
2. 不管是 display:none 还是 type="hidden" 只要看不见都选中
var result = $(".container:eq(1) :hidden");
{
0: div.test,
1: input,
length: 2,
prevObject: S
}
ev 课笔记
前面先获取一个 jQuery 对象,对象里面有很多方法帮我们操作元素,
前面获取元素,
后面操作元素,后面还可以基于前面的 jQuery 对象,继续往后面获取
jd.com 京东下打开控制台
$("选择器") 平时用 css 选择器能解决大多数问题,
通过 jQuery 获取到的元素是一个 jQuery 对象,该对象是一个伪数组,类数组里面包含了选中的 DOM 对象,而不是原生的 DOM
$('#app') // init [div#app, context: document, selector: '#app']
选中所有带有 .cate_menu_item 样式的元素,返回一个 jQuery 对象
$(".cate_menu_item") // init {0: li.cate_menu_item, 1: li.cate_menu_item, 2: li.cate_menu_item, 3: li.cate_menu_item..., length: 18...
:eq() 不是 css 选择器是 jQuery 特有的选择器,
有 18 个 .cate_menu_item 元素,
选中第 2 个 .cate_menu_item 中的所有 a 元素
$(".cate_menu_item:eq(1) a"); // init {0: a.cate_menu_lk, 1: a.cate_menu_lk, 2: a.cate_menu_lk, length: 3,...
jQuery 怎么选隐藏元素?
input 元素属性为 type="hidden",或元素样式为 dispaly: none 的都是隐藏元素,
jQuery 支持 :hidden,凡是看不见的元素都选中
$(".cate_menu_item:eq(1) :hidden") // 这只是代码演示,没有这样结构
选中 a 元素,获取 2404 个 a 元素在类数组中
$("a") // init(2404)...
选中所有的多选框
$(":checkbox");
jQuery 对象转原生 DOM对象的两种方式
1. jQ对象[索引]
2. jQ对象.get(索引)
示例,
选中 a 标签加索引返回原生 DOM,也可以用 .get() 方法
$('a')[0] // <a role="link" tabindex="0">跳至搜索框</a> $('a').get(0) // <a role="link" tabindex="0">跳至搜索框</a>
三、筛选
集训营笔记
已经拿到一个 jQuery 对象了,在该对象选中的元素的基础上,进一步的选择就是筛选
方法 | 说明 |
.eq(index) | 选中匹配元素中第index个元素,index为索引 |
.first() | 选中匹配元素中的第一个元素 |
.last() | 选中匹配元素中的最后一个元素 |
.find("选择器") | 在前面匹配的元素基础上,进一步选中匹配的后代元素 |
.parents("选择器") | 在前面匹配的元素基础上,进一步选中匹配的祖先元素 |
.nestAll("选择器") | 在前面匹配的元素基础上,进一步选中匹配后边的兄弟元素 |
.prevAll("选择器") | 在前面匹配的元素基础上,进一步选中匹配前边的兄弟元素 |
.siblings("选择器") | 在前面匹配的元素基础上,进一步选中匹配所有的兄弟元素 |
示例,
筛选出第二个 .item
<div class="container"> <div class="test" style="display: none;"></div> <input type="hidden" /> <div class="item"><a href="">item1</a></div> <div class="item"><a href="">item2</a></div> <div class="item"><a href="">item3</a></div> <div class="item"><a href="">item4</a></div> <div class="item"><a href="">item5</a></div> <div class="item"><a href="">item6</a></div> <div class="item"><a href="">item7</a></div> <div class="item"><a href="">item8</a></div> <div class="item"><a href="">item9</a></div> <div class="item"><a href="">item10</a></div> </div> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script> <script> var result = $(".item").eq(1); </script>
0: div.item
length: 1
练习,
已经选中了第三个 a 元素,然后在该 a 的基础上进一步筛选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>筛选</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script> <style>.container{float:left;margin: 10px;}</style> </head> <body> <div class="container"> <ul class="list"> <li><a href="">选项1</a></li> <li><a href="">选项2</a></li> <li><a href="">选项3</a></li> <li><a href="">选项4</a></li> <li><a href="" class="active">选项5</a></li> <li><a href="">选项6</a></li> <li><a href="">选项7</a></li> <li><a href="">选项8</a></li> <li><a href="">选项9</a></li> <li><a href="">选项10</a></li> </ul> <input type="hidden" /> </div> <script> // 已经选中了第三个a元素,在该基础上进一步筛选 var a = $(".container .list a:eq(2)") // 1.进一步选中的祖先元素中,带有类样式.container的元素 var div = a.parents(".container"); // 0: div.container // length: 1 // 2.在上一步的选中结果中,进一步选中第一个li(find找后代元素) var li = div.find("li:eq(0)"); // 或li:first // 0: li // length: 1 // 3.在上一步的选中结果中,进一步选中所有的兄弟元素 var lis = li.siblings(); // 0: li // 1: li // 2: li // 3: li // 4: li // 5: li // 6: li // 7: li // 8: li // length: 9 </script> </body> </html>
筛选的结果仍然是一个 jQuery 对象,于是可以进行链式编程
ev 课笔记
在当前 jQuery 对象的基础上,进一步选中元素
在前面的基础上,进一步细化范围
$("a").nextAll(".abc"); // 选中a元素后面有.abc类样式的元素
.first() 选中第一个 li
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script> $("li").first().css('color', 'orangered'); </script>
.children() 选中 div 里面的每一个元素
<p>Hello</p> <div> <span>Hello Again</span> </div> <p>And Again</p> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script> $("div").children().css({"background": "#ff8c8c", "color": "#fff"}); </script>
<p>Hello</p>
<div>
<span style="background:rgb(255, 140, 140);color: rgb(255, 255, 255);">Hello Again</span>
</div>
<p>And Again</p>
jd.com 控制台
获取 .seckill-countdown 后面的所有兄弟元素,返回的 jQuery 对象里有两个兄弟元素
$('.seckill-countdown').nextAll(); // init(2) [div.seckill-list, div.seckill-brand, prevObject: init(1), context: document, selector: '.seckill-countdown.nextAll()']
获取其中一个兄弟元素 .seckill-brand
$('.seckill-countdown').nextAll('.seckill-brand'); // init [div.seckill-brand, prevObject: init(1), context: document, selector: '.seckill-countdown.nextAll(.seckill-brand)']
四、事件
集训营笔记
$(fn) 当前文档加载完成后发生的事件
jqObj.事件名(fn) 为匹配的所有元素注册指定事件
当前文档加载完成后发生的事件
1. $() 之前里面传过 css 选择器,也传过 dom 元素,
2. 这里还可以传一个函数 $(fn),该函数文档加载完成之后执行
$(function(){ console.log("文档加载完后执行该函数") })
文档准备好事件的原始的写法
1. 传入整个文档 document(可以把它当做一个dom元素),得到一个 jQuery 对象
2. 然后给 jQuery 对象注册 .ready 事件
$(document).ready(function(){ console.log("文档加载完后执行该函数") })
为所有选中的 .item 匹配点击事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title> <style>.active{background-color:chocolate;color:#fff;}</style> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script> </head> <body> <div class="container"> <div class="item">选项1</div> <div class="item">选项2</div> <div class="item">选项3</div> <div class="item">选项4</div> <div class="item">选项5</div> <div class="item">选项6</div> <div class="item">选项7</div> <div class="item">选项8</div> <div class="item">选项9</div> <div class="item">选项10</div> </div> <script> $(".item").click(function(){ $(this).addClass("active").siblings(".item").removeClass("active"); }) </script> </body> </html>
ev 笔记
监听元素的事件,例如监听文档加载完成、监听元素被点击
.on()
enevt 事件参数和原生的是一模一样的
this 是原生 DOM
$('p').on("click", function(enevt){ alert($(this).text()); });
五、属性
集训营笔记
方法 | 说明 |
jqObj.prop(属性名) | 获取匹配的第1个元素的属性值,注意返回的不是伪数组,是第1个元素的属性值 |
jqObj.prop(属性名, 属性值) | 设置匹配的所有元素的属性值,继续返回jQuery对象 |
jqObj.addClass(类样式) | 为匹配的元素添加类样式,继续返回jQuery对象 |
jqObj.removeClass(类样式) | 为匹配的所有元素一出类样式,继续返回jQuery对象 |
jqObj.toggleClass(类样式) | 为匹配的元素切换类样式,,继续返回jQuery对象 |
toggleClass 的意思是,
没有就加上 .active,
有就删除 .active
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性</title> <style> .container{width:100px;height:100px;background-color:burlywood;} .active{background-color:#f40;} </style> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script> </head> <body> <div class="container"></div> <script> $(".container").click(function(){ $(this).toggleClass("active"); }); </script> </body> </html>
练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>练习</title> <style> .item{margin:10px 0;}.active{background-color:brown;color:#fff;} </style> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script> </head> <body> <div class="container"> <div class="title"> <label> <input type="checkbox" />全选 </label> </div> <div class="item"> <label> <input type="checkbox" />选项1 </label> <button>设置为active</button> </div> <div class="item"> <label> <input type="checkbox" />选项2 </label> <button>设置为active</button> </div> <div class="item"> <label> <input type="checkbox" />选项3 </label> <button>设置为active</button> </div> <div class="item"> <label> <input type="checkbox" />选项4 </label> <button>设置为active</button> </div> </div> <script> // 元素选择器选中所有的按钮 $("button").click(function(){ $(this) .parents(".item") .addClass("active") .siblings() // 链式编程,继续找到它所有的兄弟元素,去掉类样式active .removeClass("active"); }) // 可以通过一个:冒号,得到一个input元素的类型,这里是把相应的input元素选中 // 注册change事件(不是点击事件)当input的值发生改变的适合 $(".title :checkbox").change(function(){ var kc = $(this).prop("checked"); // 得到是否选中的状态true/false $(".item :checkbox").prop("checked", kc); }) </script> </body> </html>
attr 和 prop 的区别
.attr() 我们自定义的属性,相当于dom.getAttribute()
.prop() 内置属性,比如 input 元素的 value,相当于 dom.xxx
ev 笔记
控制元素属性,例如
1. 修改类样式
2. 读取和设置文本框的 value
3. 读取和设置 img 的 src
.prop() 一般用于改变元素自己带的属性,
比如,a 元素的 href、title,
它既可以获取属性又可以改变属性
[type='checkbox'] 选择复选框,选中状态的返回 true,未被没选中的返回 false
<input type="checkbox" name="fruit" checked> <input type="checkbox" name="fruit"> <script> var result1 = $("input[type='checkbox']").eq(0).prop("checked"); var result2 = $("input[type='checkbox']").eq(1).prop("checked"); console.log(result1); // true console.log(result2); // false </script>
设置属性,
比如禁用页面上所有的文本框
$("input[type='checkbox']").prop({ disabled: true });
禁用和选中所有的复选框
<input type="checkbox" name="fruit"> <input type="checkbox" name="fruit"> <script> $("input[type='checkbox']").prop({ disabled: true, checked: true }); </script>
.attr()
一般设置的是自定义属性
prop 和 attr 的区别
.prop("href") 相当于 dom.href
.attr("href") 相当于 dom.getAttribute("href")
京东打开控制台
.prop 获取的是内置属性,内部的处理方式是完整路径
.attr() 相当于把元素里面的内容原封不动的获取出来,元素里写的是什么获取出来的就是什么
$("a").eq(101).prop("href"); // https://car.jd.com/ $("a").eq(101).attr("href"); // car.jd.com/
getAttribute() 获取的是元素上写的属性,另一个获取的是元素 DOM 对象上内置属性
<input type="checkbox" name="fruit"> <script> var cb = $("input[type='checkbox']")[0]; console.log(cb.checked); // false console.log(cb.getAttribute("checked")); // null </script>
多选框加上 checked 属性为选中状态,cb.checked 返回 true
属性
.text() 设置元素里面的文本
.val() 设置文本框的值
六、样式
集训营笔记
改动的是行内样式,获取的是最终样式
方法 | 说明 |
jqObj.css(样式名) | 获取元素的某个css样式名 |
jqObj.css(样式名, 样式值) | 设置元素的某个css样式 |
jqObj.width() | 获取元素宽度(内容区的宽) |
jqObj.height() | 获取元素高度(内容区的高) |
跟随鼠标移动的方块
1. 把 window 对象转换为 jQuery 对象,
2. 注册鼠标移动的事件 mousemove
3. 相对于视口的坐标 e.clientx、 e.clientY
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script> <style> .item{ width: 100px; height: 100px; background-color: chocolate; position: fixed; } </style> <title>跟随鼠标移动的方块</title> </head> <body> <div class="item"></div> <script> var div = $(".item"); // 为了避免反复获取dom,所以把这行放到外面 $(window).mousemove(function(e){ div.css({ left: e.clientX - div.width()/2, top:e.clientY - div.height()/2 }) }) </script> </body> </html>
ev 笔记
控制元素 style 样式,例如改变字体颜色、设置背景、获取元素尺寸、获取和设置滚动位置
前面选中的都是伪数组,后面批量添加类样式
$('.list li').addClass('item');
为所有 p 元素添加一些样式
$("p").css({"color": "#ff0011", "background": "blue"});
.css() 既可以获取样式,也可以设置样式
$('p').css("color"); // 获取样式属性的时候,是第一个p元素的
七、文档处理
集训营笔记
常见的两个文档处理,还有一个新增元素
方法 | 说明 |
jqObj.appendTo(container) | 将前面选中的元素(jQuery对象),移动到指定容器中container,该容器可以是dom也可以是jQuery对象 |
jqObj.append(doms) | 将一个或一些子元素,可以是dom也可以是jQuery对象,添加到前面的jQuery对象中 |
$("<a>") | 写一对代尖括号的字符串,表示新创建一个元素,返回jQuery对象 |
创建 a 标签,并插入到 .container 容器中
<div class="container"></div> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script> <script> $("<a>") .appendTo(".container") .prop("href", "http://ruyic.com") .text("MyBlog"); </script>
ev 笔记
更改 HTML 文档结构,例如删除元素、清空元素内容、改变元素之间的关系
删除元素,
删除页面上的 .seckill-brand 元素
$('.seckill-countdown').nextAll('.seckill-brand').remove();
找到页面上所有的 a 元素,然后删除。不用我们做循环操作了
$('a').remove();
改变元素的结构,
比如把一个元素加到另外一个元素里面去,
.appendTo() 把 p 元素放到 div 里
<p>I would like to say: </p> <div></div> <div></div> $("p").appendTo("div"); // <div><p>I would like to say: </p></div> // <div><p>I would like to say: </p></div>
.append() 在 p 元素里放 b 元素
<p>I would like to say: </p> $('p').append('<b>Hello</b>'); // <p>I would like to say: <b>Hello</b></p>
创建元素
创建元素得到的还是 jQuery 对象,然后加文本
$("<a>").text("link").appendTo(.list);
.empty() 直接把元素内容清空
<p>Hello, <span>Person</span> <a href="#">and person</a></p> $("p").empty();
八、ajax
jQuery 封装了 XHR,使 ajax 访问更加方便,这部分功能目前已被其他第三方库全面超越
$.ajax({})
$.get()
九、动画
切换显示/隐藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动画</title> <style> .container{width:200px;height:200px;background-color:burlywood;} </style> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script> </head> <body> <button>点击</button> <div class="container"></div> <script> $("button").click(function(){ $(".container").toggle(500); // toggle切换显示隐藏 }) </script> </body> </html>
十、练习
集训营笔记 穿梭框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>穿梭框</title> <style> select{width:200px;height:200px;} .left{float: left;} .btns button{display:block;margin:10px;width:45px;} </style> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script> </head> <body> <div id="listLeft" class="left"> <select multiple> <option value="">lorem</option> <option value="">laboriosam</option> <option value="">beatae</option> <option value="">ipsum</option> <option value="">amet</option> <option value="">consectetur</option> <option value="">adipisicing</option> <option value="">elit</option> <option value="">Placeat</option> <option value="">libero</option> </select> </div> <div class="btns left"> <button id="allToRight">>>|</button> <button id="toRight">></button> <button id="toLeft"><</button> <button id="allToLeft">|<<</button> </div> <div id="listRight" class="left"> <select multiple></select> </div> <script> $("#allToRight").click(function(){ $("#listLeft option").appendTo("#listRight select"); }); $("#allToLeft").click(function(){ $("#listRight option").appendTo("#listLeft select"); }); $("#toRight").click(function(){ // :selected表示被选中的 $("#listLeft option:selected").appendTo("#listRight select").prop("selected", false); }); $("#toLeft").click(function(){ $("#listRight option:selected").appendTo("#listLeft select").prop("selected", false);; }); </script> </body> </html>
ev 笔记 jQuery 版购物车
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>购物车jQuery版</title> <style> * { margin: 0;padding: 0; box-sizing: border-box; } body { font-size: 13px; } a { color: #3c3c3c; text-decoration: none; } em { color: #ff2100; font-weight: normal; font-style: normal; font-size: 17px; } input[type='checkbox'] { cursor: pointer; } #cart { /* outline: 1px dashed blue; */ width: 1200px; margin: 30px auto; overflow: hidden; } #cart div { /* outline: 1px dashed pink; */ float: left; } div.info { width: 400px; text-align: center; padding: 10px; } div.check, div.price, div.num, div.sum, div.del { width: 159px; text-align: center; padding: 10px; } /* 头部 */ .header { margin-bottom: 20px; background-color: #f3f3f3; } /* 商品列表 */ .itemChecked { background-color: #fff9de; } .list .item { border: 1px solid #ccc; margin-bottom: 10px; /* cursor: pointer; */ } .list .item .check .checkItem { margin-left: -30px; } .list .item .info img { float: left; border: 1px solid #ccc; padding: 5px; margin-right: 10px; } .list .item .num { font-size: 0; } .list .item .num .decr, .list .item .num .incr { display: inline-block; width: 25px; height: 25px; border: 1px solid #cacaca; background-color: #fff; font-size: 13px; line-height: 22px; } .list .item .num .txt { width: 45px; height: 25px; border: 1px solid #cacaca; text-align: center; } /* 总计与结算 */ .footer { margin-top: 10px; width: 1200px; height: 60px; padding: 20px 0; background-color: #f3f3f3; } .footer div.check { padding: 0; } .footer div.operation { width: 400px; } .footer div.operation a { margin: 0 10px; } #cart .footer>div.right { width: 380px; float: right; } .footer>div.right div { width: 110px; } .footer>div.right div.sums { width: 160px; } .footer>div.right div.done { height: 60px; margin-top: -20px; font-weight: bolder; line-height: 60px; text-align: center; } .footer>div.right div.done a { width: 100%; height: 100%; display: inline-block; font-size: 21px; color: #fff; background-color: #ff2100; } .footer em { font-size: 21px; font-weight: bolder; } </style> </head> <body> <div id="cart"> <div class="header"> <div class="check"> <input type="checkbox" class="checkAll" /> 全选 </div> <div class="info">商品信息</div> <div class="price">单价</div> <div class="num">数量</div> <div class="sum">金额</div> <div class="del">操作</div> </div> <div class="list"> <div class="item"> <div class="check"> <input type="checkbox" class="checkItem" /> </div> <div class="info"> <img src="https://img.alicdn.com/bao/uploaded/i2/3817310001/O1CN01qiU0Yt1BsV2LpfHvc_!!3817310001.jpg_80x80.jpg" alt="" /> <a href=""> 酷冷至尊 冰神B360ARGB电脑散热器白色 台式主机水冷散热器 </a> </div> <div class="price"><em>¥599.00</em></div> <div class="num"> <a href="" class="decr">-</a> <input type="text" value="1" class="txt" /> <a href="" class="incr">+</a> </div> <div class="sum"><em>¥599.00</em></div> <div class="del"> <a href="">删除</a> </div> </div> <div class="item"> <div class="check"> <input type="checkbox" class="checkItem" name="" /> </div> <div class="info"> <img src="https://img.alicdn.com/bao/uploaded/i4/2189100631/O1CN01YWJ4Y21GX2aPMz6ta_!!0-item_pic.jpg_80x80.jpg" alt="" /> <a href=""> 【天猫直送】ETS六代笔记本电脑抽风式散热器侧吸式风扇水冷拯救 </a> </div> <div class="price"><em>¥199.00</em></div> <div class="num"> <a href="" class="decr">-</a> <input type="text" value="1" class="txt" /> <a href="" class="incr">+</a> </div> <div class="sum"><em>¥199.00</em></div> <div class="del"> <a href="">删除</a> </div> </div> <div class="item"> <div class="check"> <input type="checkbox" class="checkItem" name="" /> </div> <div class="info"> <img src="https://img.alicdn.com/bao/uploaded/i1/2087512200/O1CN01zZHbqa1S7e0AsdJL4_!!2087512200.jpg_80x80.jpg" alt="" /> <a href=""> 索皇笔记本抽风式散热器电脑侧吸风扇机15.6寸14寸适用于联想华硕 </a> </div> <div class="price"><em>¥37.90</em></div> <div class="num"> <a href="" class="decr">-</a> <input type="text" value="1" class="txt" /> <a href="" class="incr">+</a> </div> <div class="sum"><em>¥37.90</em></div> <div class="del"> <a href="">删除</a> </div> </div> </div> <div class="footer"> <div class="check"> <input type="checkbox" class="checkAll" /> 全选 </div> <div class="operation"> <a href="" class="delChecked">删除选中商品</a> <a href="" class="clearAll">清空购物车</a> </div> <div class="right"> <div class="nums"> 已选 <em>0</em> 件商品 </div> <div class="sums"> 合计: <em>¥0.00</em> </div> <div class="done"> <a href="">结算</a> </div> </div> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function() { function setTotal() { let sum = 0; // :checked 选中所有选中状态的复选框 const checked = $(":checked:not(.checkAll)"); checked.each((index, ele) => { sum += +$(ele).parents('.item').find('.sum em').text().replace('¥', ''); }); // sum = sum === 0 ? '0.00' : sum; // console.log(sum ,checked.length); $('.footer .right .nums em').text(checked.length); $('.footer .right .sums em').text('¥' + sum.toFixed(2)); } // 全选 // 找到全选的多选,给它注册事件 $(".checkAll").change(function() { $(":checkbox").not(this).prop("checked", $(this).prop("checked")); setTotal(); }); $(".checkItem").change(function() { setTotal(); }); // 改变数量 $('.incr').click(function(e) { // 阻止默认行为 e.preventDefault(); // return false; const inp = $(this).prevAll('input'); const newNumber = +inp.val() + 1; changeNumber(newNumber, inp); }); $('.decr').click(function(e) { e.preventDefault(); const inp = $(this).nextAll('input'); const newNumber = +inp.val() - 1; changeNumber(newNumber, inp); }); function changeNumber(newNumber, inp) { if (newNumber < 1) { newNumber = 1; } inp.val(newNumber); // 变化总金额 // const sum = inp.parent().prev().children('em').text().replace('¥', ''); // let sumTotal = (sum * newNumber).toFixed(2); // inp.parent().next().children('em').text("¥" + sumTotal); const unitPrice = +inp.parents('.item').find('.price em').text().replace('¥', ''); const sum = unitPrice * newNumber; inp.parent().parents('.item').find('.sum em').text(`¥${sum.toFixed(2)}`); // 重新调用seTotal() setTotal(); } // 删除 $('.del a').click(function(e) { e.preventDefault(); // remove()方法在文档处理那个章 $(this).parents('.item').remove(); setTotal(); }); // 删除选中商品 $('.delChecked').click(function(e) { e.preventDefault(); // $('.item :checked').parents('.item').remove(); $(':checked:not(.checkAll)').parents('.item').remove(); setTotal(); }); // 清空购物车 $('.clearAll').click(function(e) { e.preventDefault(); $('.item').remove(); setTotal(); }); }); /* $(function(){ var sums = $(".footer .sums").children("em"); // 全选 $(".checkAll").change(function(){ if(this.checked === true){ $(".checkItem").prop({ checked: true }); $(".checkAll").prop("checked", true); }else{ $(".checkItem").prop({ checked: false }); $(".checkAll").prop("checked", false); } setTotal(); }); // 设置汇总函数 function setTotal(){ let total = 0; $(".item .checkItem").each(function(index, ele){ if(ele.checked === true){ let pr = $(ele).parent().nextAll(".sum").children("em").text(); total += parseInt(pr.slice(1)); } }); sums.text("¥" + total); } }); */ </script> </body> </html>