目录
- ? 个人主页: 爱吃豆的土豆
- ? 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
- ? 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
?人必有所执，方能有所成！
?希望大家多多支持?一起进步呀！
1，jQuery基本操作
1.1：基础选择器【重点】
1.2：动画效果
1.2.1：普通效果
1.2.2：自定义动画（扩展）
2，案例：重新弹出广告
1，jQuery基本操作
1.1：基础选择器【重点】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
/*
id选择器：获取符合要求的第一个。如果获取不到，对象内容均为undefined
元素选择器和类选择器：获取到返回jQuery数组，获取不到返回的jQuery数组长度为0
*/
$(function(){
//页面加载完成时，获取对应的标签对象
//获取id为r01的标签对象
var a1 = $("#r01");
//alert(a1[0].value);
//获取标签名为input的标签对象
var arr = $("input");
//alert(arr.length);
//获取class属性值为hehe的标签对象
var arr2 = $(".hehe");
alert(arr2.length);
});
</script>
</head>
<body>
<input type="radio" name="hobby" value="敲代码" id="r01"/>
<input type="radio" name="hobby" value="调试bug" class="hehe"/>
<input type="radio" name="hobby" value="谈需求" class="hehe"/>
</body>
</html> |
为了更好地获取指定的标签对象
目标：学会使用jQuery三个基本选择器
ID选择器 $("#id值")
元素选择器 $("标签名")
类选择器 $(".类名")
1.2：动画效果
1.2.1：普通效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color:lightskyblue;
width:300px;
height:300px;
display: none;
}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//展示
function run1(){
//$("#d1").show(500);//单纯展示动画
//下面回调函数方式：适用于 动画展示完成，回来执行某些代码
/*$("#d1").show(500,function () {
//展示动画完毕，回来调用该函数
alert("展示完毕");
});*/
//上下滑动
//$("#d1").slideDown(500);
//淡入淡出
$("#d1").fadeIn(500);
}
//隐藏
function run2(){
//$("#d1").hide(500);
//上下滑动
$("#d1").slideUp(500);
}
//切换显示/隐藏
function run3(){
//$("#d1").toggle(500);
//上下滑动
$("#d1").slideToggle(500);
}
</script>
</head>
<body>
<div id="d1"></div>
<input type="button" value="展示" onclick="run1()" />
<input type="button" value="隐藏" onclick="run2()" />
<input type="button" value="切换显示/隐藏" onclick="run3()" />
</body>
</html> |
目的：为了掌握基本弹出，收起动画
基本效果：（放大缩小滑动）
小结：
回调函数：某个效果执行完，回来调用执行的函数
1.2.2：自定义动画（扩展）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color:lightskyblue;
width:300px;
height:300px;
position: absolute;
}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
function run1() {
$("#d1").animate({
width:'150px',
height:'150px',
left:'50px'
},1000,function () {
alert("效果完毕");
});
}
</script>
</head>
<body>
<div id="d1"></div>
<input type="button" value="自定义动画" onclick="run1()" style="position: absolute"/>
</body>
</html> |
2，案例：重新弹出广告
- 分析：
关键点：
1、页面加载完成时 $(function(){})
2、定时器 setTimeout(function(){},2000)
3、获取元素： $("#id")
4、动画展示： slideDown slideUp
步骤：
- 页面加载完成时，启动一个弹出广告的定时器
- 该定时器2秒后，滑动展示广告页面
- 展示完毕后，立刻启动收起广告的定时器
- 2秒后，滑动收起广告
- 代码实现：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//1、页面加载完成时，启动一个弹出广告的定时器
$(function () {
setTimeout(function () {
//2、该定时器2秒后，滑动展示广告页面
$("#ad").slideDown(500,function () {
//3、展示完毕后，立刻启动收起广告的定时器
setTimeout(function () {
//4、2秒后，滑动收起广告
$("#ad").slideUp(500);
},2000);
});
},2000);
})
</script> |
小结：
- 获取元素： $("#id");
- slideDown slideUp