目录
一、JQuery库
1、简介
简介：是javascript的库（对javascript的封装）
2、理念
理念：写的少，做的多
3、使用方法
（1)在页面文件中导入jQuery.js文件
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
（2）在script标签中编写js代码
‘$’:是jQuery的全局变量,代表的是jQuery
简写（推荐）：
$(function(){//jquery的入口函数
jquery代码
}）
完整写法：
$(document).ready(function(){//jquery的入口函数
jquery代码
})
4、jQuery的基本选择器
（1）id选择器：#id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<button id="hide">隐藏</button>
<br><br>
<p id ='p1'>西安邮电大学</p>
<script>
$(function(){
$('#hide').bind('click',function(){
alert('你单击按钮')
})
//修改id为p1的元素的背景色
$('#p1').css('backgroundColor','red')
})
// var btn =document.querySelector('#hide')
// btn.addEventListener('click',function(){
// alert('你单击按钮')
// })
</script>
</body>
</html>
（2）类选择器：.class
<body>
<p class="pt">西北政法大学</p>
<p class="pt">陕西师范大学</p>
<script>
$(function(){
// 修改class为pt元素的文本颜色
$('.pt').css('color','blue')
})
</script>
</body>
（3）标签名选择器：标签名
<body>
<p id ='p1'>西安邮电大学</p>
<p class="pt">西北政法大学</p>
<p class="pt">陕西师范大学</p>
<p>西安理工大学</p>
<p>西北大学</p>
<hr>
<!-- <div>红楼梦</div>
<div>西游记</div>
<div>三国演义</div>
<div>水浒传</div> -->
<script>
$(function(){
// 将所有p标签的文本的字号设置为26px
$('p').css('fontSize','26px')
})
</script>
</body>
5、jQuery的基本过滤选择器
（1）:first：选择第一个元素
<body>
<p id ='p1'>西安邮电大学</p>
<p class="pt">西北政法大学</p>
<p class="pt">陕西师范大学</p>
<p>西安理工大学</p>
<p>西北大学</p>
<hr>
<div>红楼梦</div>
<div>西游记</div>
<div>三国演义</div>
<div>水浒传</div>
<script>
$(function(){
//将第一个p标签的背景色改为蓝色
$('p:first').css('backgroundColor','blue')
})
</script>
</body>
（2）:last：选择最后一个元素
<body>
<p id ='p1'>西安邮电大学</p>
<p class="pt">西北政法大学</p>
<p class="pt">陕西师范大学</p>
<p>西安理工大学</p>
<p>西北大学</p>
<hr>
<div>红楼梦</div>
<div>西游记</div>
<div>三国演义</div>
<div>水浒传</div>
<script>
$(function(){
// 将最后一个p标签的字体颜色改为红色
$('p:last').css('color','red')
})
</script>
</body>
（3）not(selector)：不是指定的某个元素
<body>
<p id ='p1'>西安邮电大学</p>
<p class="pt">西北政法大学</p>
<p class="pt">陕西师范大学</p>
<p>西安理工大学</p>
<p>西北大学</p>
<hr>
<div>红楼梦</div>
<div>西游记</div>
<div>三国演义</div>
<div>水浒传</div>
<script>
$(function(){
// 将class属性不是pt的字号变小
$('p:not(.pt)').css('fontSize','12px')
})
</script>
</body>
（4）:even：索引为偶数的元素
<body>
<p id ='p1'>西安邮电大学</p>
<p class="pt">西北政法大学</p>
<p class="pt">陕西师范大学</p>
<p>西安理工大学</p>
<p>西北大学</p>
<hr>
<div>红楼梦</div>
<div>西游记</div>
<div>三国演义</div>
<div>水浒传</div>
<script>
$(function(){
// 让索引为偶数的div的字体颜色为蓝色
$('div:even').css('color','blue')
})
</script>
</body>
（5）:odd：索引为奇数的元素
<body>
<p id ='p1'>西安邮电大学</p>
<p class="pt">西北政法大学</p>
<p class="pt">陕西师范大学</p>
<p>西安理工大学</p>
<p>西北大学</p>
<hr>
<div>红楼梦</div>
<div>西游记</div>
<div>三国演义</div>
<div>水浒传</div>
<script>
$(function(){
// 让索引为奇数的div的字体颜色为红色
$('div:odd').css('color','red')
})
</script>
</body>
（6）:eq(index)：索引等于index的元素
<body>
<p id ='p1'>西安邮电大学</p>
<p class="pt">西北政法大学</p>
<p class="pt">陕西师范大学</p>
<p>西安理工大学</p>
<p>西北大学</p>
<hr>
<div>红楼梦</div>
<div>西游记</div>
<div>三国演义</div>
<div>水浒传</div>
<script>
$(function(){
// 让索引等于2的div的字号为18px的像素
$('div:eq(2)').css('fontSize','18px')
})
</script>
</body>
（7）:gt(index)：索引大于index的元素
（8）:lt(index)：索引小于index的元素
6、jQuery的属性选择器
（1）[attribute]:拥有给定属性的元素
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
用户名：<input type="text" name="userName">
<br><br>
密 码：<input type ='password'>
<br><br>
年 龄：<input type="number" max="120" min="0">
<br><br>
地 址：<input type="text" name="address">
<br><br>
电话号码：<input type="text" name="userPhone">
<br><br>
QQ号码：<input type="text" name="qqress">
<script>
$(function(){
// 将具有max属性的input的文本设置为红色
$('input[max]').css('color','red')
})
</script>
</body>
</html>
（2）[attribute=value]:选取指定属性的值为value的元素
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
用户名：<input type="text" name="userName">
<br><br>
密 码：<input type ='password'>
<br><br>
年 龄：<input type="number" max="120" min="0">
<br><br>
地 址：<input type="text" name="address">
<br><br>
电话号码：<input type="text" name="userPhone">
<br><br>
QQ号码：<input type="text" name="qqress">
<script>
$(function(){
// 将name属性值为userName的input的文本设置为蓝色
$('input[name=userName]').css('color','blue')
})
</script>
</body>
</html>
（3）[attribute != value]：选取指定属性的值不等于value的元素
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
用户名：<input type="text" name="userName">
<br><br>
密 码：<input type ='password'>
<br><br>
年 龄：<input type="number" max="120" min="0">
<br><br>
地 址：<input type="text" name="address">
<br><br>
电话号码：<input type="text" name="userPhone">
<br><br>
QQ号码：<input type="text" name="qqress">
<script>
$(function(){
// 将name属性值不是userName的input的文本设置绿色
$('input[name != userName]').css('color','green')
})
</script>
</body>
</html>
（4）[attribute^=value]:选取指定属性的值以value开始的元素
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
用户名：<input type="text" name="userName">
<br><br>
密 码：<input type ='password'>
<br><br>
年 龄：<input type="number" max="120" min="0">
<br><br>
地 址：<input type="text" name="address">
<br><br>
电话号码：<input type="text" name="userPhone">
<br><br>
QQ号码：<input type="text" name="qqress">
<script>
$(function(){
// 将name属性值是以‘user’开头的input的设置文本字号为25px
$('input[name^=user]').css('fontSize','25px')
})
</script>
</body>
</html>
（5）[attribute$=value]:选取指定属性的值以value结尾的元素
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
用户名：<input type="text" name="userName">
<br><br>
密 码：<input type ='password'>
<br><br>
年 龄：<input type="number" max="120" min="0">
<br><br>
地 址：<input type="text" name="address">
<br><br>
电话号码：<input type="text" name="userPhone">
<br><br>
QQ号码：<input type="text" name="qqress">
<script>
$(function(){
//将name属性值是以‘ress’结尾的input的设置文本字号为20px
$('input[name$=ress]').css('fontSize','20px')
})
</script>
</body>
</html>
（6）[attribute*=value]:选取指定属性的值含有value结尾的元素
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
用户名：<input type="text" name="userName">
<br><br>
密 码：<input type ='password'>
<br><br>
年 龄：<input type="number" max="120" min="0">
<br><br>
地 址：<input type="text" name="address">
<br><br>
电话号码：<input type="text" name="userPhone">
<br><br>
QQ号码：<input type="text" name="qqress">
<script>
$(function(){
//将type属性值中含有'word'文本字号设置为35px
$('input[type*=word]').css('fontSize','35px')
})
</script>
</body>
</html>
7、jQuery中操作元素的属性
7.1、读取属性值
attr（‘属性名’）用引号将属性名括起来
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<body>
<p id="p1" name="pt">大唐芙蓉园</p>
<script>
$(function(){
let t= $('#p1').attr('name')//获取id为p1的元素的name属性
console.log(t)
})
</script>
</body>
</html>
7.2、修改属性的值
（1）attr（‘key’,‘value’)参数key表示属性名，参数value表示属性值。用引号将属性名和属性值括起来
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<body>
<p id="p1" name="pt">大唐芙蓉园</p>
<button id="btn">显示图片</button>
<br><br>
<img/>
<script>
$(function(){
let t= $('#p1').attr('name')//获取id为p1的元素的name属性
console.log(t)
$('#btn').bind('click',function(){ //给按钮绑定click事件
$('img').attr('src','../images/001.png')
})
})
</script>
</body>
（2）attr（{属性1：‘属性值1’，属性2：‘属性值2’}）采用key:value方式设置属性值，可以设置多个属性。注意：属性名不用引号，属性值要用引号括起来
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<body>
<p id="p1" name="pt">大唐芙蓉园</p>
<button id="btn">显示图片</button>
<br><br>
<img/>
<script>
$(function(){
let t= $('#p1').attr('name')//获取id为p1的元素的name属性
console.log(t)
$('#btn').bind('click',function(){ //给按钮绑定click事件
$('img').attr({src:'../images/002.png',width:'100px',height:'100px'})
})
})
</script>
</body>
(3)attr(key,fn)参数key表示属性名，fn是回调函数，在函数中设置属性值。属性名需要用引号括起来。（单引双引都可以）
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<body>
<p id="p1" name="pt">大唐芙蓉园</p>
<button id="btn">显示图片</button>
<br><br>
<img/>
<script>
$(function(){
let t= $('#p1').attr('name')//获取id为p1的元素的name属性
console.log(t)
$('#btn').bind('click',function(){ //给按钮绑定click事件
$('img').attr('src',function(){
return '../images/002.png'//后面返回的属性给src
})
})
})
</script>
</body>
7.3、删除属性
removeAttr(‘属性名’)属性名需要用引号括起来。（单引双引都可以）
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<body>
<!-- <p id="p1" name="pt">大唐芙蓉园</p> -->
<button id="btn">显示图片</button>
<button id="del">删除图片</button>
<br><br>
<img/>
<script>
$(function(){
// 显示图片
$('#btn').bind('click',function(){ //给按钮绑定click事件
$('img').attr('src',function(){
return '../images/002.png'
})
})
// 删除图片
$('#del').bind('click',function(){
$('img').removeAttr('src')//将img的src属性删除
})
})
</script>
</body>
</html>
代码视频演示：
8、jQuery的事件处理
8.1、通过class属性修改
(1)给元素添加指定的类名（class属性值）
addClass(‘类名’)
(2)删除元素的class属性
removeClass(‘类名’)
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<style>
.ok{
color:green
}
.fail{
color:red
}
</style>
<body>
用户名：<input type="text" id="username"><span id="sp"></span>
<br><br>
密 码：<input type="password" id="pwd">
<br><br>
<button id="login">登录</button>
<script>
$(function(){
$('#login').bind('click',function(){
if($('#username').val() === 'abc'){
$('#sp').html('用户名正确')
$('#sp').removeClass('fail') //如果不加这个语句，在输入错误用户名后，再次输入正确用户，颜色值还是错误用户的颜色。
$('#sp').addClass('ok')//给span控件增加了class属性，其值为ok
}else{
$('#sp').html('用户名错误')
$('#sp').removeClass('ok')
$('#sp').addClass('fail')//给span控件增加了class属性，其值为fail
}
})
})
</script>
</body>
</html>
8.2、通过css函数修改
（1）获取css样式属性值
css(‘name’) 参数name表示样式属性名
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<p style="color:red">西安邮电大学</p>
<p id="p1">北京邮电大学</p>
<script>
$(function(){
let k = $('p').css('color')//获取p标签的css样式属性color的值
console.log(k)
})
</script>
</body>
（2）设置单个css样式
css（‘key’,‘value’)参数key表示样式属性名，参数value表示样式属性值
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<p style="color:red">西安邮电大学</p>
<p id="p1">北京邮电大学</p>
<script>
$(function(){
$('#p1').css('color','blue')//设置id为p1的文本标签为蓝色
})
</script>
</body>
（3）设置多个css样式
css({'样式1属性名‘：’值‘，’样式2‘：’值‘，’样式3‘：’值‘}）
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<p style="color:red">西安邮电大学</p>
<p id="p1">北京邮电大学</p>
<script>
$(function(){
$('#p1').css({'color':'blue','fontSize':'25px'})
})
</script>
</body>
8.3、获取或设置页面元素（标签）的宽度和高度
（1）获取宽度
width()
（2）设置宽度
width(val) //参数val表示宽度值
（3）获取高度
height()
（4）设置高度
height(val) //参数val表示宽度值
8.4、操作标签的html代码（就是操作标签的innerHTML属性）
（1）获取html的值
html()
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<p style="color:red">西安邮电大学</p>
<p id="p1">北京邮电大学</p>
<script>
$(function(){
let str =$('#p1').html()
console.log(str)
})
</script>
</body>
（2）设置html的值
html(value)
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<p style="color:red">西安邮电大学</p>
<p id="p1">北京邮电大学</p>
<script>
$(function(){
$('#p1').html('西北工业大学')
})
</script>
</body>
8.5、操作input标签的值（value属性）
（1）获取value值
val()
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
用户名：<input type="text">
<input type="button" value="确定">
<script>
$(function(){
$('input[type=button]').bind('click',function(){
alert($('input[type=text]').val())
})
})
</script>
</body>
(2)设置value值
val(value)
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
用户名：<input type="text">
<input type="button" value="确定">
<script>
$(function(){
$('input[type=button]').bind('click',function(){
// alert($('input[type=text]').val())
$('input[type=text]').val('西安邮电大学')
})
})
</script>
</body>
点击确定按钮，显示出所设置的value值：西安邮电大学：
9、jQuery的事件处理
9.1、页面载入完成的事件
（1）JavaScript中页面载入事件：window.onload
（2）jQuery中的页面载入事件:
$(document).ready(function(){
}）
简写方式：
$(function(){
}）
9.2、给元素绑定事件
（1）bind(type,[data],fn)
type:表示事件类型
data:可选参数，传递给事件对象的额外数据
fn:是一个回调函数，即事件处理函数。
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<body>
<button>事件绑定</button>
<script>
$(function(){
$('button').bind('click',function(){
alert('通过bind绑定事件')
})
})
</script>
</body>
点击事件绑定按钮，弹出警告提示框：
（2）元素对象.事件名（function(){})
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<body>
<button>事件绑定</button>
<input type="text">
<script>
$(function(){
$('button').click(function(){
alert('直接绑定事件')
})
// 当input失去焦点时弹出消息框
$('input').blur(function(){
alert('input失去焦点')
})
})
</script>
</body>
点击事件绑定按钮，弹出直接绑定事件提示框：
input输入框，一旦失去焦点，会弹出input失去焦点提示框：
9.3、反绑定（取消绑定的事件）
unbind ([type],[data])
type:事件类型,可选的
data:可选参数，传递给事件对象的额外数据
（1)unbind():不带参数，取消所有绑定的事件
（2)unbind(type):带参数，取消指定的参数事件
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<button id="all">取消所有绑定</button>
<button id="one">取消指定事件绑定</button>
<br><br>
<div style="background-color: red;width: 150px;height: 150px;"></div>
<script>
$(function(){
// 给div绑定事件
$('div').bind('mouseover',function(){
$(this).css('backgroundColor','blue')
})
$('div').bind('mouseout',function(){
$(this).css('backgroundColor','red')
})
// 给按钮绑定事件
$('#all').bind('click',function(){
$('div').unbind()//取消绑定在div的所有事件
})
$('#one').bind('click',function(){
$('div').unbind('mouseout')//取消绑定在div的mouseout事件
})
})
</script>
</body>
</html>
运行结果演示：
9.4、一次性绑定事件
一次性绑定事件：绑定的事件只能执行一次。
one(type,[data],fn)
☀️举个例子：
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<button>一次绑定</button>
<script>
$(function(){
$('button').one('click',function(){
alert('一次性绑定')
})
})
</script>
</body>
只能出现一次：
9.5、 模拟鼠标悬停效果
hover(over,out)
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<button>一次绑定</button>
<br><br>
<img src="../images/003.png" width="300x" height="300x">
<script>
$(function(){
$('button').one('click',function(){
alert('一次性绑定')
})
//写法一：
// $('img').hover(function(){
// $(this).attr('src','../images/002.png')
// },function(){
// $(this).attr('src','../images/003.png')
// })
//写法二：
function over(){
$('img').attr('src','../images/002.png')
}
function out(){
$('img').attr('src','../images/003.png')
}
$('img').hover(over,out)
})
</script>
</body>
</html>
显示效果如下：
10、jQuery的动画
10.1、元素的隐藏与显示
（1）隐藏
hide(speed,[callback])
speed参数：隐藏对象所用的时间
[callback]：可选参数，当对象隐藏后执行该函数
（2）显示
show(speed,[callback])
speed参数：显示对象所用的时间
[callback]：可选参数，当对象显示后执行该函数
（3）交替
toggle(speed,[callback])
如果隐藏就显示，如果显示就隐藏。
speed:表示速度，可以是数字，也可以表示速度的字符串（‘slow’,‘normal’,‘fast’)
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">交替按钮</button>
<br><br>
<img src="../images/003.png" width="300px" height="300px">
<script>
$(function(){
$('#hide').click(function(){
$('img').hide(2000)//参数以毫秒为单位,默认速度为600毫秒
})
$('#show').click(function(){
$('img').show(2000)//参数以毫秒为单位,默认速度为600毫秒
})
$('#toggle').click(function(){
$('img').toggle('slow')
})
})
</script>
</body>
</html>
运行结果如下：
10.2、收缩与展开
（1）向上收缩
slideUp(speed,[callback])
（2）向下展开
slideDown(speed,[callback])
（3）交替：若展开的就收缩，若是收缩的就展开
slideToggle(speed,[callback])
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<button id="up">向上收缩</button>
<button id="down">向下展开</button>
<button id="toggle">交替按钮</button>
<br><br>
<img src="../images/002.png" width="300" height="300x">
<script>
$(function(){
$('#up').bind('click',function(){
$('img').slideUp(2000)
})
$('#down').bind('click',function(){
$('img').slideDown(2000)
})
$('#toggle').bind('click',function(){
$('img').slideToggle(2000)
})
})
</script>
</body>
</html>
运行结果如下：
10.3、淡入淡出
（1）淡入
fadeIn(speed,[callback])
（2）淡出
fadeOut(speed,[callback])
（3）将对象的透明度设置为指定的值
fadeTo(speed,opacity,[callback])
opacity:指定对象不透明的值（取值范围是0~1的数字）
（4）透明度的交替
fadeToggle(speed,[callback])
☀️举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<button id="in">淡入</button>
<button id="out">淡出</button>
<button id="to">指定透明度</button>
<button id="fade">淡入淡出交替</button>
<br><br>
<img src="../images/002.png" width="300" height="300x">
<script>
$(function(){
$('#in').bind('click',function(){
$('img').fadeIn(3000)
})
$('#out').bind('click',function(){
$('img').fadeOut(3000)
})
$('#to').bind('click',function(){
$('img').fadeTo('slow',0.8)//停留在某一个状态
})
$('#fade').bind('click',function(){
$('img').fadeToggle(2000)//透明度的交替
})
})
</script>
</body>
</html>
运行结果如下：
1212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
