开篇寄语：

弱的时候，坏人最多。这个世界的温柔，来自于你的强大。

所谓自由，不是随心所欲，而是自我主宰。

起源上一篇

今天，我们一起来完成jQuery未完结的内容，最后再用一个实例一起完成案例。

五、jQuery事件

1、加载事件

ready()类似于onload()事件，ready()可以写多个，按顺序执行。

$(document).ready(function(){    });等价于$(function(){    });等价于window.onload = function() {};
<html><head><meta charset="UTF-8"><title>jQuery加载事件title>head><body><script type="text/javascript" src="js/jquery-3.3.1.min.js">script><script type="text/javascript">// 页面加载时就会调用 等价于 onload()// 第一种$(document).ready(function() {console.log('第一种...页面加载时就会调用');});// 第二种$(function() {console.log('第二种...页面加载时就会调用');});// 第三种function init_page() {console.log('第三种...页面加载时就会调用');}$(init_page);$(document).ready(init_page);script>body>html>

2、绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind(eventType[,eventData], handler(eventObject));

eventType：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup,

mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown,

keypress, keyup, error。

[, eventData]：传递的参数，格式：{名:值, 名2:值2}

handler(eventObject)：该事件触发执行的函数

绑定事件可以使用三种方式来实现，分别是bind()，click具体的事件类型，on()，下面就让我们一起来学习一下三种绑定事件的方式。

<html><head><meta charset="UTF-8"><title>jQuery绑定事件title>head><body><div id="dv" style="display: none;">是时候展示真正的技术了！div><button id="btn" type="button">测试单个事件按钮button><script type="text/javascript" src="js/jquery-3.3.1.min.js" >script><script type="text/javascript">function show() {alert('我是一个警告框！');}// ---------------------绑定单个事件--------------------// js方式实现绑定事件document.getElementById('btn').onclick = show;document.getElementById('btn').onclick = function() {alert('不好意思我又来了！');}// jQuery方式实现绑定事件 第一种// 通过事件类型，对应函数$('#btn').bind('click', function() {alert('jQuery方式绑定事件！');});$('#btn').bind('click', show);// jQuery方式实现绑定事件 第二种// 通过具体的事件类型，对应函数$('#btn').click(function() {alert('jQuery方式绑定事件第二种方式！');});$('#btn').click(show);// jQuery方式实现绑定事件 第三种 推荐的方式// 利用事件代理，只在document上注册事件，内存占用小，绑定事件快。$('#btn').on('click', function() {alert('jQuery方式绑定事件第三种方式！');});$('#btn').on('click', show);script>body>html>

注意：事件绑定推荐大家使用第三种，内存占用小，绑定事件快。

六、案例练习：个人相册网站

模拟各大网站的首页轮播效果，开发属于自己的个人相册轮播网站。

效果图

jquery alert源码 jquery alert方法_jquery alert源码

模拟各大网站的首页轮播效果，开发属于自己的个人相册轮播网站，学生分别展示个人相册成果。

<html lang="en"><head><meta charset="UTF-8"><title>个人相册网站title><link rel="stylesheet" href="css/album.css" />head><body><h1>个人相册网站h1><div id="albumSlide"><div class="img"><ul><li><img id="img1" src="img/Joey_Wong1.jpg" />li><li><img id="img2" src="img/Joey_Wong2.jpg" />li><li><img id="img3" src="img/Joey_Wong3.jpg" />li><li><img id="img1" src="img/Joey_Wong4.jpg" />li><li><img id="img2" src="img/Joey_Wong5.jpg" />li>ul><div class="prev" id="prev">div><div class="next" id="next">div>div><div class="nav"><ul><li class="currentNav">1li><li>2li><li>3li><li>4li><li>5li>ul>div>div><script type="text/javascript" src="js/jquery-3.3.1.min.js">script><script type="text/javascript" src="js/album.js" >script>body>html>

album.css

/* 采用什么编码解析文件 */@charset "utf-8";/* * 设置整个body的样式 */body {background: black;/* 背景色黑色 *//* 超出body范围的内容隐藏，可以注释掉这行代码，在#albumSlide中添加会实现另一种相册效果 *//*overflow: hidden;*/}/* * 设置个人相册网站的标题样式 */h1 {font-size: 50px;/* 字体大小 */margin: 20px;/* 设置外间距 */color: white;/* 字体颜色 */text-align: center;/* 居中 */}/* ----------------------相册图片 begin----------------------- *//* * 设置albumSlide盒子的样式 */#albumSlide {/* 背景色矢车菊蓝，布局时使用 *//*background: cornflowerblue;*/width: 1000px;/* 宽 */height: 500px;/* 高 */position: relative;/* 子标签相对于父标签定位 */margin: 0 auto;/* 设置外间距 *//* 超出盒子范围的内容隐藏，可以注释掉这行代码，在body中添加会实现另一种相册效果 */overflow: hidden;}/* * 设置albumSlide盒子里的所有li的样式 */#albumSlide ul li {list-style: none;/* 去除无序列表的默认样式 */}/* * 设置albumSlide盒子里的img盒子里的所有li的样式 * 设置albumSlide盒子里的img盒子里的所有li里的图片样式 */#albumSlide .img ul li,#albumSlide .img ul li img {position: absolute;/* 使用绝对定位，相对于其父标签定位 */top: 0px;/* 最顶部开始 */width: 100%;/* 宽和父标签的宽一致 */height: 100%;/* 高和父标签的高一致 */}/* * 可以使用jQuery动态生成多个图片left样式的代码 *//*#img1 {left: 0px;}#img2 {left: 1000px;}#img3 {left: 2000px;}#img4 {left: 3000px;}#img5 {left: 4000px;}*//* * 设置albumSlide盒子里的img盒子里的所有li的样式 */#albumSlide .img ul li {left: 0px;/* 最左部开始 */}/* -----------------------相册图片 end------------------------ *//* ---------------------上一张 下一张 begin--------------------- *//* * 开放字体格式(第三方固定格式) */@font-face {font-family: 'iconfont';src: url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.woff') format('woff');}/* * 设置上一张下一张的样式 */.prev,.next {position: absolute;/* 使用绝对定位，相对于其父标签定位 */font-family: "iconfont";/* 开放字体格式 */font-size: 60px;/* 字体大小 */top: 230px;/* 从顶部开始移动250px */opacity: 0.6;/* 透明效果级别 */color: white;/* 字体颜色 */cursor: pointer;/* 鼠标变手势 */}/* * 鼠标移动至上一张下一张后改变的样式 */.prev:hover,.next:hover {opacity: 1;/* 透明效果级别 */}/* * 设置上一张的样式 */.prev {left: 10px;/* 左边开始移动10px */}/* * 设置下一张的样式 */.next {right: 10px;/* 右边开始移动10px */}/* ---------------------上一张 下一张 end--------------------- *//* ---------------------底部导航 begin---------------------- *//* * 设置导航的样式 */.nav {width: 100%;/* 宽和父标签的宽一致 */text-align: center;/* 居中 */position: absolute;/* 使用绝对定位，相对于其父标签定位 */bottom: 5px;/* 从底部开始移动5px */}/* * 设置导航盒子里的li的样式 */.nav ul li {list-style: none;/* 去除无序列表的默认列表样式 */width: 15px;/* 宽15px */height: 15px;/* 高15px */border-radius: 50%;/* 边框变圆 */background: gray;/* 背景色灰色 */opacity: 0.6;/* 透明效果级别 */margin: 0 5px;/* 设置外边距 */display: inline-block;/* 类似于导航栏的效果 */font-size: 0;/* 字体大小 */cursor: pointer;/* 鼠标变手势 */transition: all 0.5s;/* 动画效果执行所耗时间 */}/* * 设置当前导航选中的样式 */.nav .currentNav {background: white;/* 背景色白色 */}/* ---------------------底部导航 end---------------------- */