目录
jQuery入门
1.什么是 jQuery
jQuery 优点
简单使用jQuery
DOM 对象和 jQuery 对象的区别
一，jQuery 概述
jQuery 库：
即library，是一个封装好的特定的集合（方法和函数） 。从封装一大堆函数的角度理解库，就是在这个库中。封装了许多定义好的函数在里面，比如动画animate , hide ,show ,比如获取元素等
简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了
比如jQuery,就是为了快速方便的操作 DOM，里面基本都是函数（方法)
常见的js库
| 1.jQuery 2.Prototype 3.YUI 4.Dojo 5. Ext JS 6. 移动端的zepto |
这些库都是对原声js 的封装，内部都是用 js 实现的，我们主要学习jQuery
jQuery 的概念
jQuery 是一个快捷，简洁的javaScript 库，其设计的宗旨是“write Less,Do More",即倡导写更少的代码，做更多的事情
j 就是（JavaScript )Query查询 ，把js中的 DOM 操作进行了封装，我们可以快速的查询使用里面的功能
jQuery 封装了JavaScript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax 交互
学习jQuery本质：就是学习调用些函数 (方法) jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率
jQuery 优点
轻量级 核心文件才几十kb,不会影响页面的加载速度 跨浏览器兼容 链式编程，隐式迭代 对事件，样式，动画支持，大大简化了DOM操作 支持插件扩展开发。有着丰富的第三方插件 例如：树形菜单，日期控件，轮播图等· 免费 开源
二，jQuery 的基本使用
jQuery 的入口函数
jQuery 的入口函数
$(function(){
//函数的内容
})
或者可以写成
jQuery(function(){
// 需要写入的内容
})
// 等页面dom加载完之后执行js代码
1. 方法一
$(document).ready(function(){ // 等待文档执行完之后执行的代码
...//此处是页面加载完成之后的入口
});
eg. $(document).ready(function(){
$('div').hide();
})
// 等页面加载完之后执行js代码
2. 方法二
$(function(){
...// 此处时页面dom 加载完成的入口
});
eg.
$(function(){
$('div').hide();
})
等dom结构渲染完毕之后即可执行内部代码，不必等所有外部资源加载完成，jQuery 帮我们完成了封装
相当于我们原生js中的 DOMContentLoaded
不同于原生js中的load 事件是等页面文档，外部的js文件，css文件，图片加载完毕之后才执行内部函数
// 推荐使用第一种方式
jQuery的顶级对象 $
1.$ 是jQuery 的别称，在代码中可以使用jQuery 代替$,但一般为了方便，通常都直接使用 $ 2. $ 是jQuery 的顶级对象，相当于原生JavaScript 中的window 把元素利用$ 包装成 jQuery 对象，就可以调用jQuery 的方法
DOM对象和jQuery 对象 *
1. DOM 对象： 用原生 js 获取过来的对象就是DOM 对象
var myDiv=document.querySelector('div'); // myDiv 是 DOM 对象 不能使用jquery 里面的属性和方法
console.dir(myDiv);
myDIv.style.display='none';
2. jQuery 对象：用jQuery 方式获取过来的对象就是 jQuery 对象 本质：通过 $ 把 DOM 元素进行的包装
$('div'); // $('div'); 是一个 jQuery 对象 不能使用原生js的属性和方法
3. jQuery 对象只能使用 jQuery 方法， DOM 对象则使用原生js 属性和方法
4. jQuery 对象本质是：利用 $ 对 DOM 对象进行封装后产生的对象(伪数组形式存储)
补充：console.dir() 的使用非常简单，直接将需要 dump(打印 输出) 的对象传入该语句即可
jQuery 对象只能使用 jQuery 方法， DOM 对象则使用原生js 属性和方法
DOM 对象和 jQuery 对象之间可以相互转换
因为原生js比jQuery 更大，原生的一些属性和方法jQuery 没有给我们进行封装，想要获取这些属性和方法需要把 jQuery 对象转换为 DOM 对象才能使用
1.dom对象转换为 jQuery 对象 : $(DOM对象)
eg. var myDiv=document.querySelector('Div');
$(myDiv); // 获取对象为 dom 对象 将dom 对象转换为 jQuery 对象
2. jQuery 对象转换为 DOM 对象(两种方式)
$('div')[index] index 是索引号
$('div').get(index) index 是索引号
<video src="./file/舞蹈.mp4" controls="controls" muted></video> html 引入 视频文件 controls (控制) muted——静音
jQuery 隐式迭代
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<script>
// 1. 获取四个div元素
$("div");
// 2. 给四个div设置背景颜色为绿色 jquery对象不能使用style
$('div').css('background','#bfa');
// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul > li").css("color", "red");
</script>
三，jQuery 选择器
jQuery 基础选择器
原生js获取元素的方式很多，而且兼容性情况不一致，因此jQuery 给我们做了疯转，使获取元素统一标准
$("选择器") // 里面选择器直接写css选择器即可，但是要加引号
3.1基础选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| id 选择器 | $("#id") | 获取指定ID的元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $("div") | 获取同一标签的所有元素 |
| 并集选择器 | $("div,p,li") | 选取多个元素 |
| 交集选择器 | $("li.current") | 交集元素 |
3.2层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $("ul>li") | 使用>号，获取亲儿子层级元素；注意，并不会获取穗子层级的元素 |
| 后代选择器 | $("ul li") | 使用空格，代表后代选择器，获取ul下所有li 元素，包括孙子等 |
以数组的形式获取: jQuery对象以伪数组的形式存储
3.3jQuery 样式设置
jQuery 设置样式
$('div').css('属性'，'值');
*************************************
// eg.
<div>喜欢你是我的秘密</div>
<script>
// 1. 获取div 属性
console.log($("div"));
// 2.给四个div 设置背景颜色为粉色 jQuery对象不能使用 style
$("div").css("background","pink");
</script>
3.4隐式迭代 *
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代 简单理解：给匹配到的所有元素进行遍历循环，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用 (给每个元素都会绑定事件或者添加方法)
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $('li:first') | 获取第一个li 元素 |
| :last | $('li:last') | 获取最后一个li 元素 |
| :eq（index） | $("li:eq(2)") | 获取到的li 元素中，选择索引号为2的元素，索引号index从0开始 |
| ：odd | $("li:odd") | 获取到的li 元素中，选择索引号为奇数的元素 |
| :even | $("li:even") | 获取到的li元素中，选择索引号为偶数的元素 |
上面的选择器都带有冒号
3.5jQuery 筛选(选择器)方法 *
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $('li').parent(); | 查找父级 最近一级的父级元素 |
| chlidren(selector) | $("ul").children("li") | 相当于$("ul>li"), 最近一级（亲儿子） |
| find(selector) | $("ul").find("li"); | 相当于 $("ul li"), find() 类似后代选择器 |
| siblings(selector) | $(".first").siblings("li"); | 查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(".first").nextAll() | 查找当前元素之后所有的同辈元素 |
| prevAll([expr]) | $(".last").prevAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $('div').hasClass("protected") | 查找当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $("li").eq(2); | 相当于 $("li:eq(2)"),index 从0开始 |
重点记住 ： parent() children() find() siblings() eq()
获取第n个元素的方法
// 第一种方法更推荐
$("ul li").eq(2).css("color,"blue");
$("ul li:eq(2)").css("color,"blue");
jQuery 里面的排他思想
$(function () {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function () {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3.其余的兄弟去掉背景颜色 siblings 查找兄弟节点不包括自己本身 隐式迭代
$(this).siblings("button").css("background", "");
});
});
得到当前索引号的方法
$(this).index()
链式编程
链式编程是为了节省代码量
eg.
$(this).css('color','red').sibling().css('color','');
在使用链式编程的时候一定要注意时那个对象执行样式
四. jQuery 样式操作
https://jquery.cuishifeng.cn/ 参考文档 jQuery API 中文文档
jQuery 可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式
1.参数只写属性名，则是返回属性值
$(this).css("color");
2. 参数是`属性名，属性值，逗号分隔`，是设置一组样式，属性必须加引号，`值如果是数字可以不跟单位和引号`
$(this).css("color","red"); // 属性名一定要加引号 *
3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号
$(this).css({"color":"white","font-size":"20px"});
// ******************************
$("div").css({
width: 400,
height: 400,
backgroundColor:"red"
})
// 如果是复合属性则必须采取驼峰命名法 ，如果值不是数字则需要加引号
-
jquery报错：Uncaught ReferenceError: $ is not defined 出现的可能原因： 1，你未引用jquery库jquery.min.js文件，或者说路径错误；
4.1 设置类样式方法
作用等同于以前的classList, 可以操作类样式，注意操作类里面的参数不要加点
1.添加类：
$("div").addClass("current");
2. 移除类
$("div").removeClass("current");
3. 切换类
$("div").toggleClass("current");
eg.
<title>jQuery操作样式之类操作</title>
<script src="./file/jquery.min.js"></script>
</head>
<style>
div {
width: 150px;
height: 150px;
background-color: pink;
margin: 100px auto;
/* 添加过渡效果 */
transition: all 0.5s;
}
.current {
background-color: red;
/* 旋转动画 transform ：变换，使...变形 转换*/
transform: rotate(360deg);
}
</style>
<body>
<div class="current"></div>
<script>
$(function () {
// 1.添加类 addClass()
$("div").click(function () {
$(this).addClass("current");
}); // class 已经是类的 里面不用加点
// 2. 删除类 removeClass()
$("div").click(function () {
$(this).removeClass("current");
});
// 3 . 切换类 toggleClass()
$("div").click(function () {
$(this).toggleClass("current");
});
});
</script>
</body>
</html>
4.1.1类操作与className 区别
原生js 中classNme 会覆盖元素原先里面的类名
jQuery 里面类操作只是对指定类进行操作(追加，删除，切换)，不影响原先的类名
类名不用加 .
********************************************************
<body>
<div class="one"></div>
</body>
<script>
// var one=document.querySelector(".one");
// one.className("two"); // 增加类 会覆盖原先的类 原生的写法
$(".one").addClass("two"); // 增加类 不会覆盖原先的类 会在原生的基础上增加一个 类
// 相当于追加类 不影响以前的类名
// $(".one").removeClass("two"); 删除类名 two
</script>
4.1.2jQuery效果（动画效果）
jQuery 给我们封装了很多的动画效果，最常见的如下： `显示 隐藏` show() hide() toggle()--切换 `滑动效果` slideDown()'下拉' SlideUp() '上拉' slideToggle() `淡入淡出` fadeln() fadeOut() fadeToggle() fadeTo() `自定义动画` animate()
1.显示语法规范
show([speed,[easing],[fn]]) 显示参数
2.隐藏语法
hide([speed,[easing],[fn]])
3.切换语法
toggle([speed,[easing],[fn]])
eg,
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 150px;
height: 300px;
background-color: pink;
}
</style>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script type="text/javascript">
$(function(){
$("button").eq(0).click(function(){
$("div").show(1000,function(){
alert(1);
});
})
$("button").eq(1).click(function(){
$("div").hide();
})
$("button").eq(2).click(function(){
$("div").toggle();
})
});
</script>
</body>
</html>
4.滑动效果
下拉滑动
slideDown([speed,[easing],[fn]])
上拉滑动
slideUp([speed,[easing],[fn]])
切换滑动
slideToggle([speed,[easing],[fn]])
事件切换
hover([over,]out)
1)over:鼠标移到元素上要触发的函数 (相当于 mouseenter) 2) out: 鼠标移出元素要触发的函数 (mouseleave) 3)事件切换 hover 就是鼠标经过和离开的复合写法
案例
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="./file/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #fecc5b;
border-right: 1px solid #fecc5b;
}
.nav ul li {
border-bottom: 1px solid #fecc5b;
}
.nav ul li a:hover {
background-color: #fff5da;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function () {
// // 鼠标经过
// $(".nav>li").mouseover(function(){
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素 hide()隐藏元素
// $(this).children('ul').slideDown(500);
// })
// // 鼠标离开
// $(".nav>li").mouseout(function(){
// $(this).children("ul").slideUp(500); children() 方法返回返回被选元素的所有直接子元素。
// })
// 1、事件切换 hover :就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function(){
// $(this).children('ul').slideDown(500);
// },function(){
// $(this).children("ul").slideUp(500);
// })
// 2、事件切换 hover :如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function () {
$(this).children("ul").slideToggle(200);
});
});
</script>
</body>
</html>
动画队列及停止排队方法
1、动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
停止动画
stop()
1)stop() 方法用于停止动画或者效果
2) 注意：stop() 写到动画或者效果的前面，`相当于停止结束上一次的动画`
// $(this).children("ul").stop().slideToggle(200);
上面的例子写成这个样子就好了，没有 bug
5 淡入淡出效果
1.淡入效果语法规范 fadeIn([speed,[easing],[fn]]) 2.淡出效果语法规范 fadeOut([speed,[easing],[fn]]) 3. 淡入淡出切换效果语法规范 fadeToggle([speed,[easing],[fn]]) 4.渐进方式调整到指定的不透明度 fadeTo([[speed],opactity.[easing],[fn]])
所有动画效果都有的效果参数 （不包括 淡入淡出中修改不透明度的方法）
1）参数可以都省略，无动画直接显示
2) speed :三种预定速度之一的字符串 ("show", "normal", "fast") 或表示动画时长的毫秒数值 (如：1000)
3) easing : (Optional) 用来指定切换效果，默认是"swing" ,可用参数 "linear"
4) fn : 回调函数，在动画完成时执行的函数，每个元素执行一次
动画参数的所有特点
淡入淡出中修改不透明度的效果参数
1)opacity 透明度必须写，取值0~1之间
2) speed :三种预定速度之一的字符串("show" "normal" "fast")或表示动画时长的毫秒数值 (如：1000) `必须写`
3) easing : (Optional) 用来指定切换效果，默认是 "swing",可用参数 "linear"
4) fn : 回调函数，在动画完成时执行的函数，每个元素执行一次
**************************
`速度和透明度 必须写，其他的可以省略`
6.自定义动画 animate
animate(params,[speed],[easing],[fn])
参数
1)`params: 想要更改的样式，以对象形式传递，必须写,属性名可以不带引号，如果是复合属性则需要采取驼峰命名法BorderLeft`其余1参数都可以省略
2) speed :三种预定速度之一的字符串("show" "normal" "fast")或表示动画时长的毫秒数值 (如：1000)
3) easing : (Optional) 用来指定切换效果，默认是 "swing",可用参数 "linear"
4) fn : 回调函数，在动画完成时执行的函数，每个元素执行一次
动画案例：`手风琴`
<!DOCTYPE html>
<html lang="en">
<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>王者荣耀手风琴效果01</title>
<script src="./file/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(./file/img09.jpg) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="./file/img.jpg" alt="" class="small">
<img src="./file/img.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="./file/img02.jpg" alt="" class="small">
<img src="./file/img02.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="./file/img03.jpg" alt="" class="small">
<img src="./file/img03.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="./file/img05.jpg" alt="" class="small">
<img src="./file/img05.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="./file/img04.jpg" alt="" class="small">
<img src="./file/img04.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="./file/img07.jpg" alt="" class="small">
<img src="./file/img07.jpg" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="./file/img08.jpg" alt="" class="small">
<img src="./file/img08.jpg" alt="" class="big">
</a>
</li>
</ul>
</body>
<script>
$(function () {
$('.king li').mouseenter(function () {
//鼠标经过，当前小li宽度变为224px 同时里面的小图片淡出，大图片淡入
$(this).stop().animate({
width: 224
}).find('.small').stop().fadeOut().siblings('.big').fadeIn();
//其余兄弟小li款变为68px 小图淡入。大图淡出
$(this).siblings('li').stop().animate({
width: 69
}).find('.small').stop().fadeIn().siblings('.big').fadeOut();
});
})
</script>
</html>
五. jQuery属性
5.1.设置或获取元素固有属性 prop()
固有属性： 元素本身自带的属性
1.获取属性语法
prop("属性")
2.设置(/ 修改）属性语法
prop("属性"，"属性值")
5.2设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性 我们称之为自定义属性 比如：给div添加的属性 index="1"
1.获取属性语法
attr("属性") //类似原生 getAttribute() attribute ---属性
2，设置属性语法
attr("属性","属性值") // 类似原生 setAttribute()
该方法也可以获取H5自定义属性
5.3 数据缓存
把数据当变量来看，数据存到内存里面，在 dom 里面看不到
用data() 属性获取h5的自定义属性 不用写 data- 开头 直接写data 后面的属性就可以了 返回的是数字型的
date() 方法可以在指定元素上存取数据，并不会修改 DOM元素结构，一旦页面刷新，之前存放的数据都将被移除 这个元素的数据是存放在元素的内存里面的
1.附加数据语法
data("name","value") //向被选元素附加数据
2.获取数据语法
data("name") //向被选元素获取数据
同时，还可以读取html5自定义属性 data-index ,得到的是数字型
<body>
<a href="#" title="">都挺好</a>
<!-- checked 属性规定在页面加载时应该被预先选定的 input 元素。 -->
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
</body>
<script>
// 获取链接属性的值
$(function () {
// element.prop("属性名") 获取元素固有属性值
console.log($("a").prop("href"));
$("a").prop("title", "我们都挺好");
// change() 当元素的值发生改变时，会发生change 事件
// 当复选框发生改变的时候 输出复选框的checked 属性处于什么状态
$("input").change(function () {
console.log($(this).prop("checked"));
})
// index 是自定义的属性 不能通过prop 进行获取
// console.log($("div").prop("index")) // 输出 undefined 未定义
// **************************************2 *元素的自定义属性通过 attr进行获取
console.log($("div").attr("index")); // 输出1
console.log($("div").attr("index", 4)); // 元素更改为4
console.log($("div").attr("date-index")); // 元素更改为4
// date-index h5 新增的属性
// 3. ******************数据缓存 date() z这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy"); // 用户名时 uname 值是 andy
console.log($("span").data("uname")); // 把元素当变量来看 ，把相关数据存到元素身上去
// 这个方法获取 data-index h5自定义属性 第一个 不用写 data-而且返回的是数字型
console.log($("div").data("index")); //获取data数据里面的index
})
</script>
:checked 选择器 查找被选中的表单元素
Jquery购物车模块-全选
$(function(){
// 1.全选 /全部选功能模块
// 就是把全选按钮(checkall) 的状态赋值给 三个小按钮(j-checkbox)就可以了
// 事件可以使用change
$(".checkall").change(function(){
console.log();
var index = $(this).prop("checked");
// 下面那个全选按钮也要绑定，
$(".j-checkbox, .checkall").prop("checked",index);
})
// 2. 通过小复选框控制全选按钮 如果小复选框选中的个数等于3，就把上下两个全选按钮选上，否则全选按钮不选
$(".j-checkbox").change(function(){
// if(被选中的小的复选框个数与所有小复选框个数相同){
// 全选按钮选中
// }else{
// 不选中全选按钮
// }
// 通过checked 选择器 :checked 查找被选中的表单元素
// console.log($(".j-checkbox:checked").length);
// $(".j-checkbox").length：所有小复选框个数
if($(".j-checkbox:checked").length===$(".j-checkbox").length){
$(".checkall").prop("checked",true);
}else{
$(".checkall").prop("checked",false);
}
})
})
jQuery购物车模块-修改商品的小计
// 数量 加
$(".increment").click(function () {
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
// 修改商品小计
var p = $(this).parents(".p-num").siblings(".p-price").html();
p = p.substr(1);
var price = (p * n).toFixed(2);
$(this).parent().parent().siblings(".p-sum").html("￥" + price);
getSum();
})
// 数量 减
$(".decrement").click(function () {
var n = $(this).siblings(".itxt").val();
if (n == 1) {
return false;
}
n--;
$(this).siblings(".itxt").val(n);
// 修改商品小计
var p = $(this).parents(".p-num").siblings(".p-price").html();
p = p.substr(1);
var price = (p * n).toFixed(2);
$(this).parent().parent().siblings(".p-sum").html("￥" + price);
getSum();
});
5.4 jQuery内容文本值
主要针对元素的`内容`还有`表单的值`进行操作
1. 普通的元素内容 html() 相当于原生innerHTML
html() // 获取元素内容
html("内容") // 设置元素内容
2. 普通元素文本内容 text() (相当于原生 innerText ) 3.表单的值 val() ( 相当于原生 value)
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value=" 请输入内容">
<script>
// 1 获取设置元素内容 html()
console.log($("div").html());
// $("div").html("123");
// 2 获取设置元素文本内容 text()
console.log($("div").text()); // 获取的元素没有标签
// 3 获取设置表单元素 val()
console.log($("input").val());
$("input").val("123"); // 修改表单属性的值
// console.log();
</script>
</body>
修改普通元素的内容是 text() 方法 截取字符串：substr(1) 从第一个位置开始截取
parents('选择器') 可以返回指定祖先元素
最后计算结果如果想要保留两位小数 通过 toFixed(2) 方法
六.jQuery元素操作
主要是`遍历`、创建、添加、删除元素操作
6.1 遍历操作
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历
语法1：
$("div").each(function(index,domEle){xxx;})
1.each() 方法遍历匹配的每一个元素。主要用到 DOM处理 each 每一个
2.里面的回调函数有两个参数：index是每个元素的索引号；domEle 是每个`DOM元素对象，不是 jQuery 对象`
`3.所以要使用jQuery方法，需要给这个dom 元素转换为jQuery 都西昂 $(domEle)`
语法2：
$.each(object,function(index,element){xxx;})
1.$.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2.里面的函数有两个参数：index 是每个元素的索引号；element 遍历内容
遍历 dom对象用 each 遍历对象数组 用 $.each() 更合适
6.2创建添加 删除元素
6.2.1 创建元素
$("<li></li>"); // 动态的创建了一个类
6.2.2 添加元素
1)内部添加
$("ul").append(内容); // 添加创建的 内容 把内容放入匹配元素内部的最后面，类似原生 appendChild
$("ul").prepend(内容); //内部添加 并且放到内容的最前面
2)外部添加
element.after("内容") // 把内容放入目标元素后面
element.before("内容) // 把元素放入目标元素前面
注: 内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，它们是兄弟关系
6.2.3 删除元素
element.reomve() //删除匹配的元素 （本身）
element.empty() // 删除匹配的元素集合中所有的子节点 孩子被清空
element.html("") // 清空匹配的元素内容 孩子被清空
七. JQuery 尺寸和位置操作
获取元素尺寸大小的方法
| 语法 | 用法 |
|---|---|
| width() / height() | 取得匹配元素宽度和高度 |
| innerWidth() / innerHeight() | 取得匹配元素宽度和高度值 包含padding |
| outerWidth() / outerHeight() | 取得匹配元素宽度和高度值 包含 padding 、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值 包含 padding、border、margin |
以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不用写单位
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid #00FFFF;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
$(function(){
// 1、width() / height() 获取设置元素大小
console.log($("div").width());//200
console.log($("div").innerWidth());//220 = 200 + padding*2
console.log($("div").outerWidth());//250 = 200 + padding*2 + border*2
console.log($("div").outerWidth(true)); //290 = 200 + padding*2 + border*2 + margin*2
})
</script>
</body>
</html>
jQuery 位置
位置主要有三个：offset() position() scrollTop() / scrollLeft()
offset()
1. offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
2.该方法有两个属性 left、top。`offset().top`:用于获取元素到文档顶部的距离；`offset().left`:用于获取元素到文档左侧的距离
3.可以设置元素的偏移：offset({top:10,left:30}); 设置当前选定的元素的偏移，于父盒子无关（即使有定位关系）
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin:0;
padding: 0;
}
.father {
position: relative;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: #00FFFF;
}
</style>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script type="text/javascript">
$(function() {
console.log($(".son").offset());//object()
console.log($(".son").offset().top);//100
$(".son").offset({
top:100,
left:150
})
console.log($(".son").offset());
// 获取距离带有定位父级位置(偏移)position 如果没有带定位的父级，则以文档稳准
console.log($(".son").position());
})
</script>
</body>
</html>
position() 获取元素的偏移
position() 获取元素的偏移 1.position()方法用于返回被选元素相对于`带有定位的父级`偏移坐标，如果父级都没有定位，则以文档为准。 2. 这个方法只能获取不能设置偏移
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin:0;
padding: 0;
}
.father {
position: relative;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: #00FFFF;
}
</style>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script type="text/javascript">
$(function() {
console.log($(".son").offset());//object()
console.log($(".son").offset().top);//100
$(".son").offset({
top:100,
left:150
})
console.log($(".son").offset());
// 获取距离带有定位父级位置(偏移)position 如果没有带定位的父级，则以文档稳准
console.log($(".son").position());
})
</script>
</body>
</html>
scrollTop() / scorllLeft() 设置获取元素被卷去的头部和左侧
1.scrollTop() 方法设置或返回被选中元素被卷去的头部
2.animate 动画函数里面有 scrollTop 属性，可以设置位置
但是元素做动画 ，因此 $("body,html").animate({scrollTop:0}) 这里是元素进行的移动 所以我们把`前面的对象`封装成为一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
height: 2000px;
}
.back {
position: fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: none;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="back">返回顶部</div>
<div class="container">
</div>
<script>
$(function() {
$(document).scrollTop(100);
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部 元素的动画
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
})
})
</script>
</body>
</html>
节流阀 互斥锁
八. jQuery 事件导读
1.单个事件的注册
element.事件（function(){})
eg, 给 div 添加点击事件 $("div").click(function(){事件处理程序})
其他事件和原生基本一致
比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
2.事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数 语法： element.on(events,[selector],fn) 1.events：一个或多个用空格隔开的事件类型，如："click"或"keydown" 2.selector：元素的子元素选择器 3.fn：回调函数，即绑定在元素身上的侦听函数
on() 方法优势：1
可以绑定多个事件，多个处理事件处理程序
1.
$("div").on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
});
2. 如果处理事件程序相同
$("div").on("mouseover mouseout",function(){ // 鼠标经过和鼠标离开都会触发这个函数
$(this).toggleClass("current"); // toggle 切换 有删除 无增加
});
on() 事件优势2
可以实现委派(委托)操作。事件委派定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$("ul").on('click','li',function(){
alert('hello world !');
});
// 上面案例中的 ul 是父选择器 li 是子选择器 ( click是绑定在ul身上的，但是触发的对象是ul里面的小li)
// 事假绑定在ul身上，但是触发对象是 li,点击li之后有事假冒泡到父亲身上，父亲身上的点击事件就会执行这个程序
在此之前，有bind() ,live() ，delegate() 等方法来处理事件绑定或者事件委派，目前最新版用 on 来代替他们
on() 事件优势3 动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件 on 可以给未来动态创建的元素绑定事件
3.事假处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序
$("p").off() //解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件 后面的 off 是侦听函数名
$("ul").off("click","li") //解绑事件委托
如果有的事件只想被触发一次，可以使用one() 来绑定事件 使用方法和off 类似
4.自动触发事件 trigger()
有些事件希望自动触发，比如轮播图自动播放功能跟右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发
// 自动触发事件 第一种简写形式 会触发元素的默认行为 （比如input标签有光标在闪烁）
元素.事件() $("div").click();
// 第二种自动触发模式 元素.trigger() 会触发元素的默认行为 （比如input标签有光标在闪烁）
element.trigger("type") $("div").trigger("click");
//第三种自动触发模式 不会触发元素的默认行为 （比如input标签没有光标在闪烁）
element.triggerHandler(type) $("div").triggerHandler("click");
jQuery事件对象
事件被触发就会有事件对象的产生 事件对象可以用来阻止默认行为 或者 阻止事件冒泡
element.on(events,[selector],function(event{}))
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡 : event.stopPropagation()
九.jQuery对象拷贝
如果想要把某个对象拷贝(合并)给另外一个对象使，此时可以使用 $.extend() 方法 语法： $.extend([deep],target,object1,[objectN]) 1.deep: 如果设为 true为深拷贝 , 默认为false 浅拷贝 2.target : 要拷贝的目标对象 3.object1 :待拷贝到第一个对象的对象 4.objectN : 待拷贝的第n个对象的对象 5. 浅拷贝是把被拷贝的对象`复杂数据类型中的地址`拷贝给目标对象,修改目标对象`会影响·`被拷贝的对象 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性，会合并在一起
eg.
$(function(){
var targetObj={};
var obj={
id:1,
name:"andy"
};
// $.extend(target,obj);
$.extend(targetObj,obj); // 将obj 拷贝给 targetObj
console.log(targetObj); // 会覆盖 targetObj 里面原来的数据
})
十.多库共存
jQuery 使用$作为标识符，随着jQuery的流行，其他js库也会用$作为标识符，这样一起使用九会引起冲突，需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同事存在，这就叫多库共存
jQuery解决方案：
1.`把里面的$ 符号统一修改为 jQuery 比如 jQUery("div")`
2.jQuery变量规定新的名称: `$.noConflict() var xx=$.noConflict();` $可以写成jQuery
十一,jQuery插件
jQuery功能比较有限，想要在复杂的特效效果，可以借助于jQuery 插件完成
注意： 这些插件夜市依靠于jQuery 来完成的，所以必须要引入jQuery 文件，因此也称为jQuery 插件
jQuery插件常用的网站： 1.jQuery 插件库 https://www.jq22.com/ 2.jQuery之间 http://www.htmleaf.com/ 推荐 免费开源 jQuery 插件使用步骤： 1.引入相关文件 (jQuery文件和插件文件) 2.复制相关 html css js (调用插件)
图片懒加载
当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验，帮助减轻服务器负载 1.该插件必须写在所有图片的下面（现有图片才能懒加载） 我们使用jquery 插件库 EasyLazyload 注意，此时的`js引入文件和js调用`必须写到`DOM元素(图片)最后面`
快捷键
ctrl+h 查找 和替换
全屏滚动 (fullpage.js)
gitHUb: https://github.com/alvarotrigo/fullPage.js 中文翻译网站： https://www.dowebok.com/
十二.bootstrap js插件
bootstrap 矿建也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入 jQuery文件 https://www.bootcss.com/ <div class="container"></div> // 复制的代码写到 这里面
十三.本地存储
页面刷新不会丢失数据，因此需要用到本地存储
存储的数据格式:
var todolist=[{title；'xxx',done:false}] // title:'文本框的内容' done:是否完成
注意1: 本地存储localStorage 里面只能存储字符串格式，因此需要把对象转换为字符串 JSON.stringify(date)
注意2:获取本地存储数据，需要把里面的`字符串转换为对象格式` JSON.parse() 我们才能使用里面的数据
页面中的数据，都要从本地存储中获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面
读取本地存储的数据
eg. function getDate(){
var date=localStorage.getItem("todolist");}
响应式开发
Bootstrap 前端开发框架
响应开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同的设备的目的
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕(手机) | <768px |
| 小平设备(平板) | >=768px~<992px |
| 中等屏幕(桌面显示器) | >=992px~<1200px |
| 宽屏设备(大桌面显示器) | >=1200px |
响应式布局容器： 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果
原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化
平时我们的响应式尺寸划分
超小屏幕（手机，小于768px）：设置宽度为100%
小屏幕(平板，大于等于768px):设置宽度为750px
中等屏幕(桌面显示器，大于等于992px) ：宽度设置为970px
大屏幕（大桌面显示器，大于等于1200px ）：宽度设置为1170px
@media screen and(max-width:767px){
.container{
width:100%;}
.container ul li{
width:33.33%}}
Bootstrap 来自ttwitter （推特），是目前最受欢迎的前端框架。bootstrap 是基于HTML 、CSS 和javascript 的，它简洁灵活，
使得web 开发更加快捷
https://www.bootcss.com/ 中文网站 https://getbootstrap.com/ 官网 https://v3.bootcss.com/ 推荐使用 控制权在框架本身，使用者要按照矿建所规定的某种规范进行开发 Bootstrap 使用四部曲：1.创建文件夹结构 2，创建html骨架结构 3，引入相关样式文件 4.书写内容 https://getbootstrap.com/docs/4.0/getting-started/download/# 下载页面
bootstrap 文件的引入：
方式1:引用在线bootstrap 的样式
方式2：将bootstrap 下载到本地进行引用
二，在这里 我是直接引用的 https://v3.bootcss.com/getting-started/#download 里面的链接 （直接使用这些 BootstrapCDN 提供的链接即可。）
引用注意事项：：：：**********************************
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
bootstrap 官网里面的 入门里面的基本模板
<meta http-equiv="X-UA-Compatible" content="IE=edge"> ————————解释: 要求当前网页使用ie浏览器最高版本的内核来渲染
通过类来调用样式 ，如果对于原先的样式不满意利用我们自己写的样式覆盖原先的样式（通过类来实现)
书写内容：
1，直接拿bootstrap 预先定义好的样式来使用，
2.修改Bootstrap 原先的样式，注意权重问题
3.学好 Bootstrap 的关键在于知道它定义了那些样式，以及这些样式能实现什么样的效果
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，bootstrap 预先定义好了这个类，叫做 .container 它提供了两个作此用处的类
.container 类 实现响应式布局 container 类有一个 左右15px 的边距
container 类
响应式布局的容器 固定宽度
大屏 (>=1200px) 宽度设为1170px
中屏 (>=992px) 宽度设为970px
大屏 (>=768px) 宽度设为750px
超小屏 (100%)
container-fluid 类
流式布局 百分百宽度
占据全部视口 (viewpot) 的容器
适合于单独做移动端开发
Bootstrap 栅格系统
栅格系统英文为 "grid systems", 也有人翻译为 "网络系统" ，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
Bootstrap 提供了一套响应式，移动设备优先的栅格化系统，随着屏幕或视口(viewpot ）尺寸单独增加，系统会自动分发最多12列
Bootstrap 里面container 宽度是固定的，但是不同屏幕下，container 的宽度不同，我们在把container 划分为12等份
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局,你的内容可以放入创建好的布局中
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
行 (row) 必须放到container 布局容器中
我们实现列的平均划分，需要给列添加前缀
xs-extra small : 超小 sm-small: 小 md-medium: 中等 lg-large: 大 列 (column)大于12，多余的'列(column)'所在的元素将被作为一个整体另起一行排列 每一列默认有一个左右12像素的padding 可以同时为一列指定多个设备的类名，以便划分不同分数，例如 class="col-md-4-col-sm-6"
JQuery 考核总结
一个元素事件：$("div").on("click keydown",function(){ });
将里面的内容渲染到页面"("div").html("") 将里面的内容清空"
多库共存 ： var a = 将"$""符号改为a进行调用实现多库共存
浅拷贝：将拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响拷贝的对象
深拷贝：前面加true ,完全拷贝（拷贝的对象，而不是地址，修改目标对象不会影响被拷贝的对象）
921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
