前端基础--jQuery（pink老师课程笔记）
Jquery概述
JavaScript库
即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数，如：动画animate，hide，show，获取元素等
简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。方便快速高效使用封装好的功能，如jQuery库，为了快速方便操作DOM。
常见的JavaScript库
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto
这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的。
jQuery的概念
jQuery 是一个快速、简介的JavaScript库，其设计的宗旨是“write Less，Do More”,提倡写更少的代码，做更多的事
j为JavaScript，Query：查询；意为查询js，把js中的DOM操作做了封装，可以快速的查询使用里面的功能，提高开发效率。
jQuery封装了js常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质就是学习调用这些函数（方法）。
优点：
- 轻量级，核心文件才几十kb，不会影响页面加载速度
- 跨浏览器兼容，基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持，大大简化了DOM操作
- 支持插件扩展开发。有着丰富的第三方的插件，例如:树形菜单、日期控件、轮播图等
- 免费、开源
jQuery 的基本使用
先引入jQuery.js
jQuery的入口函数
jQuery中常见的两种入口函数：
// 第一种: 简单易用。
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
总结：
- 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
- 相当于原生 js 中的 DOMContentLoaded。
- 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
- 更推荐使用第一种方式。
jQuery 的顶级对象 $
-
$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
$('div').hide();等价于jQuery('div').hide(); -
$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
jQuery 对象和DOM对象
使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :
- 用原生 JS 获取来的对象就是 DOM 对象
- jQuery 方法获取的元素就是 jQuery 对象。
- jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
注意：
- 只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法（不能相互调用）
jQuery对象和DOM对象互相转换
DOM对象和jQuery对象之间是可以相互转换的，因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法，需要把jQuery对象转换为DOM对象才能使用。
// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box'); // 获取DOM对象
var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象
// 2.jQuery 对象转换为 DOM 对象有两种方法：
// 2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]
// 2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)
总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。
jQuery 选择器
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
基础选择器
$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID的元素 |
| 全选选择器 | $('*') | 匹配所有元素 |
| 类选择器 | $('.class') | 获取同一类class的元素 |
| 标签选择器 | $('div') | 获取同一类标签的所有元素 |
| 并集选择器 | $('div,p,li') | 获取多个元素 |
| 交集选择器 | $('ul.li.a') | 交集元素 |
层级选择器
层级选择器最常用的两个分别为：后代选择器和子代选择器。
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $("ul>li”); | 使用>号，获取亲儿子层级的元素（子一代）；注意，并不会获取孙子层级的元素（子二代） |
| 后代选择器 | $("ul li"); | 使用空格，获取ul下所有的li元素，包括子二代、子三代。。。 |
案例：
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(function() {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
</body>
筛选选择器
在所有的选项中选择满足条件的进行筛选选择。常见如下：
| 语法 | 用法 | 描述 |
|---|---|---|
| :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元素中，选择索引号为偶数的元素 |
案例代码
<body>
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
$(function() {
$("ul li:first").css("color", "red");
$("ul li:eq(2)").css("color", "blue");
$("ol li:odd").css("color", "skyblue");
$("ol li:even").css("color", "pink");
})
</script>
</body>
另: jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $("li").parent(); | 查找父级 |
| children(selector) | \(("ul").children("li"); | 相当于\)("ul>li"),子一代（儿子） | |
| find(selector) | \(("ul").find("li"); | 相当于\)("ul li"),后代选择器 | |
| siblings(selector) | $(".first").siblings("li"); | 查找除自身以外的兄弟节点 |
| nextAll([expr]) | $(".first").nextAll(); | 查找该元素当前位置之后所有的同辈元素 |
| prevtAll([expr]) | $(".last").prevAll(); | 查找该元素当前位置之前所有的同辈元素 |
| hasClass(class) | $("div").hasClass("protected") | 检查当前元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | \(("li").eq(2); | 相当于\)("li:eq(2)"),index 从0开始，选取下标为2的元素（index可以直接是一个变量） |
重点记住：parent() children() find() siblings() eq()
排他思想
- jQuery 设置样式
$('div').css('属性', '值')
- jQuery 里面的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
隐式迭代
// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作
$('div').css('background','pink');//给所有div设置背景色为pink
$('ul li').css('color','skyblue');
链式编程
// 链式编程是为了节省代码量，看起来更优雅。
//原先分为两句：
//$(this).css("color","red");
//$(this).siblings().css("color","");
//jQuery链式编程 代码更简洁
$(this).css('color', 'red').sibling().css('color', '');
举个栗子：
<button><div>a</div>
快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 让当前元素颜色变为红色
// $(this).css("color", "red");
// 3. 让其余的姐妹元素不变色
// $(this).siblings().css("color", "");
// 链式编程
// $(this).css("color", "red").siblings().css("color", "");
// 兄弟的父级变色
// $(this).siblings().parent().css("color","red");
//兄弟的儿子变色
$(this).siblings().children().css("color","red");
});
})
</script>
案例：淘宝服饰精品案例
思路分析：
- 核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
- 需要得到当前小li 的索引号，就可以显示对应索引号的图片
- jQuery 得到当前元素索引号 $(this).index()
- 中间对应的图片，可以通过 eq(index) 方法去选择
- 显示元素 show() 隐藏元素 hide()
代码：
<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">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(../img/lili.jpg) repeat-x;
}
#left li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover {
background-image: url(../img/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script type="text/javascript">
// 入口函数
$(function() {
// 1. 鼠标经过左侧小li 事件
$("#left li").mouseover(function() {
// 2 得到当前小 li 的索引号
var index = $(this).index();
// console.log(index);
// //3 让我们右侧的盒子相应索引号的图片显示出来就好了
// $("#content div").eq(index).show();
// //4 让其余的图片隐藏（兄弟元素隐藏）
// $("#content div").eq(index).siblings().hide();
// 通过链式编程将 3 4 整合为一句代码
$("#content div").eq(index).show().siblings().hide();
})
})
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">连衣裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<div id="content">
<div>
<a href="#"><img src="../img/女靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/雪地靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/冬裙.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/呢大衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/毛衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/棉服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/女裤.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/羽绒服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/牛仔裤.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
</body>
</html>
jQuery 样式操作
jQuery中常用的样式操作有两种:CSS()和设置类样式方法
方法一：操作CSS方法
jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。常用以下三种形式：
// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');
// 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号(不加引号的话必须是数字，且不能加单位，且默认单位为px)
$(this).css(''color'', ''red'');
// 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，复合属性必须采用驼峰命名法，如果值不是数字，需要加引号
// 通过对象+引号设置多种样式：
$("div").css({
"width":"400px",
"height":"400px",
"background-color":"skyblue"
})
//如果用对象且不加引号写法，那么复合属性必须采用驼峰命名法，如果值不是数字，需要加引号（默认单位为px）
$("div").css({
width:400,
height:400,
backgroundColor:"skyblue"
})
})
注意：css() 多用于样式少时操作，多了则不太方便
方法二：设置类样式操作方法
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。常用以下三种形式 :
// 1.追加类
$("div").addClass("current");//类名不用添加 .
// 2.删除类
$("div").removeClass("current");
// 3.切换类//没有就加上，有就切换
$("div").toggleClass("current");
注意：
- 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
- 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作（追加，删除，切换），不影响原先的类名。
- 类名不用加 .
举个栗子：
<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">
.one {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
transition: all 0.5s;
}
.two {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 0 auto;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="one"></div>
<script type="text/javascript">
// 原生js通过className修改类名，该方法会覆盖掉之前所有的类名，只保留新的类名
// var one = document.querySelector(".one");
// one.onclick = function(){
// this.className = "two";
// }
// jQuery 通过添加类名方法（addClass）可以做到在不覆盖之前类名时追加类名
$(function() {
$(".one").click(function(){
$(".one").addClass("two");//div.class = "one two"
})
})
</script>
</body>
</html>
jQuery 动画效果
jQuery 给我们封装了很多动画效果，最为常见的如下：
- 显示隐藏：show() / hide() / toggle() ;
- 滑入滑出：slideDown() / slideUp() / slideToggle() ;
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定义动画：animate() ;
注意：
- 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
- jQuery为我们提供另一个方法，可以停止动画排队：stop() ;
显示隐藏
显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;
语法规范如下:
-
显示语法规范：
-
show([speed,[easing],[fn]]); -
显示参数
-
参数都可以省略，无动画，直接显示
-
speed：三种预定速度之一的字符串（“slow”,"nomal","fast"）或表示动画时长的毫秒数值（如：1000）
-
easing：（Optional）用来指定切换效果，默认时"swing"，可用参数“linear”
-
fn:回调函数，在动画完成时执行的函数，每个元素执行一次
-
-
-
隐藏语法规范：
-
hide([speed,[easing],[fn]]); -
显示参数
-
参数都可以省略，无动画，直接显示
-
speed：三种预定速度之一的字符串（“slow”,"nomal","fast"）或表示动画时长的毫秒数值（如：1000）
-
easing：（Optional）用来指定切换效果，默认时"swing"，可用参数“linear”
-
fn:回调函数，在动画完成时执行的函数，每个元素执行一次
-
-
-
切换语法规范：
-
toggle([speed,[easing],[fn]]);-
参数都可以省略，无动画，直接显示
-
speed：三种预定速度之一的字符串（“slow”,"nomal","fast"）或表示动画时长的毫秒数值（如：1000）
-
easing：（Optional）用来指定切换效果，默认时"swing"，可用参数“linear”
-
fn:回调函数，在动画完成时执行的函数，每个元素执行一次
-
-
举个栗子
<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("swing");
})
$("button").eq(2).click(function(){
$("div").toggle("swing");
})
});
</script>
</body>
</html>
案例：tab 栏切换
案例分析：
- 点击上部的li，当前li添加current类，其余兄弟移除类
- 点击的同时，获得当前li的索引号
- 让下部里面相应索引号的item显示，其余的item隐藏
<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="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
// 1. 点击上部的li，当前li添加current类，其余兄弟移除类
// 1.1先给小li绑定点击事件 隐式迭代
$(".tab_list li").click(function() {
// 链式编程
// 1.2 点击后给li添加current类 其余兄弟移除current类
$(this).addClass("current").siblings().removeClass("current");
// 2. 点击的同时，获得当前li的索引号
var index = $(this).index();
// console.log(index);
// 3. 让下部tab_con里面相应索引号的item显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
});
})
</script>
</body>
</html>
事件切换
hover([over],out)
- over:鼠标移到元素上要触发的函数（相当于mouseenter）
- out:鼠标移出元素要触发的函数（相当于mouseleave）
案例：简洁版滑动下拉菜单
<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="../lib/jquery-3.6.0.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);
// })
// 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>
这个案例有个小问题，就是动画一旦出发就会执行，形成动画队列
动画队列及其停止排队方法
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果队列执行。
停止排队：
stop();
- stop() 方法用于停止动画或效果
- stop() 写道动画或者效果的前面，相当于停止结束上一次的动画
举个栗子：给上面 事件切换的案例的效果前面添加stop()
$(".nav>li").hover(function(){
// stop() 方法必须写在动画或效果前面，如果写在后面则相当于该效果不执行
$(this).children("ul").stop().slideToggle(200);
});
淡入淡出效果
淡入效果语法规范
fadeIn([speed,[easing],[fn]])
- 参数都可以省略
- speed:三种预定速度之一的字符串（”slow“，”normal“，”fast“）或表示动画时长的毫秒数值（如：1000）
- easing:(Optional)用来指定切换效果，默认是”swing“，可用参数”linear“
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
淡出效果语法规范
fadeOut([speed,[easing],[fn]])
- 参数都可以省略
- speed:三种预定速度之一的字符串（”slow“，”normal“，”fast“）或表示动画时长的毫秒数值（如：1000）
- easing:(Optional)用来指定切换效果，默认是”swing“，可用参数”linear“
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
渐进方式调整到指定的不透明度
fadeTo([speed],opacity,[easing],[fn])
效果参数：
- opacity 透明度必须写，取值 0-1之间。
- speed:三种预定速度之一的字符串（”slow“，”normal“，”fast“）或表示动画时长的毫秒数值（如：1000）
- easing:(Optional)用来指定切换效果，默认是”swing“，可用参数”linear“
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
举个栗子
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 150px;
height: 300px;
background-color: pink;
display:none;
}
</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>
<button>修改透明度</button>
<div></div>
<script type="text/javascript">
$(function(){
$("button").eq(0).click(function(){
// 淡入效果
$("div").fadeIn(1000);
})
$("button").eq(1).click(function(){
// 淡出效果
$("div").fadeOut(1000);
})
$("button").eq(2).click(function(){
// 淡入淡出切换
$("div").fadeToggle(1000);
})
$("button").eq(3).click(function(){
// 修改透明度
$("div").fadeTo(1000,0.2);
})
});
</script>
</body>
</html>
淡入淡出及突出显示案例
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="../lib/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
// 当鼠标进入的时候，其他的li标签透明度：0.5
$(".wrap li").hover(function() {
// 别忘了加停止动画 stop()
$(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
$(this).siblings().stop().fadeTo(400, 1);
})
//当鼠标离开时，其他li 透明度改为1
})
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="../img/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../img/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../img/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../img/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../img/05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../img/06.jpg" alt="" /></a>
</li>
</ul>
</div>
</body>
</html>
自定义动画 animate
animate(params,[speed],[easing],[fn]);
- params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法 borderLeft。其余参数都可以省略。
- speed:三种预定速度之一的字符串（”slow“，”normal“，”fast“）或表示动画时长的毫秒数值（如：1000）
- easing:(Optional)用来指定切换效果，默认是”swing“，可用参数”linear“
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
举个栗子：
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("div").animate({
width:500,
left:500,
top:300,
opacity:0.4
},500);
})
})
</script>
王者荣耀手风琴效果
布局分析：
首先一个大的盒子包裹（class = "king"）,里面由ul包裹七个小li，每个小li里面由一个a标签包裹两个img标签，分别存放一个大图和一个小图，小图片用定位方式定位到大图片左上角，所有小图片浮动起来。正常情况下能看到小图片，看不到大图片，点击小图片会展开大图片，当前默认的能看到大图片，看不到小图片
案例分析：
- 鼠标经过某个小li 有两步操作：
- 当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入
- 其余兄弟小li 宽度变为69px，小图片淡入，大图片淡出
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴案例</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(../img/bg.png) 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>
<script src="../lib/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
$(".king li").mouseover(function() {
//当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入
$(this).animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 其余兄弟小li 宽度变为69px，小图片**淡入**，大图片**淡出**
$(this).siblings("li").animate({
width:69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="../img/m1.jpg" alt="" class="small">
<img src="../img/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/l1.jpg" alt="" class="small">
<img src="../img/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/c1.jpg" alt="" class="small">
<img src="../img/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/w1.jpg" alt="" class="small">
<img src="../img/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/z1.jpg" alt="" class="small">
<img src="../img/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/h1.jpg" alt="" class="small">
<img src="../img/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/t1.jpg" alt="" class="small">
<img src="../img/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>
jQuery 属性操作
设置或获取元素固有属性值
获取元素本身自带的属性，比如<a> 元素里面的href ，比如<input> 元素里面的type。
方法：prop("属性名")
举个栗子：
<script type="text/javascript">
$(function(){
// element.prop("属性名") 获取属性值
console.log($("a").prop("href"));
// 设置a标签中title属性为自定义
$("a").prop("title","所发放的方法");
// 当复选框状态改变时，获取当前状态
$("input").change(function(){
console.log($(this).prop("checked"));
})
})
</script>
设置或获取元素自定义属性值
方法：attr()
举个栗子：
// 获取自定义属性
console.log($("div").attr("index"));
// h5自定义属性
console.log($("div").attr("data-index"));
// 修改自定义属性：
$("div").attr("index","sdd");
数据缓存 data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷星，之前存放的数据都将被移除。
-
附加数据语法：
data("name","value") //向被选元素附加数据 -
获取数据语法
data("name") //向被选元素获取数据 -
读取HTML5自定义属性 data-index ，得到的是数字型
-
这个方法获取data-index h5自定义属性 不用写data- 而且返回的是数字型（不包括字符）
// 数据缓存 data() 里面的数据是存放在元素的内存里面 $("span").data("uname","shabi"); console.log($("span").data("uname")); console.log($("div").data("index"));
-
购物车模块-全选
案例分析：
- 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
- 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
- 把全选按钮状态赋值给3小复选框就可以了。
- 当我们每次点击小的复选框按钮，就来判断：
- 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
- checked 选择器 :checked 查找被选中的表单元素。
$(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 内容文本值
主要针对元素的内容还有表单的值的操作
普通元素内容html()
该方法相当于原生 innerHTML
html() //获取元素的内容，能够获得元素内的其他元素及内容
举个栗子：
<div>
<span>sdfa</span>
</div>
<input type="text" name="" id="" value="请输入内容" />
<script type="text/javascript">
// 获取设置元素内容
console.log($("div").html());
$("div").html("123");
console.log($("div").html());
</script>
/*
<span>sdfa</span>
123
*/
普通元素文本内容text()
相当于原生 innerText
text() //获取元素内容（忽略其他子元素）
test("文本内容") //修改元素文本内容
举个栗子：
//修改文本内容（忽略标签）
$("div").html("456");
//获取文本内容（忽略标签）
console.log($("div").text());//456
获取/修改表单中的值
//修改表单中的值
$("input").val("789");
//获取表单中的值
console.log($("input").val());//789
购物车模块-增减商品数量
案例分析：
- 核心思路:首先声明一个变量，当我们点击+号(increment)，就让这个值++，然后赋值给文本框。
- 注意1：只能增加本商品的数量，就是当前+号的兄弟文本框(itxt)的值
- 修改表单的值是val()方法
- 注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++。因此要获取表单的值。
- 减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。
// 3. 增减商品数量模块
/* 首先声明一个变量，当我们点击+号时（increment）,就让这个值++，然后赋值给文本框 */
$(".increment").click(function(){
// 得到当前兄弟文本框的值val
// console.log($(".itxt").val());
var n = $(this).siblings(".itxt").val();
// console.log(n);
n++;
$(this).siblings(".itxt").val(n);
})
// 减号 - 同上 把increment改为decrement，把n++改为n--，但要注意 n最小为1
$(".decrement").click(function(){
// 得到当前兄弟文本框的值val
// console.log($(".itxt").val());
var n = $(this).siblings(".itxt").val();
// console.log(n);
// if(n!=1){
// n--;
// }
if(n==1){
return false;
}
n--;
$(this).siblings(".itxt").val(n);
})
// 3. 增减商品数量模块
购物车模块-修改商品小计
案例分析：
- 核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计
- 注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum）
- 修改普通元素的内容是text() 方法
- 注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)
- parents(‘选择器’) 可以返回指定祖先元素
- 最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
- 用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件
- 用最新的表单内的值 乘以 单价即可 但是还是当前商品小计
// 2. 增减商品数量模块 3.计算小计模块
/* 首先声明一个变量，当我们点击+号时（increment）,就让这个值++，然后赋值给文本框 */
$(".increment").click(function() {
// 得到当前兄弟文本框的值val
// console.log($(".itxt").val());
var n = $(this).siblings(".itxt").val();
// console.log(n);
n++;
$(this).siblings(".itxt").val(n);
// 计算小计模块 根据文本框的值 乘以 当前商品的价格，就是商品总价（小计）
// var p = $(this).parent(".quantity-form").parent(".p-num").siblings(".p-price").html();
// 使用parents(),获得当前元素所有父辈，参数可以填指定父辈元素
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p);
p = (p.substr(1) * n).toFixed(2);
// console.log(p);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + p);
getSum();
})
// 减号 - 同上 把increment改为decrement，把n++改为n--，但要注意 n最小为1
$(".decrement").click(function() {
// 得到当前兄弟文本框的值val
// console.log($(".itxt").val());
var n = $(this).siblings(".itxt").val();
// console.log(n);
// if(n!=1){
// n--;
// }
if (n == 1) {
return false;
}
n--;
$(this).siblings(".itxt").val(n);
// 计算小计模块 根据文本框的值 乘以 当前商品的价格，就是商品总价（小计）
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p);
p = (p.substr(1) * n).toFixed(2);
// console.log(p);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + p);
getSum();
})
// 2. 增减商品数量模块 3.计算小计模块
//页面初始化调用计算总件数和总额函数
getSum();
//4、用户修改文本框的值 计算 小计模块 change事件
$(".itxt").change(function() {
// console.log($(this).val());
var n = $(this).val();
// 注意 当n小于1时，默认改为1
if (n < 1) {
n = 1;
};
$(this).val(n);
var p = $(this).parents(".p-num").siblings(".p-price").html();
p = (p.substr(1) * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + p);
getSum();
})
//4、用户修改文本框的值 计算 小计模块
jQuery 元素操作
主要是遍历、创建、添加、删除元素操作
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要用到遍历。
语法1、
$("div").each(function(index,domEle){
xxx;
})
- each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个。
- 里面的回调函数有两个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象
- 所以想要使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)
举个栗子：
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script type="text/javascript">
$(function(){
var sum = 0;
var colors = ["red","blue","yellow"]
$("div").css("color","red");
// 如果针对于同一类元素做不同操作，需要用到遍历元素(类似for，但是比for强大)
// 1. each()方法遍历元素
$("div").each(function(index,domEle){
// 回调函数第一个参数是索引号，可以自己指定索引号名称 i，index k都行
// 回调函数第二个参数是 dom元素对象，也是自己命名
// console.log(domEle);
$(domEle).css("color",colors[index]);
sum+=Number($(this).html());
})
console.log(sum);
})
</script>
</body>
方法二、
$.each($("div"),function(i,ele){
xxx;
})
- $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
- 里面有两个参数，都可以自定义名称，index是每个元素的索引号，ele是遍历内容
购物车模块-计算总计和总额
案例分析：
- 核心思路：把所有文本框里免的值相加就是总计数量，总额同理
- 文本框里面的值不同，如果想要相加需要用到each遍历。申明一个变量，相加即可
- 点击+号 -号，会改变总计和总额，如果用户修改了文本框里面的值，同样会改变总计和总额
- 因此可以分装一个函数求总计和总额的，以上两个操作调用这个函数即可
- 注意1：总计是文本框里的值，相加用val() 总额是普通元素的内容，用text()
- 注意2：普通元素里面的内容要去掉￥并且转换为数字型才能相加
// 计算总件数和总额
function getSum() {
var count = 0; //激素那总件数
var money = 0; //计算总价钱
console.log(1);
$(".itxt").each(function(i, ele) {
count += parseInt($(ele).val());
});
$(".p-sum").each(function(i, ele) {
var temp = $(ele).text().substr(1);
// console.log(temp);
// count += parseInt($(ele).val());
money += parseFloat($(ele).text().substr(1));
});
$(".amount-sum em").text(count);
$(".price-sum em").text("￥" + money.toFixed(2));
}
// 计算总件数和总额
创建元素
//动态创建li标签
$("<li></li>");
//可以搭配append()和prepend()
在元素内部添加
element.append("内容")
把内容放入匹配元素内部最后面，类似原生appendChild
element.prepend("内容")
把内容放到匹配元素内部最前面
举个栗子：
<body>
<ul>
<li>li.before</li>
</ul>
<div class="test">div.before</div>
<script type="text/javascript">
// 1.创建元素
var li = $("<li>li.after</li>");
// 2.添加元素
// 内部添加
// $("ul").append(li);//内部添加并且放到内容的最后面
$("ul").prepend(li);//内部添加并且放到内容的最前面
</script>
</body>
在元素外部添加
element.after("内容")
//把内容放入目标元素后面
element.before("内容")
//把内容放到目标元素前面
举个栗子：
<div class="test">div</div>
<script type="text/javascript">
// 3.元素外部添加元素
var div1 = $(".test").before("<div>div.before</div>")
var div2 = $(".test").after("<div>div.after</div>")
</script>
注意：
- 在元素内部添加元素，生成之后，他们是父子关系
- 在元素外部添加元素，生成之后，他们是兄弟关系
删除元素
element.remove() //删除匹配的元素本身
element.empty() //删除匹配的元素集合中所有子节点、内容
element.html("") //清空匹配的元素集合中所有子节点、内容，本质是修改内容为空
购物车模块-删除商品模块
案例分析：
- 核心思路：把商品remove()删除元素即可
- 有三个地方需要删除，1.商品后面的删除按钮 2.删除选中的商品 3.清空购物车
- 商品后面的删除按钮：一定是删除当前的商品，所以从$(this)出发
- 删除选中的商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
- 清理购物车： 则是把所有的商品全部删掉
- 注意，每次删除商品都要重新计算商品件数和总额(调用getSum();函数)
// 删除商品模块
$(".p-action").click(function() {
$(this).parents(".cart-item").remove();
// 每次删除商品都要重新计算总件数和总额
getSum();
})
$(".remove-batch").click(function(){
// 删除的是小的复选框选中的商品
$(".j-checkbox:checked").parents(".cart-item").remove();
// 每次删除商品都要重新计算总件数和总额
getSum();
})
$(".clear-all").click(function(){
$(".cart-item").remove();
// 每次删除商品都要重新计算总件数和总额
getSum();
})
// 删除商品模块
购物车模块-选中商品添加背景
案例分析：
- 核心思路：选中的商品添加背景，未选中移除背景
- 全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
- 小的复选框点击：如果是选中状态，则当前商品添加背景
- 这个背景可以通过类名修改，添加类和删除类
$(".checkall").change(function() {
console.log();
var index = $(this).prop("checked");
// 下面那个全选按钮也要绑定，
$(".j-checkbox, .checkall").prop("checked", index);
// 全选按钮选中则给商品添加背景色
if($(this).prop("checked")){
// 让所有商品添加类 check-cart-item 类名
$(".cart-item").addClass("check-cart-item");
}else{
// 否则移除类
$(".cart-item").removeClass("check-cart-item");
}
})
// 1.2. 通过小复选框控制全选按钮 如果小复选框选中的个数等于3，就把上下两个全选按钮选上，否则全选按钮不选
$(".j-checkbox").change(function() {
// if(被选中的小的复选框个数与所有小复选框个数相同){
// 全选按钮选中
// }else{
// 不选中全选按钮
// }
// 通过checked 选择器 :checked 查找被选中的表单元素
// console.log($(".j-checkbox:checked").length);
// $(".j-checkbox").length：所有小复选框个数
if($(this).prop("checked")){
// 让当前商品添加类 check-cart-item 类名
$(this).parents(".cart-item").addClass("check-cart-item");
}else{
// 否则移除类
$(this).parents(".cart-item").removeClass("check-cart-item");
}
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
})
jQuery 尺寸、位置操作
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>
注意：有了这套 API 我们将可以快速获取盒子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。
jQuery 位置操作
jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:
语法：
offset() //设置或获取元素偏移
- offset()方法设置或返回被选元素相对于文档的便宜坐标，跟父级没有关系
- 该方法有两个属性 left、top。
offset().top:用于获取元素到文档顶部的距离；offset().left:用于获取元素到文档左侧的距离 - 可以设置元素的偏移：offset({top:10,left:30}); 设置当前选定的元素的偏移，于父盒子无关（即使有定位关系）
举个栗子：
<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>
position()获取元素偏移
- position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
- 该方法有两个属性：left和top，用法和offset类似
- 该方法只能获取，不能设置
举个栗子：
<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()/scrollLeft() 设置或获取元素被卷去的头部和左侧
- scrollTop() 方法设置或返回被选元素被卷去的头部（页面滚动溢出部分）。
- 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
举个栗子：
<!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 事件
on 事件注册
单个事件注册：
element.事件(function(){
xxx
})
$("div").click(fuction(){
事件处理程序
})
其他事件和原生基本一致
比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
事件处理 on() 优势1
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：
element.on(events[selector],[fn])
- events：一个或多个用空格隔开的事件类型，如：click keydown
- selector：元素的子元素选择器
- fn：回调函数，即绑定在元素身上的侦听函数
举个栗子：
<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: 100px;
height: 100px;
background: #0099CC;
}
.current{
background:#87CEEB;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
$(function(){
// 给div绑定多个事件
// $("div").on({
// mouseenter:function(){
// $(this).css("background","skyblue");
// },
// click:function(){
// $(this).css("background","pink");
// },
// mouseleave:function(){
// $(this).css("background","#aaa");
// }
// });
// 如果多个事件是相同的，可以采取下面方式
$("div").on("mouseenter mouseleave",function(){
$(this).toggleClass("current");
}
})
</script>
</body>
</html>
on()方法优势2：
可以事件委派操作。事件委派的定义就是，把原来嫁给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$('ul').on('click','li',function(){
alert('hello world!');
})
//click 绑定在ul身上，但是触发的对象是ul里面的小li
在此之前，有bind() ,live() ，delegate() 等方法来处理事件绑定或者事件委派，目前最新版用 on 来代替他们
on()方法优势3：
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
$("div").on("click","p",function(){
alert("可以给动态生成元素绑定事件")
})
$("div").append($("<p>动态创建p标签</p>"));
举个栗子：
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以绑定1个或者多个事件处理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>
off 解绑事件
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;
语法：
off() 方法 可以移除通过 on() 方法 添加的事件处理程序
$("p").off() //解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click","li") //解绑事件委托
如果有的事件只想触发一次，用one() 来绑定事件
举个栗子：
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是一个P标签</p>
<script>
$(function() {
// 事件绑定
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解绑 off
// $("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");
// 2. one() 但是它只能触发事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>
trigger() 自动触发事件
有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;
trigger()
element.click() //第一种简写形式
element.trigger("type") //第二种自动触发模式
triggerHandler()
element.triggerHandler(type) //第三种自动触发模式
注意：
triggerHandler模式不会触发元素的默认性为（比如input标签没有光标在闪烁），这是和前面两种的区别
举个栗子：
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 绑定事件
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function() {
$(this).val("你好吗");
});
// 一个会获取焦点，一个不会
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>
jQuery 多库共存
实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。
jQuery解决方案
- 把里面的 $ 符号统一改为jQuery。比如 jQuery("div");
- jQuery 变量规定新的名称，$.noConflict() var xx = $.noConfict();
举个栗子：
<div></div>
<span></span>
<script type="text/javascript">
$(function(){
// 假设之前版本的方法和现在版本的 $ 方法名冲突，
function $(ele){
return document.querySelector(ele);
}
console.log($("div"));
//$.each();//老版本的$方法里没有这个方法（上面没有定义该方法），调用报错
// 解决方法一：使用jQuery 代替 $
jQuery.each();
// 解决方法二：让jQuery 释放对 $ 控制权，让用户自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
suibian.each();
}
图片懒加载
图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验，帮助减轻服务器负载
注意：
-
该插件必须写在所有图片的下面（现有图片才能懒加载）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> img { display: block; margin: 0 auto; margin-top: 100px; } </style> </head> <body> <img data-lazy-src="./pictures/冬裙.jpg"/> <img data-lazy-src="/pictures/呢大衣.jpg" /> <img data-lazy-src="./pictures/围巾.jpg"/> <img data-lazy-src="./pictures/女裤.jpg"/> <img data-lazy-src="./pictures/毛衣.jpg"/> <img data-lazy-src="./pictures/牛仔裤.jpg"/> <img data-lazy-src="./pictures/男毛衣.jpg"/> <img data-lazy-src="./pictures/皮带.jpg"/> <img data-lazy-src="./pictures/皮衣.jpg"/> <img data-lazy-src="./pictures/羽绒服.jpg"/> <script src="./lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="./lib/EasyLazyload.min.js" type="text/javascript" charset="utf-8"></script> <script> lazyLoadInit({ coverColor: "white", coverDiv: "<h1>test</h1>", offsetBottom: 0, offsetTopm: 0, showTime: 1100, onLoadBackEnd: function(i, e) { console.log("onLoadBackEnd:" + i); }, onLoadBackStart: function(i, e) { console.log("onLoadBackStart:" + i); } }); </script> </body> </html>
jQuery Ajax
Ajax 的全称是 Asynchronous Javascrip And XML（翻：异步 JavaScrip 和XML）
通俗的理解：在网页中利用XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax
Ajax作用：让我们轻松实现网页与服务器之间的数据交互
Ajax 典型应用场景
- 用户名检测：注册用户时，通过Ajax 的形式，动态 检测用户名是否被占用
- 搜索提示：当输入搜索关键字时，通过Ajax的形式，动态 加载搜索提示列表
- 数据分页显示：当点击页码值的时候，根据页码动态刷新表格的数据
- 数据的增删改查：数据的增删改查操作都要通过ajax实现数据交互
jQuery中的Ajax
浏览器中提供的XMLHttpRequest 用法比较复杂，jQuery 对 XMLHttpRequest 进行了封装，提供了一系列Ajax相关函数，极大地降低了Ajax的使用难度
jQuery中发起Ajax请求最常用的三个方法如下：
- $.get()
- $.post()
- $.ajax()
$.get()函数语法
jQuery中$.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端使用
语法：
$.get(url,[data],[callback]) //后两个参数可选
参数含义如下：
| 参数名 | 参数类型 | 是否必选 | 说明 |
|---|---|---|---|
| url | string | 是 | 要请求的资源地址 |
| data | object | 否 | 请求资源期间要携带的参数(会发送到服务器) |
| callback | function | 否 | 请求成功时的回调函数 |
$.get()发起不带参数的请求
使用$.get()函数发起不带参数的请求时，直接提供请求的URL地址和请求成功之后的回调函数即可，示例如下：
$.get('http://www.baidu.com',function(res)){
console.log(res) //这里res是服务器返回的数据
}
通过XHR过滤所有ajax请求
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btnGET">发起不带参数的GET请求</button>
</body>
<script type="text/javascript">
$(function(){
$('#btnGET').on('click',function(){
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
console.log(res);
})
})
})
</script>
</html>
$.get()发起带参数的请求
$.get('http://www.baidu.com',{id:1},function(res)){
console.log(res) //这里res是服务器返回的数据
}
$.post()函数语法
jQuery 中$.post() 函数的功能单一，专门用来发起post请求，从而向服务器提交数据
$.post(url,[data],[callback])
其中，三个参数代表含义如下：
| 参数名 | 参数类型 | 是否必选 | 说明 |
|---|---|---|---|
| url | string | 是 | 提交数据的地址 |
| data | object | 否 | 要提交的资源 |
| callback | function | 否 | 数据提交成功时的回调函数 |
$.post()向服务器提交数据
使用$post向服务器提交数据示例：
$.post('http://www.liulongbin.top:3006/api/addbook',//请求的URL地址
{
bookname:'水浒传',author:'施耐庵',publisher:'上海图书出版社'
},//提交数据
function(res){//回调函数
console.log(res)
}
)
举个栗子：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btnPOST">向服务器提交数据</button>
<script type="text/javascript">
$(function() {
$('#btnPOST').on('click',function(){
$.post('http://www.liulongbin.top:3006/api/addbook', //请求的URL地址
{
bookname: '水浒传q',
author: '施耐庵q',
publisher: '北京图书出版社'
}, //提交数据
function(res) { //回调函数
console.log(res)
}
)
})
})
</script>
</body>
</html>
$.ajax()函数的语法
相比于$.get() 和 $.post() 函数，jQuery 中提供的$.ajax()函数，是一个功能比较综合的函数，它允许我们对Ajax请求经行更详细的配置
语法如下：
$.ajax({
type:'', //请求方式：get/post 等
url:'',//请求的URL地址
data:{},//这次请求要携带的数据
success:function(res){//请求成功后的回调函数
}
})
$.ajax()函数发起GET请求
使用$.ajax()发起GET请求时，只需要将type属性的值设置为’GET‘ 即可：
$.ajax({
type:'GET', //请求方式：get/post 等
url:'http://www.liulongbin.top:3006/api/getbooks',//请求的URL地址
data:{id:1},//这次请求要携带的数据
success:function(res){//请求成功后的回调函数
console.log(res)
}
})
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btnPOST">使用ajax发起GET请求</button>
<script type="text/javascript">
$(function() {
$('#btnPOST').on('click', function() {
$.ajax({
type: 'GET', //请求方式：get/post 等
url: 'http://www.liulongbin.top:3006/api/getbooks', //请求的URL地址
data: {
//id: 1
}, //这次请求要携带的数据
success: function(res) { //请求成功后的回调函数
console.log(res)
}
})
})
})
</script>
</body>
</html>
$.ajax()函数发起POST请求
语法同上，举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btnPOST">使用ajax发起POST请求</button>
<script type="text/javascript">
$(function() {
$('#btnPOST').on('click', function() {
$.ajax({
type: 'POST', //请求方式：get/post 等
url: 'http://www.liulongbin.top:3006/api/addbook', //请求的URL地址
data: {
bookname:'水许传',
author:'施耐安',
publisher:'安徽大学出版社'
}, //这次请求要携带的数据
success: function(res) { //请求成功后的回调函数
console.log(res)
}
})
})
})
</script>
</body>
</html>
