捐血一袋救人一命

捐血救人
江蘇拙政園

江蘇 拙政園

全家福

日本 和歌山城

賞楓之旅

千燈 夕照

水鄉千燈

蘆洲 微風運河

破曉時分

義大利 威尼斯 里亞托橋

浪漫水都

2013年7月25日 星期四

初學jQuery 1-2

下午6:24  ,  2 comments

首先我們先理解一下 jQuery 的設計理念，來進行學習。

一個網頁要產生動態效果，勢必要針對各標籤、文字、圖片等做動態處理。

那麼，要怎麼在網頁中，找到我們要處理的標籤、文字、圖片呢？

這就要靠 jQuery Selector 選擇器，

在傳統 JavaScript要取得某個元素內容，可以用 ID 來找，指令如下

getElementbyId("#id")

要取得標籤(Tag)必須使用

getElementsbyName("name")

至於要取得Class(類別)？抱歉，JavaScript 雖然有 getElementsbyClassName ，但是 IE 不支援(在某書裡提到 CSS 中，ID 與 Class 的區別在於一個可以用 JavaScript取用，一個不行，這樣的講法太不負責任…，就算 IE 不支援 byClassName，你還是可以用 JavaScript 來取得，只是過程就很繁瑣…)

改用 jQuery 只要寫

$("#id") 或 $(".class") 或 $("tag") ，引號裡面的用法與 CSS 一致，不用再記憶一大堆指令。

而且，你仔細看，getElementsbyName，多了一個 s ，表示複數，也就是說用這個指令，你會取得一大堆不相干的標籤，你還得再寫判斷式去篩選。

而 jQuery 多種 Selector 還可以組合運用，把不必要的元素篩掉。

所以，我們接下來介紹 jQuery Selector ！！

先來三個基本型

$("name") 這裡面的 name ，不是只有 HTML 語法中的 Tag，你也可以自己定義標籤，然後用這個選擇器來找出正確的元素。
例如： <contact>John</contact>
          $("contact")
           <a href=”http://www.google.com.tw”>Google</a>
           $("a")
要注意的是，網頁裡可能會有多個相同標籤
$(".class") 這個就是指標籤裡的 class 名稱
例如：<input type="text" name="firstname" class="contact">
          <input type="text" name="lastname" class="contact">
          $(".contact")
要注意的是，網頁裡可能會有多個相同 Class (類別)
$(#id") 這裡指的就是標籤裡的 id 名稱
例如：<input type="text" name="username" id="username">
          <input type="password" name="passwd" id="passwd">
          $("#username") 指的就是 username 欄位
          $("#passwd") 指的就是 passwd 欄位
在HTML裡定義 ID 不可重覆，所當一個頁面裡有兩個以上相同的 ID ，會造成難以預測的結果(不動作或誤動作)

接下來再進階一點點

$("name, .class, #id") 這個Selector 只要符合任一 tag 或 class 或 id，就會被選擇到，中間以逗號區隔開
$("name .class #id") 這個Selector是指所有的 tag以及class和id 都要同時具備才會被選取
PS.每個 Tag 之間不要留空格！我是為了容易看清楚才留空格

Read More

初學jQuery 1-1

下午3:34  ,  No comments

jQuery是什麼

講白了，jQuery就是一堆JavaScript函式庫，美其名叫做Framwork，只是jQuery將JavaScript語法、指令簡化。
網路上可以找到一大堆各式各樣的JavaScript Framework，例如：bootstrap、Kendo、Ext JS、…實在太多了，族繁不及備載…

為什麼要用jQuery

  1. 因為jQuery幫你把你想做的事都預先寫好了函式庫，你只要簡單幾個指令就可做到本來一大串指令才能做到的事。
    例如：讀取/設定表單欄位值、新增/移除表單元素(text、checkbox、radio、select、…)、設定/移除某標籤、類別、ID，來套用CSS樣式、抓取滑鼠鍵盤動作、顯現/隱藏元素、改變元素屬性值，例如座標位置、或大小寬高、設定觸發事件、執行傳值給伺服器端程式、接收伺服器資訊…
  2. 針對不同的瀏覽器、版本處理，讓你設計的網站能相容各家瀏覽器，能呈現一致的效果
  3. 針對不同的硬體平台，也幫你處理的好好的
  4. 常用的特效及功能都幫你處理好了

該如何下手學習 jQuery ？

建議各位使用以下兩個網站來進行學習

  1. http://jsfiddle.net/
  2. http://codepen.io/

jsfiddle.net 在使用前，必須先申請帳號，然後 Create a New Fiddle

就可以開始進行練習，左邊長條形區域，可以讓你選擇你要使用的 jQuery 版本，請直接選最新版

它也提供其他 JavaScript Framworks

右邊四個窗框

HTML CSS/SCSS
JavaScript Result
 
你可以直接在 HTML 窗框中輸入 HTML 語法，不需要輸入 <html><head><title></title><body></body></html>
 
在JavaScript窗框中，就直接輸入 JavaScript/jQuery 程式碼，不需要再輸入<script></script>
 
CSS 的部份就直接填 CSS 語法，如果你想用 SCSS，請在左邊長條形區域的 Languages 裡選擇 SCSS
當你輸入完畢之後，就可以按下，頁面上方的 Run，就可以在 Result 窗框看到結果。
  1. 確定滿意後，你就可以按下 Save 存檔，有任何修改，可以按下 Update更新存檔
  2. 如果你要利用現有的存檔，改寫不同功能的程式，可以按 Fork，它會幫你把現有的內容複製成一份新的
  3. 在Dashboard 可以看到所有你存檔過的網頁，也可以產新全新空白的 Fiddle
  4. 你也可以在網路上搜尋到別人用Fiddle 寫的網頁，如果覺得不錯，或是需要修改，也可以修改，然後存到你的帳號下
  5. 按下 Share，就可以取得分享這個網頁的連結
至於Codepen 用法類似 jsFiddle，
相異處：
  1. jQuery 的部份，你必須自己在 HTML 窗框中寫入引用 CDN 的 jQuery 檔案，例如：
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  2. 可以不用申請帳號，但如果不申請帳號，就不能存到你的帳號下
  3. 這裡不用按Run，一打好就會自動執行

Read More

2013年7月21日 星期日

使用 jQuery 新增(append) 移除(remove) 表單元素(Element)

上午10:49  ,  1 comment

在移除元素時，記得執行 Renew ID 的動作，因為如果移除中間的元素，會造成 ID 空號，

以 jQuery 記算元素數量來產生新 ID 時，會造成 ID 重覆！

原始 Sample 如下網址，在新增多個欄位之後，任意刪除中間的欄位，再次新增欄位，就可發現 ID 重覆

http://jsfiddle.net/qBURS/2/

 

修改後的版本如下，其實就是在移除欄位時，重新設定所有元素的 ID 屬性

http://jsfiddle.net/tomboliu/qBURS/571/

 

簡略一點的範例：

http://jsfiddle.net/tomboliu/7qcX8/

Read More

常用日期相關函式

清晨7:01    No comments

// mktime()            傳入 [時, 分, 秒, 月, 日, 年]，傳出 Timestamp
// getdate()        傳出今日的星期代號(0→星期日、1→星期一、2→星期二、3→星期三、4→星期四、5→星期五、6→星期六)
// date()            傳入日期、時間格式字串，格式化輸出日期、時間資訊
// strtotime()        傳入日期描述，傳出 Timestamp

1.用date()分別取得年、月、日，然後在需要加減的年、月、日、時、分、秒，做加減，並代入 mktime，即可求
  該日期的 Timestamp，最後再用一次 date() ，將日期輸出為指定格式即可
2.使用 strtotime() 說明欲取得的日期，然後使用 date() 將 strtotime() 輸出的 Timestamp 轉換成指定格式即可

  例如：找出昨天的日期

   1:  date("Y-m-d" , mktime(0, 0, 0, date("m"), date("d")-1, date("Y")))


   2:  date('Y-m-d', strtotime("yesterday"))









PS. strtotime 裡的大寫有時會輸出錯誤結果，最好都以小寫來處理。

Read More

2013年7月4日 星期四

MySQL Replication

下午4:14    No comments

 

Master Server Configuration

server-id=伺服器代號(數字，範圍介於 1~232，每台伺服器代號必須唯一)

--binlog-do-db=資料庫名稱

使用參數，要注意使用的是 Statement-based 或是 Row-based 的 log 格式

在 statement-based 格式下，Replication 只會發生在 USE 資料庫與 --binlog-do-db 指定的資料庫相同，如果 USE 資料庫與 --binlog-do-db 資料庫不同，即使指令異動 --binlog-do-db 指定的資料庫，也是不會被 Replication 的

例如：

在 Statement-based logging format 下會被 Replication
--binlog-do-db=db_a;
USE db_a;
UPDATE db_b.table_a SET field_1 = filed_1 + 100;

在 Statement-based logging formate 下不會被 Replication
--binlog-do-db=db_a;
USE db_b;
UPDATE db_a.table_a SET field_1 = filed_1 + 100;

也就是說 在 statement-based logging format 下，指定 --binlog-do-db ，會受 USE 指令影響，

USE 與 --binlog-do-db 指定相同的 DB，才會被 Replication

但是在 Row-based 時，就不管 USE 哪個資料庫

只要是異動 --binlog-do-db 指定的資料庫，就會被 Replication

例如：

在 Row-based logging format 下會被 Replication
--binlog-do-db=db_a;
USE db_b;
UPDATE db_a.table_a SET field_1 = filed_1 + 100;

在 Row-based logging formate 下不會被 Replication
--binlog-do-db=db_a;
USE db_a;
UPDATE db_b.table_a SET field_1 = filed_1 + 100;

再來

如果在 Statement-base 下， USE 資料與 --binlog-do-db 指定的資料庫相同，且同時異動多個資料庫時，都會被 Replocation

例如：

在 Statement-based logging format 下會被 Replication
--binlog-do-db=db_a;
USE db_a;
UPDATE db_a.table_a SET field_1 = 100, db_b.table_b SET field_2 = 50;

但是如果是在 Row-based 下，上述指令中，只有 db_a.table_a 會被 Replication

當 Master Server 出問題時，要切換到 Slave Server ，可以使用 CHANGE MASTER TO 指令

要注意的是，使用 CHANGE MASTER TO / RESET SLAVE 指令時，必須先停止Slave Server 的 Replication，請使用 STOP SLAVE 指令

Read More
訂閱： 文章 (Atom)