引言
jQuery语法就是
$()
注意在EL表达式中是${},大括号
1.jQuery选择器
1.1 3种选择器
例题:点击button按钮,p标签的内容全部隐藏
<!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>
<style type="text/css">
p {
width: 100px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<button id="btnid" class="btncss">点击隐藏</button>
<p id="pid" class="pcss"></p>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
// 元素选择器
$(document).ready(function () {
$("button").click(
function () {
$("p").hide();
}
)
})
//id选择器
$(document).ready(function () {
$("#btnid").click(function () {
$("#pid").hide();
})
})
//class选择器
$(document).ready(function () {
$(".btncss").click(function () {
$(".pcss").hide();
})
})
</script>
</body>
</html>
<script type=“text/javascript” src=“jquery-3.5.1.min.js”></script>不要忘记,且src不用加/,因为是同级目录下
2. jQuery效果
2.1 显示和隐藏、显示隐藏交替
hide();show();toggle()
<!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>
<style type="text/css">
img {
width: 150px;
height: 230px;
display: none;
}
p{
position: relative;
top: 10px;
left: 20px;
width: 150px;
height: 230px;
border: solid 10px beige;
}
#close-btn-id{
position: absolute;
top: -1px;
right: -1px;
}
</style>
</head>
<body>
<p>
<!-- src第一个路径不用加/会报错 -->
<img src="image/刘雨昕.jpg" alt="">
<button id="close-btn-id" class="closebtncss">显示</button>
</p>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#close-btn-id").click(function(){
$("img").show();//点击显示
$("img").hide();//点击关闭
$("img").toggle();//点击关闭,再点击显示,再点击关闭....
})
})
</script>
</body>
</html>
2.2 淡入淡出、淡入淡出交替
fadeIn() ; fadeOut(); fadeToggle(); fadeTo();
–>
1.方法里面可以取值(“slow” “fast” 或者毫秒)也可不取
如
fadeIn(“slow”)、fadeIn(“fast”)、fadeIn(3000)
fadeOut(“slow”)、fadeOut(“fast”)、fadeOut(3000)
fadeToggle(“slow”)、fadeToggle(“fast”)、fadeToggle(3000)
2.方法fadeTo(speed,opacity,callback),必需的参数speed规定效果的时长,取值(slow、fast、毫秒),opacity参数将淡入淡出效果设置为给定的不透明度,取值(0~1之间),callback参数是该函数完成后所执行的函数名称
如
$(“#div1”).fadeTo(“slow”,0.15);
2.3滑动
slideDown()、slideUp()、slideToggle();
如
$(“#pid”).slideDown();//向下滑动显示出来
2.4 动画
animate();
2.4.1例题1:点击按钮图片放大,一直点击一直放大,img的长和宽每次加大150px
<body>
<p>
<!-- src第一个路径不用加/会报错 -->
<img src="image/刘雨昕.jpg" alt="">
<button id="close-btn-id" class="closebtncss">放大</button>
</p>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#close-btn-id").click(function(){
$("img").animate({
height:'+=150px',
width:'+=150px'
})
})
})
</script>
</body>
2.4.2例题2,点击显示按钮图片从上到下并且从左到右慢慢的出来再隐藏回去
<!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>
<style type="text/css">
img {
width: 150px;
height: 230px;
display: none;
}
p {
position: relative;
top: 10px;
left: 20px;
width: 150px;
height: 230px;
border: solid 10px beige;
}
#btn-id {
position: absolute;
top: -1px;
right: -1px;
}
</style>
</head>
<body>
<p>
<!-- src第一个路径不用加/会报错 -->
<img src="image/刘雨昕.jpg" alt="">
<button id="btn-id" class="closebtncss">显示</button>
</p>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn-id").click(function () {
$("img").animate({
height: 'toggle',
width:'toggle'
})
})
})
</script>
</body>
</html>
可以把属性的动画值设置为”slow“、“hide”、“toggle”
这里只演示toggle
要给透明度直接再{}里面加
如<script type="text/javascript"> $(document).ready(function () { $("#btn-id").click(function () { $("img").animate({ height: 'toggle', width:'toggle', opacity:'0.4' }) }) }) </script>
2.4.3 例题3 点击按钮字号一次加大3em,效果为慢慢加大
div.animate({fontSize:'3em'},"show");
2.4.4 停止动画
${“#div”}.stop();