jQuery
一、jQuery概述
1.1 JavaScript库
JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能。
二、jQuery的基本使用
2.1 jQuery 文件导入
如果报$未定义，试试将jQuery文件导入的绝对路径改为相对路径
<!DOCTYPE html>
<html>
<head>
<script src="/Study/lib/jquery-3.6.0.min.js"></script> //引入jQuery文件
</head>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<body>
<div></div>
<script>
$('div').hide(); //使用jQuery
</script>
</body>
</html>
2.2 jQuery的入口函数
$(function(){
··· // 此处是页面DOM加载完成的入口
})
<!DOCTYPE html>
<html>
<head>
<script src="/Study/lib/jquery-3.6.0.min.js"></script>
</head>
<script>
$(function(){
$('div').hide(); //jQuery入口函数（不用再考虑jq放置的位置）
})
</script>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<body>
<div></div>
</body>
</html>
2.3 DOM对象和jQuery对象
- DOM对象：用原生js获取过来的对象就是DOM对象
- jQuery对象：用jQuery方式获取过来的对象就是jQuery对象
- jQuery对象只能用jQuery方法，DOM对象只能用原生js方法
例：
<script>
// 1.DOM对象
let mydiv = document.querySelector('div');
let myspan = document.querySelector('span');
// 2.jQuery对象
$('div');
$('span');
</script>
2.4 DOM对象和jQuery对象的相互转换
原生 js 比 jQuery 更大。
2.4.1 DOM对象转换为jQuery对象：$(DOM对象)
2.4.2 jQuery对象转DOM对象（两种方式）
- $('div')[index] index指索引号
- $('div').get(index) index指索引号
2.4.3 例：
<!DOCTYPE html>
<html>
<head>
<script src="/Study/lib/jquery-3.6.0.min.js"></script> //导入jQuery库
</head>
<body>
<video src="/Study/video/wolf.mp4">狼与美女</video> //本地的视频
<script>
// 1.DOM转jQuery
// （1）直接获取，得到的就是 jQuery 对象
// $('video');
// （2）已经使用原生 js 获取过来DOM对象
let myvideo = document.querySelector('video'); //myvideo 是DOM对象
// $(myvideo).play(); jQuery中没有play这个方法 这里获取 myvideo 不用加单引号
// 2.jQuery 转 DOM
// myvideo.play();
// $('video')[0].play(); 0是index索引下标
// $('video').get(0).play();
</script>
</body>
</html>
三、jQuery选择器
3.1 jQuery 基础选择器
$("选择器") 选择器直接写css选择器即可，但要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID的元素 |
| 全选择器 | $("*") | 匹配所有的元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $("div") | 获取同一类标签的所有元素 |
| 并集选择器 | $("div,p,li") | 选取多个元素 |
| 交集选择器 | $("li.current") | 交集元素 |
3.2 jQuery层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $("ul > li") | 使用 > 号，获取亲儿子层级元素；注意：并不会获取孙子层级元素 |
| 后代选择器 | $("ul li") | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子层级等 |
3.3 隐式迭代（重要）
遍历内部DOM元素的过程就叫隐式迭代。
简单理解：给匹配到的所有元素 进行循环遍历，执行相应的方法，而不用我们再进行循环，方便我们调用。
例：
<!DOCTYPE html>
<html>
<head>
<script src="/Study/lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>鹿晗</div>
<div>邓伦</div>
<div>李钟硕</div>
<div>朴灿烈</div>
<ul>
<li>AAAAAAAAAA</li>
<li>BBBBBBBBBB</li>
<li>CCCCCCCCCC</li>
<li>DDDDDDDDDD</li>
</ul>
<script>
$(function(){ //入口函数
$("div").css("background-color","pink"); //将所有div元素的背景颜色改为pink
$("ul li").css("color","yellow"); //将ul 下的li元素字体颜色改为yellow
})
</script>
</body>
</html>
效果：
3.4 jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $("li:first") | 获取第一个li元素 |
| :last | $("li:last") | 获取最后一个li元素 |
| :eq(index) | $("li:eq(2)") | 获取到的li元素中，选择索引号为2的元素，索引号从0开始。 |
| :odd | $("li:odd") | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $("li:even") | 获取到的li元素中，选择索引号为偶数的元素 |
例：
<!DOCTYPE html>
<html>
<head>
<script src="/Study/lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul>
<li>AAAAAAAAAA</li>
<li>BBBBBBBBBB</li>
<li>CCCCCCCCCC</li>
<li>DDDDDDDDDD</li>
<li>EEEEEEEEEE</li>
</ul>
<ol>
<li>AAAAAAAAAA</li>
<li>BBBBBBBBBB</li>
<li>CCCCCCCCCC</li>
<li>DDDDDDDDDD</li>
<li>EEEEEEEEEE</li>
</ol>
<script>
$(function(){
$("ul li:first").css("color","red");
$("ul li:eq(3)").css("color","pink");
$("ol li:odd").css("color","skyblue");
$("ol li:even").css("color","deeppink");
})
</script>
</body>
</html>
效果：
3.5 jQuery筛选方法（重点）
| 语法 | 用法 | 说明 |
|---|---|---|
| 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").prevtAll() | 查找当前元素之前所有的同辈元素 |
| hasClass（class） | $('div').hasClass("protected") | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
| eq（index） | $("li").eq(2) | 相当于$("li:eq(2)")，index从0开始 |
3.6 实例：新浪下拉菜单
需求：鼠标停留时菜单出现，鼠标离开时菜单消失
<!DOCTYPE html>
<html>
<head>
<script src="/Study/lib/jquery-3.6.0.min.js"></script>
</head>
<style>
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
.nav{
display: flex;
}
a{
width: 200px;
text-align: center;
margin: 5px;
background-color: #eee;
position: relative;
}
.item{
display: none;
position: absolute;
}
.item li{
border: 1px solid #e4a616;
margin: 0;
padding: 0;
border-top: none;
line-height: 30px;
width: 50px;
height: 30px;
}
.item li:hover{
background-color: #faf1da;
color: #cc9107;
cursor: pointer;
}
</style>
<body>
<ul class="nav">
<li>
<a href="weibo">微博</a>
<ul class="item">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="weibo">微博</a>
<ul class="item">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="weibo">微博</a>
<ul class="item">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
$(function(){
$(".nav>li").mouseover(function(){ //鼠标停留时
// $(this) 选择当前元素，this不加引号
$(this).children("ul").show(); //显示
})
$(".nav>li").mouseleave(function(){ //鼠标离开时
$(this).children("ul").hide(); //隐藏
})
})
</script>
</body>
</html>
3.7 jQuery筛选方法实例
3.7.1 siblings（selector）筛选除了本身以外的所有其他兄弟元素
<body> <ul> <li>11111111111</li> <li>11111111111</li> <li class="item">2222222222</li> <li>11111111111</li> <li>11111111111</li> </ul> <ol> <li>11111111111</li> <li>11111111111</li> <li>11111111111</li> <li>11111111111</li> <li>11111111111</li> </ol> <script> $(function(){ $("ul .item").siblings("li").css("color","pink"); //引号不要忘记！！！！ }) </script></body>
效果：
3.7.2 eq（index）
<body> <ul> <li>11111111111</li> <li>11111111111</li> <li class="item">2222222222</li> <li>11111111111</li> <li>11111111111</li> </ul> <ol> <li>11111111111</li> <li>11111111111</li> <li>11111111111</li> <li>11111111111</li> <li>11111111111</li> </ol> <script> $(function(){ $("ol li").eq(2).css("color","pink"); }) </script></body>
效果：
3.8 排他思想
- 当点击某一个按钮时，当前按钮改变背景颜色，其余按钮保持不变
<!DOCTYPE html><html> <head> <script src="/Study/lib/jquery-3.6.0.min.js"></script> </head> <body> <button>点击</button> <button>点击</button> <button>点击</button> <button>点击</button> <button>点击</button> <button>点击</button> <button>点击</button> </body> <script> $(function(){ // 隐式迭代，给每个button添加点击事件 $("button").click(function(){ // this ,将当前元素背景颜色改为粉色 $(this).css("background","pink"); // 将当前元素的其他兄弟元素背景颜色设置为无 $(this).siblings("button").css("background",""); }) }) </script></html>
3.9 链式编程
使用链式编程一定要注意是给哪个对象变换样式
<!DOCTYPE html><html> <head> <script src="/Study/lib/jquery-3.6.0.min.js"></script> </head> <body> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> <button>快速</button> </body> <script> $(function(){ // 1.隐式迭代，给每个按钮都绑定点击事件 $("button").click(function(){ // 2.让当前元素的颜色变为红色 // $(this).css("color","red"); // 3.让其余兄弟的颜色不变 // $(this).siblings("button").css("color",""); // 链式编程：（将2.3两步合并起来） $(this).css("color","red").siblings("button").css("color",""); }) }) </script></html>
四、jQuery样式操作
4.1 操作css方法
jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。
- 参数只写属性名，则是返回属性值
- 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不加引号和单位。
$(this).css("color","red");$("div").css("height",300);
- 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号
$(this).css({width:300px,height:300px,backgroundColor:"red" //驼峰命名})
4.2 设置类样式方法
作用等同于以前的classList，可以操作类样式，注意：操作类里面的参数不要加点
- 添加类
$(this).addClass("类名");
- 移除类
$(this).removeClass("类名");
- 切换类
$(this).toggleClass("类名");
例：
<!DOCTYPE html><html> <head> <script src="/Study/lib/jquery-3.6.0.min.js"></script> </head> <style> div{ height: 200px; /* 300 必须带单位 */ width: 200px; background-color: pink; } .current{ /* 单独写一个类 */ height: 100px; width: 100px; background-color: powderblue; } </style> <body> <div class="current"></div> </body> <script> $("div").click(function(){ // 1.添加类 // $(this).addClass("current"); // 2.删除类 // $(this).removeClass("current"); // 3.切换类 $(this).toggleClass("current"); }) </script></html>
4.3 tab栏切换案例
<!DOCTYPE html><html> <head> <script src="/Study/lib/jquery-3.6.0.min.js"></script> </head> <style> * { /* 设置边框外部和所有元素的距离为0 */ margin: 0; padding: 0; } li { list-style-type:none; /* 列表样式：无 */ } .tab { width: 1000px; margin: 100px auto; } .tab_list { height: 40px; border: 1px solid gray; } .tab_list li { float: left; /* 内容向左浮动 */ height: 40px; line-height: 40px; /* 行高 */ padding: 0 40px; /* 上下 左右*/ text-align: center; cursor: pointer; /* 将鼠标的箭头样式改为手指样式*/ } .tab_list .current { background-color: hotpink; color: deepskyblue; } .item { display: none; /* 内容不显示 */ padding: 20px 0 0 20px; } </style> <body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价</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">商品评价模块内容</div> <div class="item">手机社区模块内容</div> </div> </div> </body> <script> $(function(){ // 1.点击上部的li，当前的li添加current类，其余兄弟移除类 $(".tab_list li").click(function(){ $(this).addClass("current").siblings().removeClass("current"); // 2.点击的同时，得到当前li的索引号 var index = $(this).index(); console.log(index); // 3.让下部里面相对应索引号的item显示,其余的item隐藏 $(".tab_con .item").eq(index).show().siblings().hide(); }); }) </script></html>
效果：
4.4 jQuery类操作和ClassName的区别
- 原生JS中ClassName会覆盖元素原先里面的类名
- jQuery里面类操作只是对指定类进行操作，不影响原先的类名
五、jQuery效果
*** 资料网站：jQuery API 中文手册
5.1 显示、隐藏和切换的效果
5.1.1 显示、隐藏和切换语法规范
show ([speed],[easing],[fn]) 显示
hide([speed],[easing],[fn]) 隐藏
toggle([speed],[easing],[fn]) 切换
5.1.2 显示、隐藏和切换的参数
- 参数都可以省略，无动画直接显示。
- speed：表示动画时长的毫秒数（如：1000）（“slow” ，“normal”（默认值），“fast”）。
- easing：（Optional）用来指定切换效果，默认是“swing”（摇摆的，曲线的），可用参数“linear”（直的）。
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
5.1.3 例：
<!DOCTYPE html><html lang="en"> <head> <script src="/Study/lib/jquery-3.6.0.min.js"></script> </head> <style> button{ width: 100px; height: 100px; font-size: 40px; background-color: aqua; } div{ width: 400px; height: 440px; background-color: pink; } </style><body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div></body><script> $(function(){ $("button").eq(0).click(function(){ $("div").show(1000,"linear") }); $("button").eq(1).click(function(){ $("div").hide(1000,"linear") }); $("button").eq(2).click(function(){ $("div").toggle() }) })</script></html>
5.2 滑动效果
<!DOCTYPE html><html lang="en"> <head> <script src="/Study/lib/jquery-3.6.0.min.js"></script> </head> <style> button{ width: 100px; height: 100px; font-size: 40px; background-color: aqua; } div{ width: 400px; height: 440px; background-color: pink; } </style><body> <button>下滑</button> <button>上滑</button> <button>切换</button> <div></div></body><script> $(function(){ $("button").eq(0).mouseover(function(){ $("div").slideDown() }); $("button").eq(1).mouseover(function(){ $("div").slideUp() }); $("button").eq(2).mouseover(function(){ $("div").slideToggle() }) })</script></html>
5.3 事件切换
例：新浪下拉菜单改进版
<!DOCTYPE html><html> <head> <script src="/Study/lib/jquery-3.6.0.min.js"></script> </head> <style> ul,li{ list-style: none; margin: 0; padding: 0; } .nav{ display: flex; } a{ width: 200px; text-align: center; margin: 5px; background-color: #eee; position: relative; } .item{ display: none; position: absolute; } .item li{ border: 1px solid #e4a616; margin: 0; padding: 0; border-top: none; line-height: 30px; width: 50px; height: 30px; } .item li:hover{ background-color: #faf1da; color: #cc9107; cursor: pointer; } </style> <body> <ul class="nav"> <li> <a href="weibo">微博</a> <ul class="item"> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> <li> <a href="weibo">微博</a> <ul class="item"> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> <li> <a href="weibo">微博</a> <ul class="item"> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> </ul> <script> // $(function(){ // $(".nav>li").mouseover(function(){ //鼠标停留时 // // $(this) 选择当前元素，this不加引号 // $(this).children("ul").slideDown(); //显示 // }) // $(".nav>li").mouseleave(function(){ //鼠标离开时 // $(this).children("ul").slideUp(); //隐藏 // }) // }) $(function(){ $(".nav>li").hover(function(){ $(this).children("ul").slideToggle() //事件切换 }) }) </script> </body></html>
5.4 停止动画排队
stop()
- stop() 方法用于停止动画或效果。
- 注意：stop() 写到动画或者效果的前面，相当于停止上一次动画。
例：
$(function(){ $(".nav>li").hover(function(){ $(this).children("ul").stop().slideToggle() }) })
5.5 自定义动画animate
animate (params，[speed],[easing],[fn])
- params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法：如borderLeft。其余参数都可以省略。
- speed：表示动画时长的毫秒数（如：1000）（“slow” ，“normal”（默认值），“fast”）
- easing：（Optional）用来指定切换效果，默认是“swing”（摇摆的，曲线的），可用参数“linear”（直的）
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
例：
<!DOCTYPE html><html> <head> <script src="/Study/lib/jquery-3.6.0.min.js"></script> </head> <style> div{ position: absolute; width: 100px; height: 100px; background-color: aqua; } </style> <body> <button>点击变换形态</button> <div></div> </body> <script> $(function(){ $("button").click(function(){ $("div").animate({ left:300, opacity: .4 , //透明度变为原来的40% width:200, height:200, top:300 }) }) }) </script></html>
5.6 手风琴案例
知识点：
- 鼠标经过：mouseenter
- 淡入：fadeIn
- 淡出：fadeOut
- overflow：如果元素中的内容超出了给定的宽度和高度，overflow属性可以确定是否显示滚动条等行为。
<!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(images/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="/Study/lib/jquery-3.6.0.min.js"></script> <div class="king"> <ul> <li class="current"> <a href="#"> <img src="images/m1.jpg" alt="" class="small"> <img src="images/m.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/l1.jpg" alt="" class="small"> <img src="images/l.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/c1.jpg" alt="" class="small"> <img src="images/c.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/w1.jpg" alt="" class="small"> <img src="images/w.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/z1.jpg" alt="" class="small"> <img src="images/z.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/h1.jpg" alt="" class="small"> <img src="images/h.png" alt="" class="big"> </a> </li> <li> <a href="#"> <img src="images/t1.jpg" alt="" class="small"> <img src="images/t.png" alt="" class="big"> </a> </li> </ul> </div></body><script> // 鼠标经过某个小li 有两步 $(function(){ // 1.当前小li 宽度变为224px，同时里面的小图片淡出fadeOut()，大图片淡入fadeIn() $(".king li").mouseenter(function(){ //mouseenter 鼠标经过 $(this).stop().animate({ width:224, }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn(); // 2.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出 $(this).siblings("li").stop().animate({ width:69 }).find (".small").stop().fadeIn().siblings(".big").stop().fadeOut() }) }) </script></html>
六、jQuery属性操作
6.1 设置或获取元素固有属性值 prop（）
- 获取属性语法
prop（“属性”）
- 设置属性语法
prop（“属性”，“属性值”）
6.2 设置或获取自定义属性值 attr（）
- 获取属性语法
attr（“属性”）
- 设置属性语法
attr（“属性”，“属性值”）
6.3 数据缓存 data（）
- 附加数据语法
data（“name”，“value”） //向被选元素附加数据
- 获取数据语法
data（“name”） // 向被选元素获取数据
6.4 例：
<!DOCTYPE html><html> <head> <script src="/Study/lib/jquery-3.6.0.min.js"></script> </head> <body> <a href="http://www.itcast.cn" title="都挺好">都挺好</a> <input type="checkbox" name="" id="" checked> <div index="1" data-index="2">我是div</div> <span>123</span> <script> $(function() { //1. element.prop("属性名") 获取元素固有的属性值 console.log($("a").prop("href")); $("a").prop("title", "我们都挺好"); $("input").change(function() { console.log($(this).prop("checked")); }); // console.log($("div").prop("index")); // 2. 元素的自定义属性 我们通过 attr() console.log($("div").attr("index")); $("div").attr("index", 4); console.log($("div").attr("data-index")); // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面 $("span").data("uname", "andy"); console.log($("span").data("uname")); // 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型 console.log($("div").data("index")); }) </script> </body></html>
七、jQuery内容文本值
- 获取设置元素内容（连带着标签一起获取） html（）
- 获取设置元素文本内容 text（）
- 获取设置表单值 val（）
八、jQuery元素操作
8.1 遍历元素
语法1：
遍历dom对象用这种语法最合适
$("div").each(function(index,domEle){ xxx;})
- each() 方法遍历匹配的每一个元素。主要用DOM处理。each每一个。
- 里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jQuery对象。
- 所以想要使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(domEle)
例：改变三个div元素的颜色（不同的颜色）
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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>each方法的学习</title></head><body> <div>1111</div> <div>2222</div> <div>3333</div></body><script> // each()方法 var arr = ["red","blue","pink"]; $(function(){ $("div").each(function(index,domEle){ console.log(index); //打印下标 console.log(domEle); //打印元素（dom元素） $(domEle).css("color",arr[index]); //将3个div改变颜色 }) }) </script></html>
例：
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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>each方法的学习</title></head><body> <div>1111</div> <div>2222</div> <div>3333</div></body><script> // each()方法 var arr = ["red","blue","pink"]; var sum = 0; $(function(){ $("div").each(function(index,domEle){ console.log(index); //打印下标 console.log(domEle); //打印元素（dom元素） $(domEle).css("color",arr[index]); //将3个div改变颜色 sum += parseInt($(domEle).text()); //求出三个元素相加的和，获取domEle元素的文本，转为数值类型 }) console.log(sum); }) </script></html>
语法2：
能遍历数组，也能遍历对象
$.each(object,function(index,element){ xxx;})
例：
$.each(arr,function(index,element){ console.log(index); console.log(element); }) })
.toFixed(2) 保留两位小数
8.2 创建元素
语法：
$("
"); 动态地创建了一个li标签
创建之后的元素并不会在页面中显示，所有我们需要将它添加到页面。
8.3 添加元素
8.3.1 内部添加（在某元素的里面添加）
语法：
element.append("内容")
内部添加，放到原来的元素的最后面
例：动态创建li标签，然后将标签放到元素最后面
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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>测试练习</title></head><body> <ul> <li>我是原先的li标签</li> </ul> </body> <script> $(function(){ //内部添加 var li = $("<li>我是后来动态创建的li</li>"); $("ul").append(li); })</script></html>
语法：
element.prepend("内容")
例：动态创建li标签，然后将创建的元素添加到元素的最前面
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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>测试练习</title></head><body> <ul> <li>我是原先的li标签</li> </ul> </body><script> $(function(){ //内部添加 var li = $("<li>后创建的li</li>"); $("ul").prepend(li); })</script></html>
8.3.2 外部添加
语法：
element.after("内容"); 把内容放到目标元素偶后面
element.before("内容"); 把内容放入目标元素前面
例1：element.after（）
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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>测试练习</title></head><body> <ul> <li>我是原先的li标签</li> <li>我是原先的li标签</li> <li>我是原先的li标签</li> </ul> <div> 这是一个在body中创建的div </div> </body><script> $(function(){ //外部添加 var newdiv = $("<div>这是一个动态创建的div标签</div>"); $("div").after(newdiv); })</script></html>
例2：element.before()
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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>测试练习</title></head><body> <ul> <li>我是原先的li标签</li> <li>我是原先的li标签</li> <li>我是原先的li标签</li> </ul> <div> 这是一个在body中创建的div </div> </body><script> $(function(){ var newdiv = $("<div>后创建的div</div>"); $("div").before(newdiv); })</script></html>
8.3.3 内部添加和外部添加的注意事项
- 内部添加元素，生成之后，他们是父子关系。比如在ul里面添加li
- 外部添加元素，生成之后，他们是兄弟关系。比如在div前面或后面添加另一个div元素
8.4 删除元素
语法：
element.remove()
element.empty()
element.html("")
例：
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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>测试练习</title></head><body> <ul> <li>我是原先的li标签</li> <li>我是原先的li标签</li> <li>我是原先的li标签</li> </ul> <div> 这是一个在body中创建的div </div> </body><script> $(function(){ var newdiv = $("<div>后创建的div</div>"); $("div").before(newdiv); // 删除结点 // $("ul").remove(); //删除整个ul元素 // $("ul").empty(); //删除ul元素的子节点，ul标签本身被保留 $("ul").html(""); //删除ul元素的子节点，ul标签本身被保留 })</script></html>
九、jQuery尺寸、位置操作
9.1 jQuery 尺寸
| 语法 | 用法 |
|---|---|
| width() /height () | 取得匹配元素宽度和高度值 只算width /height |
| innerWidth（）/innerHeight（） | 取得匹配元素宽度和高度值 包含padding |
| outerWidth（）/outerHeight（） | 取得匹配元素宽度和高度 包含padding、border |
| outerWidth（true）/outerHeight（true） | 取得匹配元素宽度和高度 包含padding、border、margin |
注：
- 以上参数为空时，则获取的是相应的值，返回的是数字型。
- 如果参数为数字，则是修改相应值。
- 参数可以不写单位。
例：
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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></head><body> <div> </div></body><style> div{ height: 200px; width: 200px; border: 10px solid skyblue; margin: 20px; padding: 25px; background-color: pink; }</style><script> $(function(){ $("div").height(); console.log("width()"+"\t"+$("div").width()) //只包含height 200 console.log("innerWidth()"+"\t"+$("div").innerWidth()); //包含padding 25+200+25=250 console.log("outerHeight()"+"\t"+$("div").outerHeight()); //包含padding和border 25+10+200+10+25=270 console.log("outerHeight(true)"+"\t"+$("div").outerHeight(true)); //包含padding、border、margin 10+20+25+200+25+20+10=310 })</script></html>
9.2jQuery位置
位置主要有三个：offset() 、position() 、scrollTop()/scrollLeft()
9.2.1 offset() 设置或获取元素偏移
- offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。(相对于文档就是相对于网页)
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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></head><style> .father{ height: 300px; width: 300px; background: skyblue; margin: 100px; } .son{ height: 100px; width: 100px; background:pink; }</style><body> <div class="father"> <div class="son"> </div> </div></body><script> $(function(){ // 打印.son距离top和left的位置 console.log($(".son").offset()); // 设置.son距离top和left的位置 $(".son").offset({ top:200, left:200 }) }) </script></html>
// 打印.son距离top和left的位置
console.log($(".son").offset());
// 设置.son距离top和left的位置
$(".son").offset({
top:200,
left:200
})
9.2.2 position() 该方法只能获取不能设置
- 获取距离带有定位父级位置（偏移），如果没有定位，则以文档为主。
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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></head><style> .father{ height: 300px; width: 300px; background: skyblue; margin: 100px; position: relative; } .son{ height: 100px; width: 100px; background:pink; position: absolute; top: 20px; left: 20px; }</style><body> <div class="father"> <div class="son"> </div> </div></body><script> $(function(){// 一、offset（） // // 打印.son距离top和left的位置 // console.log($(".son").offset()); // // 设置.son距离top和left的位置 // $(".son").offset({ // top:200, // left:200 // })// 二、position（） console.log($(".son").position()) }) </script></html>
9.2.3 scroll()
scrollTop() 被卷去的头部
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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></head><style> .bigdiv{ height: 1000px; width: 300px; background-color: powderblue; margin-left: 300px; margin-top: 300px; } .return{ position: fixed; height: 50px; width: 50px; background-color:pink; bottom: 50px; right: 50px; display: none; }</style><body> <div class="bigdiv"></div> <div class="return">点击回到顶部</div></body><script>/* 思路：当整个div的顶部触及网页的顶部时，（回到顶部）出现，当div上移时，（回到顶部）消失*/ $(function(){// 1. 用offset() 获取.bigdiv距离网页顶端的长度 var height = $(".bigdiv").offset().top; //.top 不是方法，不要加括号！！！！// 2. 元素滚动 $(window).scroll(function () {// 3. 当元素滚动，到达网页顶端时，（回到顶部）出现 if($(document).scrollTop() >= height){ $(".return").show(); }else { $(".return").hide(); } });// 4. 当点击（回到顶部）时，页面距离网页top为0 【没有动画效果，直接跳转至顶部】 // $(".return").click(function(){ // $(document).scrollTop(0); // }) // 带有动画的滚动到页面顶部 $(".return").click(function(){ $("body,html").stop().animate({ scrollTop:0 }) }) }) </script></html>
注：animate 前面一定是跟元素，只有元素才能做动画
十、jQuery事件
10.1 事件处理 on() 绑定事件
on() 方法优势1：
- on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法：
element.on(events,[selector],fn)
- events：一个或多个用空格分隔的事件类型，如“click“ 或 ”keydown“。
- selector：元素的子元素选择器。
- fn：回调函数 绑定在元素身上的侦听函数。
例：
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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>on事件</title></head><style> div{ height: 300px; width: 300px; margin: 200px; background-color: powderblue; }</style><body> <div></div></body><script>// 一、学习on事件之前，在同一个元素上面绑定多个事件（每个事件都要单独写） $(function(){ // // 1. 点击背景颜色变为pink // $("div").click(function() { // $(this).css("background-color","pink") // }) // // 2.鼠标经过，背景颜色变为yellow // $("div").mouseover(function(){ // $(this).css("background-color","yellow") // }) // // 3.鼠标离开，背景颜色变为green // $("div").mouseleave(function(){ // $(this).css("background-color","green") // })// 二、学习on事件后，一个元素可以绑定多个事件 // 点击背景颜色变为pink；鼠标经过，背景颜色变为yellow；鼠标离开，背景颜色变为green $("div").on({ // 将函数写成对象的模式 click:function(){ $(this).css("background-color","pink") }, mouseover:function(){ $(this).css("background-color","yellow") }, mouseleave:function(){ $(this).css("background-color","black") } }) })</script></html>
on() 方法优势2：
委派事件
事件委派的定义：把原来加给子元素上的事件绑定在父元素身上，就是把事件委派给父元素。
语法：
$("ul").on("click","li",function(){
alert("hello world");
})
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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>on事件</title></head><style> div{ height: 300px; width: 300px; margin: 200px; background-color: powderblue; }</style><body> <div></div> <ul> <li>aaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbb</li> <li>cccccccccccccc</li> <li>dddddddddddddd</li> <li>eeeeeeeeeeeeee</li> </ul></body><script> $(function(){// click事件绑定在ul上，但触发的对象是ul里面的li标签 $("ul").on("click","li",function(){ alert(11) }) })</script></html>
on() 方法优势3：
动态加上一个元素之后(先绑定click事件再添加元素不行，先添加元素再绑定事件可以)
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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>on事件</title></head><style> div{ height: 300px; width: 300px; margin: 200px; background-color: powderblue; }</style><body> <div></div> <ul> <li>aaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbb</li> <li>cccccccccccccc</li> <li>dddddddddddddd</li> <li>eeeeeeeeeeeeee</li> </ul> <ol></ol></body><script> $(function(){// 动态加上一个元素之后(先绑定click事件再添加元素不行，先添加元素再绑定事件可以) let li = $("<li>后来加入的li标签</li>"); $("ol").on("click","li",function(){ alert(11) }) $("ol").append(li); })</script></html>
10.2 事件解绑
off（）
例：
$（"div"）.off（） 解绑div的所有事件
$("div").off("click") 解绑div身上的click事件
$("ul").off("click","li") 解绑ul的事件委托
10.3 事件只触发一次
one() 事件触发一次之后就不会再触发了
例：
// 委托事件，点击触发一次弹窗<script> $(function (){ $("ol").one("click","li",function(){ alert(111); }) }) </script>
10.4 自动触发事件
语法：(写自动触发事件时，前面要加上一个具体事件，具体如下例子)
元素.click();
// $("div").click();
元素.trigger("事件");
// $("div").trigger("click");元素.triggerHandler("事件");
// $("div").triggerHandler("click");
例：自动触发事件的三种方式
<!DOCTYPE html><html lang="en"><head> <script src="../lib/jquery-3.6.0.min.js"></script> <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></head><style> div{ height: 100px; width: 100px; background-color: pink; }</style><body> <div></div> <input type="text"></body><script> // 自动触发 $(function(){ $("div").on("click",function(){ alert("弹出弹出了！！"); }) // 1. 元素.click(); // $("div").click(); // 2. 元素.trigger("事件"); // $("div").trigger("click"); // 3. 元素.triggerHandler("事件"); // $("div").triggerHandler("click"); $("input").on("click",function(){ $(this).val("请输入："); }) $(input).triggerHandler("foucus"); }) </script></html>
十一、jQuery其他用法
11.1 jQuery对象拷贝
语法：
$.extends([deep],target,object1,[objectN])
- deep：如果设为true为深拷贝，false为浅拷贝
- target：要拷贝的目标对象
- object1：待拷贝到第一个对象的对象
- objectN：待拷贝到第N个对象的对象
- 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
浅拷贝会直接覆盖原先的值
- 深拷贝，前面加true，完全克隆（拷贝的是对象，而不是地址），修改目标对象不会影响被拷贝对象
深拷贝不会覆盖原先的值，会把拷贝的值加到被拷贝的对象中
11.2 jQuery多库共存
说明：jQuery使用$作为标识符，如果我们自己也定义了一个$符号作为方法，那么他就会和我们原本的$相冲突。
解决方案：
- 把我们原本使用的$符号改写为jQuery。比如：jQuery（“div”）
- jQuery变量规定新的名称：$.noConflict()
var 自己定义新的名字 = $.noConflict();
十二、jQuery插件
- jQuery功能比较有限，想要更复杂的特效效果，可以借助jQuery插件完成。
注：这些插件也是依赖于jQuery来完成的，所以必须先引入jQuery文件，因此也称为jQuery插件。
12.1 jQuery插件常用的网址：
- **jQuery之家 http://www.htmleaf.com/ ** 【推荐使用，开源免费】
- jQuery插件库 https://www.jq22.com/jq1-jq3
12.2 jQuery插件使用步骤：
- 引入相关文件。（jQuery文件和插件文件）
- 复制相关HTML、CSS、JS（调用插件）。
12.3 jQuery插件演示
-
瀑布流
-
图片懒加载（图片使用延迟加载可提高网页性能，减轻服务器负担）。当我们划到可视区域时，再显示图片。
我们使用jQuery插件库EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素（图片）最后面。
图片懒加载：
- 将图片 src 替换为 data-lazy-src。 Ctrl+H 查找替换，将<img src 替换为 <img data-lazy-src
<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>
- coverColor：图片即将显示时覆盖层的颜色
- coverDiv：图片即将显示时覆盖层可显示的土自定义组件
- offsetBottom：图片距离屏幕底部出现时间点的距离差值（注解：延迟加载图片会在图片顶部接触屏幕底部时出现，如果想要让图片顶部距离屏幕底部有一定距离时出现，请设置此值）
- offsetTopm：图片距离屏幕底部出现时间点的距离差值（注解：同上，距离顶部）
- onLoadBackEnd：图片已经完全出现时的回调函数，参数为（index，event）加载的图片下标，以及dom对象（dom对象为jquerydom或zeptodom对象）
- onLoadBackStart：图片已经下载完成，即将开始显示时的回调函数（参数同上）
EasyLazyload.js 优点
- EasyLazyload.js 是真延迟加载 而且不会对样式有任何影响。
- 队列式加载，不会影响页面效率。
- 不需要设置任何宽高，简单易用
浙公网安备 33010602011771号