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>
