[jQuery 權威指南（第二版）]閱讀筆記-p11(範例1-3) – jashliao部落格

[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);

 

範例程式碼：