標籤：事件 文檔 images xmlns oat nbsp style htm 注意
前幾篇部落格中講了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，這樣操作的效果會是移上是黃色，點擊一下只要滑鼠不動就是紅色，但是滑鼠稍微調動，會立馬變成黃色
來看一下代碼正確的寫法
先給點擊事件加個屬性標識，然後再在移上事件後面加句代碼，屬性篩選，根據該屬性找到元素，設定背景顏色
看一下啟動並執行效果
點擊某一塊會變成紅色，滑鼠移動除了被點擊的那塊，其他的會照樣變成黃色
Jquery 搭配 css 使用，簡單有效
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
