jquery點選事件基礎用法

2019-12-11 13:09:53

製作網站時，經常會呼叫jquery命令，在呼叫jquery時一定要先把jquery引入到程式碼中。

開啟dreamweaver軟體，新建html檔案，如圖所示

在body中建立兩張圖片，由div包含圖片，如圖所示

然後在head中建立style標籤，新增對div和圖片的修飾，ctrl+s儲存檔案，然後開啟瀏覽器預覽，效果如圖所示

在head中引入jquery檔案，如圖所示

然後在body最下面寫將要執行的操作，在script中建立點選事件

$().click(function(){})；$() 括號內填寫將要新增效果的物件，如圖所示

div由引號包含，表示對div實行操作，滑鼠點選div時，當前的物件在3秒內向右移動500px；新增marginLeft時，第二個單詞要大寫，如圖所示

滑鼠點選div後，div向右移動500px，div移動到500px後，如果想要將其再自動返回原始位置，就需要再新增返回的命令，如圖所示，div執行完第一個操作後，繼續執行第二個操作，返回原始位置

兩次的執行操作都是針對同一個物件，可以新增在一起寫，如圖所示