[jQuery 權威指南（第二版）]閱讀筆記-p11(範例1-2)
[jQuery 權威指南（第二版）]閱讀筆記-p11(範例1-2)
資料來源:http://www.java1234.com/a/javaziliao/shuji/2014/1206/3343.html
功能:
01.單純利用jQuery在網頁載入同時，把放在body內的div填入一串中文字並顯示
02.建立元件事件函數
03.增加div的class數量，藉此套用新的css來改變div的外觀
04.當執行事件時，改變元件的css設定，藉此達到元件從隱藏狀態變成顯示狀態
關鍵技術(閱讀心得):
01.在head中利用CSS指定div樣式
.iframe{ border:solid 1px #888;font-size:13px;}
.title{ padding:6px;background-color:#EEE;}
.content{ padding:8px 0px;font-size:12px;
text-align:center;display:none;}
.curcol{ background-color:#CCC}
備註:
01. 點+名字=指定元件的class
02.border:solid 1px #888;-邊框寬度和顏色
03.padding:8px 0px;-上下內距都是 8px 而左右內距都是 0px
04.font-size:12px;-字型大小
05.text-align:center;-文字至中
02.在head載入jQuery函示庫
<script src=”JScript/jquery-1.8.2.min.js” type=”text/javascript”></script>
備註:
同一層相對目錄
03.在head寫$(function() { });函數
備註:無名函數當網頁載入後立即執行
04.使用jQuery指定div內容
$(“.content”).html(“您好！欢迎来到jQuery的精彩世界。“);//指定顯示文字但吽於還未改變css屬性所以沒有顯示
05.使用jQuery 撰寫div的click事件
$(“.title”).click(function() { });
06.使用jQuery增加本身div的class數量
$(“.title”).click(function() {
$(this).addClass(“curcol”);//所以具有title的div元件又多了一個curcol的class參數,藉此就可以在套用一個css設定改變ui
});
07.使用jQuery改變目前div的隔壁元件的css屬性
$(“.title”).click(function() {
$(this).addClass(“curcol”);//所以具有title的div元件又多了一個curcol的class參數,藉此就可以在套用一個css設定改變ui
$(this).next(“.content”).css(“display”, “block”);
});
|
<!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;} .title{ padding:6px;background-color:#EEE;} .content{ padding:8px 0px;font-size:12px; text-align:center;display:none;} .curcol{ background-color:#CCC} </style> <script type=”text/javascript”> $(function() { $(“.content”).html(“您好！欢迎来到jQuery的精彩世界。“); $(“.title”).click(function() { $(this).addClass(“curcol”); $(this).next(“.content”).css(“display”, “block”); }); }); </script> </head> <body> <div class=”iframe”> <div class=”title”>标题</div> <div class=”content”></div> </div> </body> </html> |