本章內容
1.jquery語法
jquery的使用
在<head></head>裏引用jquery.js
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 引用jquery.js -->
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>jquery 符號
$(“選擇器”).動作()
$(“div”).animate({opacity:0},3000);
注：選擇器名要加引號
例如操作一個div
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{width: 100px;height: 100px;background: red;}
</style>
<!-- 引用jquery.js -->
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<script>
//$("選擇器").動作(變化，時間)
$("div").animate({opacity:0},3000);
</script>
</body>
</html>2.juqery效果
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{width: 100px;height: 100px;background: red;}
</style>
<!-- 引用jquery.js -->
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<script>
// $("div").animate({opacity:0},3000);//漸變
// $("div").hide(3000)//隱藏
// $("div").show(3000)//顯示
// $("div").fadeOut(2000)//淡出
// $("div").fadeIn(3000)//淡入
$("div").slideUp(2000)
$("div").slideDown(3000)
</script>
</body>
</html>漸變：
隱藏與顯示：
淡出與淡入
滑動（滑上滑下）
3.事件
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="點我">
<script>
//點擊
$("input").click(
function(){
document.title="這是標題位置"
}
)
//雙擊
$("input").dblclick(
function(){
document.title="這是標題位置"
}
)
//鼠標進入
// $("input").mouseenter(
// function(){
// document.title="這是標題位置"
// }
// )
//鼠標滑出
// $("input").mouseleave(
// function(){
// document.title="aaa"
// }
// )
</script>
</body>
</html>4.方法
<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<script>
//點擊位置爲1的input（即第二個input）
$("input:eq(1)").click(
function(){
$("input:eq(1)").hide();
//第一個input消失
//$("input:first").hide();
//第二個input消失
//$("input:last").hide();
}
)
</script>
</body>
</html>
5.html操作（捕獲【拿】和設置【給】）
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input type="text" value="">
<input type="button" value="提交">
</div>
<script>
//點擊按鈕title顯示input的value值
$("input:eq(1)").click(
function(){
document.title=$("input:eq(0)").val()
}
)
</script>
</body>
</html>