Go to comments

第三方库 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.mdmarkdown编辑器
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">&gt;&gt;|</button>
  <button id="toRight">&gt;</button>
  <button id="toLeft">&lt;</button>
  <button id="allToLeft">|&lt;&lt;</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>



Leave a comment 0 Comments.

Leave a Reply

换一张