[jQuery 權威指南（第二版）]閱讀筆記(範例1-4)
[jQuery 權威指南（第二版）]閱讀筆記(範例1-4)
資料來源:http://www.java1234.com/a/javaziliao/shuji/2014/1206/3343.html
功能:
01.jQuery 透過元件class(.名稱)，建立元件事件「 $(“.defcol”).click(function() {});」
02.類別xor運算「新增/刪除」效果，達到ui閃爍切換
關鍵技術(閱讀心得):
01.在head中利用CSS指定div樣式
.iframe{ border:solid 1px #888;font-size:13px;}
.defcol{ padding:6px;background-color:#EEE;}
.curcol{ padding:6px;background-color:#CCC;color:#FFF}
備註:
01. 點+名字=指定元件的class
02.在head載入jQuery函示庫
<script src=”JScript/jquery-1.8.2.min.js” type=”text/javascript”></script>
備註:
同一層相對目錄
03.在head寫$(function() { });函數
備註:無名函數當網頁載入後立即執行
04.jQuery 透過toggleClass函數達到類別的xor效果
|
<!DOCTYPE html> <html> <head> <title>jQuery事件的链式写法</title> <script src=”JScript/jquery-1.8.2.min.js” type=”text/javascript”></script> <style type=”text/css”> .iframe{ border:solid 1px #888;font-size:13px;} .defcol{ padding:6px;background-color:#EEE;} .curcol{ padding:6px;background-color:#CCC;color:#FFF} </style> <script type=”text/javascript”> $(function() { $(“.defcol”).click(function() { $(this).toggleClass(“curcol”); }); }); </script> </head> <body> <div class=”iframe”> <div class=”defcol”>标题</div> </div> </body> </html> |