JQ的简单使用（基础）——————JQ
程序员文章站
2022-08-08 16:33:27
JQ基础——JQ的简单使用 ......
jq基础——jq的简单使用
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.w{}
</style>
</head>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<body>
1. 弹窗
<script>
$(function(){
alert("jq超简")
})
</script>
2. 修改文本
<div>张山</div>
<script>
$(function(){
$("div").html("李四")
})
</script>
3. 点击事件
<button id="btn">点我</button>
<script>
$(function(){
$("#btn").click(function(){
$("#btn").html("修改成功")
});
});
</script>
4.图片显示/隐藏 （自建效果）
<img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" width="200px"> <br />
<button id="btn1">显示</button><button id="btn2">隐藏</button>
<a href="#" id="btn1">显示</a><a href="#" id="btn2">隐藏</a>
<script>
$(function(){
$("#btn1").click(function(){
$("#img").show(2000);
$("#img").fadeout(2000);//渐出
$("#img").slidedown(2000);//向下出
});
});
$(function(){
$("#btn2").click(function(){
$("#img").hide(2000);
$("#img").fadein(2000);//渐入
$("#img").slideup(2000);//下上藏
})
})
自建效果
$(function(){
$("#btn1").click(function(){
$("#img").animate({
width: "400px",
opacity:"0.1" ,
},3000)
})
})
</script>
5.ad广告。定时弹出。
<img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" />
<script>
$(function(){
settimeout("hidead()",3000);
});
function showad(){
$("#img").show();
}
function hidead(){
$("#img").hide();
settimeout("showad()",3000);
}
</script>
</body>
</html>
上一篇： Gradle Java 插件