[jQuery 權威指南（第二版）]閱讀筆記-p11(範例1-3)
[jQuery 權威指南（第二版）]閱讀筆記-p11(範例1-3)
資料來源:http://www.java1234.com/a/javaziliao/shuji/2014/1206/3343.html
功能:
01.jQuery 透過元件id(#名稱)，建立元件事件「 $(“#btnSubmit”).click(function() {});」
02.當jQuery執行事件時，改變元件的css設定，藉此達到元件從隱藏狀態變成顯示狀態
03.jQuery 透過元件id(#名稱)，抓取輸入元件值
04.jQuery 透過元件id(#名稱)，在div元件填入一串中文字並斷行<br>顯示
關鍵技術(閱讀心得):
01.在head中利用CSS指定div樣式
.iframe{ border:solid 1px #888;font-size:13px;}
.title{ padding:6px;background-color:#EEE;}
.content{ padding:8px;font-size:12px;}
.tip{ background-color:#EEE;display:none;
font-size:12px;padding:8px;}
.txt{ border:solid 1px #888;}
.btn{ border:solid 1px #888;width:60px;}
.w260{ width:260px;}
備註:
01. 點+名字=指定元件的class
02.在head載入jQuery函示庫
<script src=”JScript/jquery-1.8.2.min.js” type=”text/javascript”></script>
備註:
同一層相對目錄
03.在head寫$(function() { });函數
備註:無名函數當網頁載入後立即執行
04.jQuery 透過元件id(#名稱)，抓取文字框內容
var oTxtValue = $(“#Text1”).val();
05.jQuery 透過元件id(#名稱)，抓取radio是否有選擇
var oRdoValue = $(“#Radio1”).is(“:checked”) ? “男” : “女“;
06.jQuery 透過元件id(#名稱)，抓取checkbox是否有選擇
var oChkValue = $(“#Checkbox1”).is(“:checked”) ? “已婚” : “未婚“;
07.jQuery 透過元件id(#名稱)，改變元件的css設定，藉此達到元件從隱藏狀態變成顯示狀態
$(“#Tip”).css(“display”, “block”);
08.jQuery 透過元件id(#名稱)，div填入一串中文字並顯示
$(“#Tip”).html(oTxtValue + “<br>” + oRdoValue + “<br>” + oChkValue);
範例程式碼：
|
<!DOCTYPE html> <html> <head> <title>控制jQuery物件</title> <script language=”javascript” type=”text/javascript” src=”Jscript/jquery-1.8.2.min.js”></script> <style type=”text/css”> .iframe{ border:solid 1px #888;font-size:13px;} .title{ padding:6px;background-color:#EEE;} .content{ padding:8px;font-size:12px;} .tip{ background-color:#EEE;display:none; font-size:12px;padding:8px;} .txt{ border:solid 1px #888;} .btn{ border:solid 1px #888;width:60px;} .w260{ width:260px;} </style> <script type=”text/javascript”> $(function() { $(“#btnSubmit”).click(function() { var oTxtValue = $(“#Text1”).val(); //獲取文本框的值 var oRdoValue = $(“#Radio1”).is(“:checked”) ? “男” : “女“; //獲取單選框按鈕值 var oChkValue = $(“#Checkbox1”).is(“:checked”) ? “已婚” : “未婚“; //獲取核取方塊按鈕值 $(“#Tip”).css(“display”, “block”); $(“#Tip”).html(oTxtValue + “<br>” + oRdoValue + “<br>” + oChkValue); //顯示提示文本元素 }); }); </script> </head> <body> <div class=”iframe w260″> <div class=”title”>請輸入如下資訊</div> <div class=”content”> 姓名：<input id=”Text1″ type=”text” class=”txt”/><br /> 性別：<input id=”Radio1″ name=”rdoSex” type=”radio” value=”男” />男 <input id=”Radio2″ name=”rdoSex” type=”radio” value=”女” />女<br /> 婚否：<input id=”Checkbox1″ type=”checkbox” /><br /><br /> <input id=”btnSubmit” type=”button” value=”提 交” class=”btn” /><br /><br /> </div> <div id=”Tip” class=”tip”></div> </div> </body> </html> |