Jquery第一課
Jquery的基本操作（顯示，隱藏，切換，替換，CSS操作，單擊雙擊事件）
以前覺得這個javascript是個很難的東西，不想去弄，后來才知道還有一個Jquery，今天自學了一會，來興趣了，寫了第一個網頁應用，這個東西挺好玩的，編輯器用的DW，html:xt然后再按一下tab鍵自動創建好格式，舒服，
CSS代碼
<style>
#five{width:150px;height: 30px;line-height: 30px; background-color:#00DCEF;cursor: pointer;border:dashed 1px #eaeaea;}
</style>
js部分
<script type="text/javascript">
$(document).ready(function(){
$("#one").click(function(){
$("p").hide(1000);
});
$("#two").click(function(){
$("p").show();
});
$("#three").click(function(){
$("p").toggle();
});
$("#four").click(function(){
$("p").css("color","#ff0000");
});
$("#five").dblclick(function(){
$(this).hide(500);
});
$("#six").click(function(){
$("h1").text("這是我的第一個Jquery網頁應用，");
$("p").text("當點擊隱藏段落按鈕后，這里的文字將被隱藏，");
});
});
</script>
HTML網頁部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>This is my first Jquery app</title>
<style>
#five{width:150px;height: 30px;line-height: 30px; background-color:#00DCEF;cursor: pointer;border:dashed 1px #eaeaea;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#one").click(function(){
$("p").hide(1000);
});
$("#two").click(function(){
$("p").show();
});
$("#three").click(function(){
$("p").toggle();
});
$("#four").click(function(){
$("p").css("color","#ff0000");
});
$("#five").dblclick(function(){
$(this).hide(500);
});
$("#six").click(function(){
$("h1").text("這是我的第一個Jquery網頁應用，");
$("p").text("當點擊隱藏段落按鈕后，這里的文字將被隱藏，");
$(this).text("將英文替換成中文");
$("#one").text("隱藏P段落");
$("#two").text("顯示P段落");
$("#three").text("切換顯示P段落");
$("#four").text("更改段落顏色");
$("#five").text("雙擊隱藏這個按鈕");
});
});
</script>
</head>
<body>
<h1>This is my first Jquery web app.</h1>
<p>This content will be hidden when you click the hide p button.</p>
<button id="one">Hide P</button>
<button id="two">Show P</button>
<button id="three">Toggle hide and show P</button>
<button id="four">Change P color</button>
<button id="five">dblclick hide this</button>
<button id="six">translate English to Chinese</button>
</body>
</html>
效果圖如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/204881.html
標籤：其他
下一篇：Vue入門案例：TodoList