Zi 字媒體
2017-07-25T20:27:27+00:00
[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元件填入一串中文字並斷行顯示
關鍵技術(閱讀心得):
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函示庫
備註:
同一層相對目錄
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 + “” + oRdoValue + “” + oChkValue);
範例程式碼：
控制jQuery物件
src=”Jscript/jquery-1.8.2.min.js”>
.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;}
$(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 + “” + oRdoValue + “” + oChkValue); //顯示提示文本元素
});
});
請輸入如下資訊
姓名：
性別：男” />男
女” />女
婚否：
提 交” class=”btn” />
寫了
5860316篇文章，獲得
23313次喜歡