前幾篇博客中講了Jquery的基礎和點擊實際，下面來說一下和css搭配著來怎么做
還是和往常一樣，舉個例子
好幾個方塊，然后設置顏色
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script src="jquery-1.11.2.min.js"></script> <style type="text/css"> .aa{ width:200px; height:200px; float:left;margin:5px; background-color:#039} </style> </head> <body> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> <div class="aa"> </div> </body> </html>
順便復習一下css的知識
給.aa加的樣式 寬200像素 高200像素 向左流 距離5像素 顏色隨便設置，這里設置的是藍色
來看一下運行運行的效果
大概就這樣，div設置幾個都ok
讓它執行每點擊一塊就變顏色
如果用Js來做的話，要寫好多代碼，所以選擇Jquery方法來做
來看一下Jquery 代碼部分
先找到.aa 點擊加事件，里面的$(this) 是找到點擊了誰，然后給他加css 背景色
來看一下運行的效果
點擊哪塊，哪塊就會變為紅色
但是得再讓它變回來，所以還得加Jquery代碼
只需要在它上面再加一句代碼就可以了，兩句代碼組合起來的意思就是，當時點擊誰誰背景色才會變為紅的，其他的都是原先的背景色，這里要注意原來的背景色要和最上面設置的背景色一致
來看一下效果
點擊哪塊，哪塊變為紅的，當點其他塊的時候，之前的那塊又會變為原先的背景色
除了有點擊事件，還有移上事件，也就是鼠標移上去就可以觸發的事件
代碼可以來看一下
暫時把點擊代碼部分注釋了，。mousemove 移上的意思
只是換了一個代碼而已，其他的代碼都一樣
有意向的可以做一下試試，移上事件就不看效果了，圖片看不出來，背景色會跟著鼠標移動的位置改變
如果讓兩者同時實現的話，也可以
可能有人會想到這樣操作
這樣寫操作起來會有BUG，這樣操作的效果會是移上是黃色，點擊一下只要鼠標不動就是紅色，但是鼠標稍微移動，會立馬變成黃色
來看一下代碼正確的寫法
先給點擊事件加個屬性標識，然后再在移上事件后面加句代碼，屬性篩選，根據該屬性找到元素，設置背景顏色
看一下運行的效果
點擊某一塊會變成紅色，鼠標移動除了被點擊的那塊，其他的會照樣變成黃色
 |
不含病毒。www.avast.com |
留言列表
