1. jQuery 概述
1.1 JavaScript 库
仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解：就是一个JS文件，里面对我们原生JS代码进行了封装，存放到里面。这个我们可以快速高效的使用这些封装好的功能了。
比如jQuery，就是为了快速方便地操作DOM，里面基本都是函数（方法）。
常见的JavaScript库
jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto。这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的，我们主要学习的是 jQuery 。
1.2 jQuery 的概念
jQuery 是一个快速、简介的 JavaScript 库，其设计的宗旨是 “write less, do more”，即提倡写更少的代码，做更多的事情。
j 就是 JavaScript，Query 查询，jQuery就是查询JS，把JS中的DOM操作做了封装，我们可以快速地查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。学习jQuery的本质就是学习调用这些函数（方法）。
优点
- 轻量级。核心文件才几十kb，不会影响页面加载速度。
- 跨浏览器兼容。基本兼容了现在主流的浏览器。
- 链式编程、隐式迭代。
- 对事件、样式、动画支持，大大简化了DOM操作。
- 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
- 免费、开源。
2. jQuery的基本使用
2.1 jQuery 的下载
官网地址：https://jquery.com/
版本：
- 1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
- 2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
- 3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
各个版本的下载：https://code.jquery.com/
2.2 jQuery 的使用步骤
- 引入jQuery文件。
- 使用即可。
2.3 jQuery 的入口函数
// 1. 等着页面DOM加载完毕再去执行js 代码
$(document).ready(function() {
$('div').hide();
})
// 2. 等着页面DOM加载完毕再去执行js 代码
$(function() {
$('div').hide();
})
- 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
- 相当于原生JS中的DOMContentLoaded。
- 不同于原生JS中的load事件是等页面文档、外部的JS文件、CSS文件、图片加载完毕才执行内部代码。
2.4 jQuery 的顶级对象 $
$ 是jQuery的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $。
2.5 jQuery对象和DOM对象
- 用原生JS获取来的对象就是DOM对象。
- jQuery方法获取的元素就是jQuery对象。
- jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）。
<body>
<div></div>
<span></span>
<script>
// 1. DOM 对象： 用原生js获取过来的对象就是DOM对象
var myDiv = document.querySelector('div'); // myDiv 是DOM对象
var mySpan = document.querySelector('span'); // mySpan 是DOM对象
console.dir(myDiv);
// 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
$('div'); // $('div')是一个jQuery 对象
$('span'); // $('span')是一个jQuery 对象
console.dir($('div'));
// 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
// myDiv.style.display = 'none';
// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
// $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
</script>
</body>
DOM对象与jQuery对象之间是可以相互转换的。因为原生JS比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
- DOM对象转换未jQuery对象：
$(DOM对象)，例如：$("div")。 - jQuery对象转换为DOM对象（两种方式），例如：
$("div")[index]，$("div").get(index)，其中index是索引号。
<body>
<video src="mov.mp4" muted></video>
<script>
// 1. DOM对象转换为 jQuery对象
// (1) 我们直接获取视频，得到就是jQuery对象
// $('video');
// (2) 我们已经使用原生js 获取过来 DOM对象
var myvideo = document.querySelector('video');
// $(myvideo).play(); jquery里面没有play 这个方法
// 2. jQuery对象转换为DOM对象
// myvideo.play();
$('video')[0].play()
$('video').get(0).play()
</script>
</body>
jQuery常用API
1. jQuery 选择器
1.1 jQuery 基础选择器
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号。
1.2 jQuery 层级选择器
1.3 隐式迭代（重要）
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做<font color=“red">隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循坏，简化我们的操作，方便我们调用。
<body>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 1. 获取四个div元素
console.log($("div"));
// 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
$("div").css("background", "pink");
// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul li").css("color", "red");
</script>
</body>
1.4 jQuery 筛选选择器
1.5 jQuery 筛选方法（重点）
- parent()返回的是最近一级的父级元素。
- parents()返回的是指定祖先元素。
1.6 jQuery里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
});
})
</script>
</body>
淘宝服饰精品案例分析
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>精品服饰</title>
<style>
* {
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(images/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(images/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function () {
$("#left li").mouseover(function () {
var index = $(this).index();
$("#content div").eq(index).show();
$("#content div").eq(index).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="images/女靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"
><img src="images/雪地靴.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"
><img src="images/呢大衣.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"
><img src="images/羽绒服.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src="images/牛仔裤.jpg" width="200" height="250"
/></a>
</div>
</div>
</div>
</body>
</html>
1.7 链式编程
链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
<body>
<button>快速</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", "");
});
})
</script>
</body>
2. jQuery样式操作
2.1 操作CSS方法
- 如果是复合属性则必须采取驼峰命名法。
- 如果值不是数字，则需要加引号。
<body>
<div></div>
<script>
// 操作样式之css方法
$(function() {
console.log($("div").css("width"));
// $("div").css("width", "300px");
// $("div").css("width", 300);
// $("div").css(height, "300px"); 属性名一定要加引号
$("div").css({
width: 400,
height: 400,
backgroundColor: "red"
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})
})
</script>
</body>
2.2 设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
- 添加类
$("div").addClass("current");
- 移除类
$("div").removeClass("current");
- 切换类
$("div").toggleClass("current");
<body>
<div class="current"></div>
<script>
$(function() {
// 1. 添加类 addClass()
// $("div").click(function() {
// // $(this).addClass("current");
// });
// 2. 删除类 removeClass()
// $("div").click(function() {
// $(this).removeClass("current");
// });
// 3. 切换类 toggleClass()
$("div").click(function() {
$(this).toggleClass("current");
});
})
</script>
</body>
2.3 类操作与className区别
原生JS中className会覆盖元素原先里面的类名。jQuery里面类操作只是对指定类进行操作，不影响原先的类名。
3. jQuery效果
jQuery给我们封装了很多动画效果。
3.1 显示隐藏效果
3.1.1 显示语法规范
show([speed, [easing], [fn]])
3.1.2 显示参数
（1）参数都可以省略，无动画直接显示。
（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）。
（3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn：回调函数，在动画完成时执行的函数，每一个元素执行一次。
3.1.3 隐藏语法规范
hide([speed, [easing], [fn]])
3.1.4 隐藏参数
（1）参数都可以省略，无动画直接显示。
（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or“fast”）或表示动画时长的毫秒数值（如：1000）。
（3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn：回调函数，在动画完成时执行的函数，每一个元素执行一次。
3.1.5 切换语法规范
toggle([speed, [easing], [fn]])
3.1.6 切换参数
（1）参数都可以省略，无动画直接显示。
（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or“fast”）或表示动画时长的毫秒数值（如：1000）。
（3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn：回调函数，在动画完成时执行的函数，每一个元素执行一次。
3.2 滑动效果
slideDown()、slideUp()、slideToggle()。
3.3 事件切换
<script>
$(function() {
// 鼠标经过
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素 hide() 隐藏元素
// $(this).children("ul").slideDown(200);
// });
// // 鼠标离开
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
});
})
</script>
3.4 动画队列及其停止排队方法
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
3.5 淡入淡出效果
3.6 自定义动画 aminate
<button>动起来</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
王者荣耀手风琴案例
5. jQuery 属性操作
5.1 设置或获取元素固有属性值 prop()
5.2 设置或获取元素自定义属性值 attr()
5.3 数据缓存 data()
<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>
购物车模块案例
$(function() {
// 1. 全选 全不选功能模块
// 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
// 事件可以使用change
$(".checkall").change(function() {
// console.log($(this).prop("checked"));
$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
if ($(this).prop("checked")) {
// 让所有的商品添加 check-cart-item 类名
$(".cart-item").addClass("check-cart-item");
} else {
// check-cart-item 移除
$(".cart-item").removeClass("check-cart-item");
}
});
// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
$(".j-checkbox").change(function() {
// if(被选中的小的复选框的个数 === 3) {
// 就要选中全选按钮
// } else {
// 不要选中全选按钮
// }
// 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);
}
});
})
6. jQuery 内容文本值
7. jQuery 元素操作
主要是遍历、创建、添加、删除元素操作。
7.1 遍历元素
jQuery隐式迭代时对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
语法1：$("div").each(function (index, domEle) { xxx; } )
each()方法遍历匹配的每一个元素。主要用DOM处理。- each 每一个里面的回调函数有2个参数：index是每个元素的索引号，demEle是每个DOM元素对象，不是jQuery对象。
- 所以想要使用jQuery方法，需要给这个DOM元素转换为jQuery对象
$(demEle)。
语法2：$.each(object, function (index, element) { xxx; } )
$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。- 里面的函数有2个参数：index是每个元素的索引号，element是遍历内容。
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// $("div").css("color", "red");
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
// 1. each() 方法遍历元素
var arr = ["red", "green", "blue"];
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(index);
// console.log(i);
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom对象没有css方法
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>
</body>
7.2 创建元素
7.3 添加元素
7.4 删除元素
8. jQuery 尺寸、位置操作
8.1 jQuery 尺寸
8.2 jQuery 位置
8.2.1 offset() 设置或获取元素偏移
8.2.2 position() 获取元素偏移
不可以设置元素的偏移。
8.2.3 scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
可以设置元素的值。
带有动画的返回顶部
9. jQuery 事件注册
10. jQuery 事件处理
10.1 事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法：`element.on(events, [selector], fn)
- events：一个或多个用
// 2. 事件处理on
// (1) on可以绑定1个或者多个事件处理程序
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
},
mouseleave: function() {
$(this).css("background", "blue");
}
});
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// (3) on可以给未来动态创建的元素绑定事件
$("ol li").click(function() {
alert(11);
})
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
微博发布案例
10.2 事件处理 off() 解绑事件
10.3 自动触发事件 trigger()
11. jQuery 事件对象
12. jQuery 对象拷贝
13. 多库共存
14. jQuery 插件
案例：ToDoList
扫一扫
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
