2010年5月15日星期六

[jQuery] 我的第一隻jQuery程式以滑鼠的事件來控制CSS變換、DIV內容更改與DIV顯示與隱藏

在開始介紹我的第一隻jQuery程式之前，

先來跟大家簡單介紹一下jQuery是什麼好啦~

簡單來說，

他是一套Javascript擴充library，

主要是要讓原本的Javascript 在操作DOM、Ajax時能夠變得更直覺、更簡單，

換句話說，

就是讓你能夠寫更少、做更多事情!

不過還沒看到範例之前，

上面也只是純打嘴泡而已XD...

所以我們就先來看看一個簡單的例子吧!!

未使用jQuery：
document.getElementById('content').innerHTML='更改囉！';

使用jQuery：
$('#content').html('更改囉！');

有看到明顯差異了嗎?XD...

他的精神就是這樣囉!!

不過在學jQuery之前，

建議還是先學Javascript會比較好~

畢竟這樣學起來才能更體會到jQuery的精神啦！ : )

接下來就是一個簡單的範例啦～

主要就是要用滑鼠的事件來控制CSS變換、DIV內容更改與DIV顯示與隱藏，

總而言之，

快來看看以下程式碼吧！: )

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js"  type="text/javascript" ></script>
<script type="text/javascript" language="javascript">
$(document).ready(initial);

function initial(){
 $('#cc').mouseout(function(){ 
  $(this).removeClass();
  $(this).addClass('contents');
  $(this).html('移到我這裡!!');
 });
 $('#cc').mousemove(function(){  
  $(this).removeClass();
  $(this).addClass('cscs');
  $(this).html('移開吧!!不然就點我顯示或隱藏圖片囉!!');
 }); 
 $('#cc').click(function(){   
  $('#pic').toggle();
 });
}
</script>
<title>無標題文件</title>
<style type="text/css">
<!--
.contents {
 font-family: "微軟正黑體", Verdana;
 color: #FFF;
 background-color: #2B0000;
}

.cscs{
 background-color:#111111;
 color:#FFF;
 font-family: "微軟正黑體", Verdana;
 cursor:pointer;
}
-->
</style></head>

<body>
<div id="cc" class="contents" >移到我這裡!!</div>
<div id="pic" style="display:none"  ><img src="pic.jpg"></div>
</body>
</html>