目录
一、jQuery中操作元素的属性
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>
<script type="text/javascript" src="../JS/jquery-3.4.1.js"></script>
</head>
<body>
<p id="p1" name="pt">大唐芙蓉园</p>
<script>
$(function(){
let t = $('#p1').attr('name') //获取id为p1得元素的name属性值
console.log('id为p1得元素的name属性值：',t)
})
</script>
</body>
</html>
2、修改属性的值
（1）参数key表示属性名，参数value表示属性值
attr（key，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>
<button id="btn">显示图片</button>
<br><br>
<img />
<script>
$(function(){
$('#btn').bind('click',function(){ //给按钮btn绑定click事件
$('img').attr('src','../images/dog1.jpg')
})
})
</script>
</body>
</html>
（2）采用 key : value 方式设置属性值，可以设置多个属性
注：属性名不用引括号
attr（ { 属性1:属性值1，属性2:属性值2 }）
<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="btn">显示图片</button>
<br><br>
<img />
<script>
$(function(){
$('#btn').bind('click',function(){ //给按钮btn绑定click事件
$('img').attr({src:'../images/dog1.jpg',width:'500px',height:'400px'})
})
})
</script>
</body>
（3）参数key表示属性名，fn是回调函数，在函数中设置属性的值。属性名需要用引号括起来
attr（key，fn）
<!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="btn">显示图片</button>
<br><br>
<img />
<script>
$(function(){
$('#btn').bind('click',function(){ //给按钮btn绑定click事件
$('img').attr('src',function(){
return '../images/cat2.webp'
})
})
})
</script>
</body>
</html>
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>
<script type="text/javascript" src="../JS/jquery-3.4.1.js"></script>
</head>
<body>
<button id="btn">显示图片</button>
<button id="del">删除图片</button>
<br><br>
<img />
<script>
$(function(){
$('#btn').bind('click',function(){ //给按钮btn绑定click事件
$('img').attr('src',function(){
return '../images/cat2.webp'
})
})
//删除图片
$('#del').bind('click',function(){
$('img').removeAttr('src')
})
})
</script>
</body>
</html>运行结果：点击“显示图片”，图片显示；点击“删除图片”，图片不显示。
二、操作元素的样式
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>
<script type="text/javascript" src="../JS/jquery-3.4.1.js"></script>
</head>
<style>
.ok{
color: green;
}
.false{
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('false') //给span删除class属性值为false
$('#sp').addClass('ok') //给span增加class属性，其值为OK
}else{
$('#sp').html('用户名错误')
$('#sp').removeClass('ok')
$('#sp').addClass('false')
}
})
})
</script>
</body>
</html>
2、通过css函数修改
（1）获取css样式属性值
参数name表示样式属性名
css（name）
（2）设置单个CSS样式
参数key表示样式属性名，参数value表示样式属性值
css（key，name）
（3）设置多个CSS样式
css（{ 样式1:值，样式2:值，样式3:值 }）
<!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><!-- 引入jQuery.js文件 -->
</head>
<body>
<p style="color: red;">西安邮电大学</p>
<p id="p1">北京邮电大学</p>
<script>
$(function(){
let k = $('p').css('color') //获取p标签的css样式属性color的值
console.log('p标签属性color的值',k)
$('#p1').css('color','blue') //设置id为p1的标签的文本颜色为蓝色
$('#p1').css({'color':'blue','fontSize':'25px'})
})
</script>
</body>
</html>
3、获取或设置页面元素（标签）的宽度和高度
（1）获取宽度
width（）
（2）设置宽度
参数val表示宽度值
width（val）
（3）获取高度
height（）
（4）设置高度
参数val表示高度值
height（val）
4、操作标签的html代码
操作标签的html代码就是操作标签的innerHTML属性
（1）获取html值
html（）
<!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><!-- 引入jQuery.js文件 -->
</head>
<body>
<p id="p1">北京邮电大学</p>
<script>
$(function(){
let str = $('#p1').html()
console.log('id=p1的html是：',str)
})
</script>
</body>
</html>
（2）设置html参数值
html（val）
<!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><!-- 引入jQuery.js文件 -->
</head>
<body>
<p id="p1">北京邮电大学</p>
<script>
$(function(){
$('#p1').html('西北工业大学')
})
</script>
</body>
</html>代码运行结果：将原本页面上的 “ 北京邮电大学 ” 改为 “ 西北工业大学 ”
5、操作input标签的值（value属性）
（1）获取value值
val（）
<!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" value="12345">
<input type="button" value="确定">
<script>
$(function(){
$('input[type=button]').bind('click',function(){
alert($('input[type=text]').val())
})
})
</script>
</body>
</html>
（2）设置value值
val（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" value="12345">
<input type="button" value="确定">
<script>
$(function(){
$('input[type=button]').bind('click',function(){
$('input[type=text]').val('西安邮电大学')
})
})
</script>
</body>
</html>点击确定，可以看到输入框中的 val 值由默认的12345，变为 西安邮电大学
三、jQuery的事件处理
1、页面载入完成的事件
（1）JavaScript中页面载入事件
window . onload
（2）jQuery中页面载入事件
<!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>
<p>AAAAAAAAAAAA</p>
<input type="text">
<script>
window.onload = function(){
alert('页面载入完成，触发该事件')
}
</script>
</body>
</html>
2、给元素绑定事件
type：表示事件类型；data：可选参数，传递给事件对象的额外数据；fn：是一个回调函数，即事件处理函数
bind（type，[ data ]，fn）
<!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>
<p>AAAAAAAAAAAA</p>
<input type="text">
<script>
$(function(){
//给input绑定失去焦点事件（blur）
$('input').bind('blur',function(){
alert('input失去焦点')
})
})
</script>
</body>
</html>结果查看，鼠标点击输入框之后，在离开输入框的空白页面点击一下，就会弹出提示框
3、反绑定（取消绑定事件）
type：事件类型，可选的；data：可选参数，传递给事件对象的额外数据
unbind（[ 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(){//当鼠标悬停在div上时，背景色变为蓝色
$(this).css('backgroundColor','blue')
})
$('div').bind('mouseout',function(){//当鼠标离开div时，背景色为红色
$(this).css('backgroundColor','red')
})
//给按钮绑定事件
$('#all').bind('click',function(){
$('div').unbind() //取消绑定在div上的所有事件
})
$('#one').bind('click',function(){
$('div').unbind('mouseout') //取消绑定在div上的mouseout事件
})
})
</script>
</body>
</html>前一个为鼠标不在div上悬停时，背景色为红色，后一个为鼠标悬停在div上时，背景色为蓝色（因为截图时无法显示鼠标）
点击“ 取消所有绑定 ” div背景色永远为红色；点击“ 取消指定事件 ”div背景色永远为蓝色
4、一次性绑定事件
一次性绑定事件：绑定的事件只能执行一次
one（type,[ data ]，fn）
5、模拟鼠标悬停效果
over：是一个函数，当鼠标进入时执行该函数；out：是一个函数，当鼠标离开时执行该函数
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/cat.webp" width="200px" height="250px">
<script>
$(function(){
$('button').one('click',function(){
alert('一次性绑定')
})
function over(){
$(this).attr('src','../images/cat3.webp')
}
function out(){
$(this).attr('src','../images/cat.webp')
}
$('img').hover(over,out)
})
</script>
</body>
</html>运行结果为：点击“ 一次绑定 ” 之后出现提示框按“ 确定 ”，后面无论怎么点击按钮都不会再出现此提示框。
鼠标不在图片上时，显示图片为第一张截图。鼠标悬停在图片上时，显示图片为第二张截图
四、jQuery的动画
1、元素的隐藏和显示
（1）隐藏
speed参数：表示隐藏对象所花费的时间；[ callback ]：可选参数，当对象隐藏后执行该函数
hide（speed，[ callback ]）
（2）显示
show（speed，[ callback ]）
（3）交替
如果隐藏就显示，显示就隐藏。 其中speed：表示速度，可以是速度，也可以是表示速度的字符串（“slow”、“normal”、“fast”）
toggle（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="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">交替</button>
<br><br>
<img src="../images/cat2.webp" width="400px" height="250px"><!-- 引入图片 -->
<script>
$(function(){
$('#hide').click(function(){
$('img').hide(2000) //默认隐藏时间：600ms
})
$('#show').bind('click',function(){
$('img').show(2000)
})
$('#toggle').bind('click',function(){
$('img').toggle('slow')
})
})
</script>
</body>
</html>点击按钮图片会出现相应的变化
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/dog1.jpg" width="400px" height="250px">
<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>点击按钮图片会出现相应的变化
3、淡入淡出
淡入淡出：通过改变对象的透明度来实现动画
（1）淡入
fadeIn（speed，[ callback ]）
（2）淡出
fadeOut（speed，[ callback ]）
（3）交替
如果淡出就淡入，淡入就淡出
fadeToggle（speed，[ callback ]）
（4）透明度
opacity参数：透明度，取值在0~1。0是完全透明，1是原色
fadeTo（speed，opacity，[ 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="out">淡出</button>
<button id="in">淡入</button>
<button id="toggle">交替</button>
<button id="to">指定透明度</button>
<br><br>
<img src="../images/T1.jpg" width="400px" height="250px">
<script>
$(function(){
$('#out').bind('click',function(){
$('img').fadeOut(2000)
})
$('#in').bind('click',function(){
$('img').fadeIn(2000)
})
$('#toggle').bind('click',function(){
$('img').fadeToggle(2000)
})
$('#to').bind('click',function(){
$('img').fadeTo('slow',0.8)
})
})
</script>
</body>
</html>点击按钮图片会出现相应的变化 ，在此代码中，指定的透明度为0.8
