JQuery使用JSON處理資料用陣列

不知道資料甚麼時後會連結失效，再此做紀錄


http://hayageek.com/examples/jquery/foreach/index.php

[JQuery]使用JSON格式做比對url，有重覆即取代較新參數

以下資料為function，可直接使用

//檢查url裡面是否有包含get_val，有的話則替代，沒有的話則加入
//url: 舊有url,如: a=1&b=2&c=3...等
//get_val: 新參數，比對舊參數是否有一至的參數，如a=2,b=4...等，也支援出參數如a=2&b=3&c=4
function page_check(url, get_val) {
  var get_url_array;
  var get_array;
  var get_array_finish = '{"url_get":[';

  var match_first_array;
  var match_array;
  var match_array_finish = '{"match_get":[';

  //使用二維陣列處理
  //舊傳值處理
  if(url.match('&') != null) {
    //多筆處理，丟入JSON處理
    get_url_array = url.split('&');
    for(var i = 0 ; i < get_url_array.length ; i++) {
      get_array = get_url_array[i].split("=");
      if( (i+1) == get_url_array.length) {
        //最後一筆不加逗號
        get_array_finish += '{"name":"'+get_array[0]+'","val":"'+get_array[1]+'"}';
      } else {
        get_array_finish += '{"name":"'+get_array[0]+'","val":"'+get_array[1]+'"},';
      }
    }
  } else {
    //單筆處理，丟入JSON處理
    if(url != '') {
      get_array = url.split("=");
      get_array_finish += '{"name": "'+get_array[0]+'","val":"'+get_array[1]+'"}';
    }
  }

  get_array_finish += ']}'; //JSON字串結尾
  obj = JSON.parse(get_array_finish); //JSON格式轉換成陣列

  //新參數轉JSON數據
  //判斷是否有兩個以上
  if(get_val.match('&') != null) {
    match_first_array = get_val.split('&');
    //有
    for(var i = 0 ; i < match_first_array.length ; i++) {
      match_array = match_first_array[i].split("=");
      //if(match_array[0] != '') {//若不為空值，則可寫入進JSON
        if( (i+1) == match_first_array.length) {
          //最後一筆不加逗號
          match_array_finish += '{"name":"'+match_array[0]+'","val":"'+match_array[1]+'"}';
        } else {
          match_array_finish += '{"name":"'+match_array[0]+'","val":"'+match_array[1]+'"},';
        }
      //} //if(match_array[0] != '') {//若不為空值，則可寫入進JSON
    } //for(var i = 0 ; i < match_first_array.length ; i++) {
  } else {
    //沒有
    if(get_val != '') {
      match_array = get_val.split("=");
      match_array_finish += '{"name": "'+match_array[0]+'","val":"'+match_array[1]+'"}';
    }
  }
  match_array_finish += ']}'; //JSON字串結尾
  obj_match = JSON.parse(match_array_finish); //JSON格式轉換成陣列

  //修改陣列內的資料
  var edit_status = false; //判斷修改狀態，有相同值則為true
  //for(var key in get_array_finish) { //列出陣列
  for(var j=0; j< obj.url_get.length; j++) {
    for(var k=0; k< obj_match.match_get.length; k++) {
      //比對是否有重覆資料
      if(obj.url_get[j].name == obj_match.match_get[k].name) {
        obj.url_get[j].val = obj_match.match_get[k].val;
        delete obj_match.match_get[k].name; //有修改過就將名字數據刪除
        edit_status        = true;
      }
    } //for(var k=0; k< obj_match.match_get.length; k++) {
  } //for(var j=0; j< obj.url_get.length; j++) {

  var re_str = ''; //要回傳的連結字串
  if(obj.url_get.length > 0) { //確定非空值
    for(var j=0; j < obj.url_get.length; j++) {
      if(obj.url_get[j].name != '') {
        re_str += "&" +obj.url_get[j].name + "=" +obj.url_get[j].val;
      }
    } // for(var key in get_array_finish) {
  } //if(get_array_finish != '') {

  //判斷新連結參數，若有name不為空的字串，則加入回傳字串
  for(var k=0; k < obj_match.match_get.length; k++) {
    if(obj_match.match_get[k].name != undefined) {
      re_str += "&" +obj_match.match_get[k].name + "=" +obj_match.match_get[k].val;
    }
  }
  //判斷後加字串

  if(edit_status == false) {
    re_str += "&" +   match_array[0] + "=" +  match_array[1];
  }

  //參考:
  // http://blog.xuite.net/ahdaa/blog1/31825228-%5BJavaScript%5D%E5%8F%96%E5%BE%97%E7%94%A8get%E5%82%B3%E9%81%9E%E4%B9%8B%E7%B6%B2%E5%9D%80%E5%88%97%E8%B3%87%E8%A8%8A(Query+String)

  //比對資料並判斷更新、新增
  return re_str;
}

紀錄Sublime Text 2的使用套件

先安裝每個套件要安裝時，所要使用的搜尋安裝外掛套件

1. Package Control
使用win7的電腦時，按下【ctrl + `】跳出命令列，貼入以下的指令碼即可安裝，安裝完重開編輯器

import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

參考安裝路徑: Package Control

• 開始安裝套件時，win7要按下【ctrl + shift + p】會跳出內部可使用的套件，再此畫面輸入【install package】即會有相關指令碼出來(像linux)，選第一行後(用鍵盤選)，就會跳出套件搜尋的列表(同畫面)，接著輸入套件名稱就可以開始安裝囉

2. emmet

安裝完後，針對不同的指令可以快速產生相對的完整行編碼，最常用的就是輸入input後按下【tab】鍵，一行html碼就出來了

參考資料:  emmet


3. Alignment
自動幫程式排版，預設是針對 = 去做調整，指令是選取好要排版的程式，選好按下【ctrl + alt + a】，會自動依 = 將程式做整理

整理前:


整理後:


= 後的空格是預設沒動，可手動再排一下



預設指令設定可在 Preferences > Package Settings > Alignment > Settings – Default 去看囉!

PHP PDO設定方式

由於PHP在5.0之後有新式物件化的資料庫連結方式

官網介紹: https://php.net/manual/en/book.pdo.php

之所以會要開始學習新的連結方式，主要是因為避免SQL Injection的攻擊，也聽說在PHP6會強制使用PDO處理，所有的myql_相關函式會被停

用舊式的PHP-MYSQL連結，需要再加上mysql_real_escape_string() 來濾掉特殊字元避免攻擊，卻會讓程式整個變的很繁雜

下面列出PDO操作資料庫的函數

連線
PDO連線方式後，是以物件來操作對應，在程式面可以此區分操作功能

參考資料:
https://php.net/manual/zh/ref.pdo-mysql.connection.php


執行資料庫語法


PDO::exec($sql) 

回傳受影響的資料庫列數，如使用INSERT、UPDATE、DELETE影響資料庫內容的SQL語法，會回傳數字


PDO::query($sql) 

執行在()中的SQL語法，與PHP-MYSQL中的mysql_query()屬同型function，回傳result set的SQL操作，需給執行回傳的值一個參數，以方便做陣列輸出

PDO::fetch() 

與mysql_fetch_array同樣效果的語法，若sql語法回傳不只一筆資料，需要以迴圈語法做處理

用法:
$data = $rs->fetch(); 

PDO::fetchAll()
將sql語法內容先全部存入到指定參數陣列，因此在此函數中不需要用迴圈處理，需要迴圈處理的是參數陣列

用法:
$data_array = $rs->fetchAll();


PDO::fetchAll(PDO::FETCH_ASSOC)
加入FETCH_ASSOC，可將存出來的陣列作關聯式對應，可去除掉原本會呼叫出來的陣列位置對應數據

如:
未加入: [a]=>1, [0]=>1, [b]=>2,[1]=>2
加入後: [a]=>1, [b]=>2

識情況加入，可合併應用PDO其它函數中

以上基本資料庫語法操作，若要進一步用到query最佳化及防範SQL injection的攻擊，需要開始瞭解以下的函式

Prepare，用法很多種，在此依官網測試了兩種方式，需注意代入的數只能用在條件式
官網連結:https://php.net/manual/en/pdo.prepare.php

官網範例

/* Execute a prepared statement by passing an array of values */
$sql = 'SELECT name, colour, calories
    FROM fruit
    WHERE calories < :calories AND colour = :colour';
$sth = $dbh->prepare($sql, array(PDO::ATTR_CURSOR => PDO::CURSOR_FWDONLY));
$sth->execute(array(':calories' => 150, ':colour' => 'red'));
$red = $sth->fetchAll();
$sth->execute(array(':calories' => 175, ':colour' => 'yellow'));
$yellow = $sth->fetchAll();

使用以上方式，在prepare後加入了sql語法，並增加array(PDO::ATTR_CURSOR => PDO::CURSOR_FWDONLY)這段，可在execute時，使用索引值指定內容

若不加入array(PDO::ATTR_CURSOR => PDO::CURSOR_FWDONLY)，差別在於語法的條件內容可用?代替，在execute是根據陣列位置放值

官網範例

/* Execute a prepared statement by passing an array of values */
$sth = $dbh->prepare('SELECT name, colour, calories
    FROM fruit
    WHERE calories < ? AND colour = ?');
$sth->execute(array(150, 'red'));
$red = $sth->fetchAll();
$sth->execute(array(175, 'yellow'));
$yellow = $sth->fetchAll();

可從以上範例中看到，差別在於 ? 跟:colour ，嘗試過其它位置，資料表名稱、order by 條件，皆無法使用此方式代入


bind_param()

i: integer
d: double
s: string
b: a blob and will be sent in packets
是用來檢查型別的函式，使用方式如下
bind_param('is',$id,$content);


參考資料:
http://sofree.cc/github-gist/
http://pjchender.blogspot.tw/2015/03/blogger.html

PDO (PHP Data Object) 學習:
http://blog.yam.com/csylvia/article/72659816

PHP MySQL資料庫新增/修改/刪除操作:
http://www.coding5.com/coding5/works?transno=1000000008

Insert Data Into MySQL Using MySQLi and PDO:
http://www.w3schools.com/php/php_mysql_insert.asp

PHP+MYSQL 大量 INSERT 到資料庫的效能很差 ?
http://www.pigo.idv.tw/archives/2792

PHP執行多個命令列背景程式，並且用事件驅動方式獲得子行程的訊息
http://www.pigo.idv.tw/archives/2796

Php: PHP / MySQL同時多個查詢
http://codex.wiki/question/1305339-9953/

使用PDO存取資料庫(讀取、查詢、修改、更新)
連結

PHP中的特殊字元處理

在一個case中有寫到電子報功能，內容是使用編輯器

後來發生了資料偶爾可以寫資料庫，偶爾不行

在檢查寫不進資料庫的電子報內容後，發現了【跳脫字元】的存在

在電子報標題、內容POST到處理資料庫的程式後，在寫入資料庫前可使用『addslashes』的PHP function

這個addslashes可以處理跳脫字元，比如說單引號，自動在單引號前加入\ (反斜線)

讓跳脫字元可以寫入資料庫

當然以上的方法不建議使用，會被使用SQL Injection攻擊

參考資料:

• https://tw.knowledge.yahoo.com/question/question?qid=1009121600978
• http://seanphpbook.blogspot.tw/2012/11/php-magicquotesgpc-addslashesstripslash.html
• http://fu-ming.tw/blog/?p=187
• http://note.tc.edu.tw/624.html

筆記: jquery的select選擇方式

jquery 提供 selector 的機制，類似 CSS 抓取 DOM 元素的方式，針對網頁元素進行操控，選擇器背後的原理是 jQuery 寫定的 Regular Expression 方法，所以每次選擇都要跑一次 Regular Expression ，對於效能也有一定的影響。因此，本篇文章紀錄 jQuery 選擇器的相關操作方式，後面還有談到效能的議題。

CSS Selector vs jQuery Selector 比較

許多 jQuery selector 的概念其實是從 CSS selector 過來的，以下有幾個範例：

取得第一個找到的 li 標籤元素
$(“li:first"); //jQuery
li:first {} //CSS

取得其 class 屬性值為class1 的 input元素     $(“input[class='class1']“); //jQuery
input[name='newsletter'] {} //CSS

取得id為container之元素其內部的所有超連結$(‘#container a’);  //jQuery
#container a {} //CSS

取得div父元素其下所有的p子元素$(“div > p");  //jQuery
div > p {} //CSS

基本選擇器

jQuery 有三個最重要的選擇器，如下：

$(“element”)：選出所有該 element 的節點

• 例如：$(“p”) ：選出所有
  的節點

$(“#divId”)：選出所有

的節點

$(“.divClass”)：選出所有

的節點

階層選擇器

階層屬性有以下四種：

• 物件中的某一種物件(空白)：$(‘#div1 p’).addClass(‘d1′);
• 物件中的所有物件(*)：$(‘#div1 *’).addClass(“d1);
• 之後符合條件的第一個(+)：$(‘#div1 + p’).addClass(‘d1′);
• 之後符合的所有(~)：$(‘#div1 ~ p’).addClass(‘d1′);

可進來這裡觀看階層選擇器範例：http://jsfiddle.net/divaka/fuHFD/1/

子元素選擇器

• $(“ul li:nth-child(2)"); //第 2 個節點
• $(“ul li:nth-child(odd)"); //所有奇數子節點
• $(“ul li:nth-child(3n + 1)"); //1, 4, 7 … 個節點
• $(“div span:first-child") //所有的div元素的第一個子節點
• $(“div span:last-child") //所有的div元素的最後一個節點
• $(“div button:only-child") //所有只有一個 button 子節點的 div​​​​​​​​​​​​​​​​​​

屬性過濾選擇器

• $(“div[id]“); //選擇所有含有id屬性的div元素
• $(“input[name='Jack']“); //選擇所有的name屬性等於’Jack’的input元素
• $(“input[name!='Jack']“); //選擇所有的name屬性不等於’Jack’的input元素
• $(“input[name^='J']“); //選擇所有的name屬性以’J’開頭的input元素
• $(“input[name$='K']“); //選擇所有的name屬性以’k’結尾的input元素
• $(“input[name*='ck']“); //選擇所有的name屬性包含’ck’的input元素
• $(“input[id][name$='man']“); //可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery 自訂選擇器(Custom Selectors)

• :even：找出結果集中其偶數的 elements (2,4,6,8…)
• : odd： 找出結果集為奇數(單數)的 elements (1,3,5,7…)
• :eq(N), :nth(N)：找出選擇結果集 index 為 N 的 elements
• :gt(N)：找出結果集中索引大於 N 的 elements
• :lt(N)：找出結果集中索引小於 N 的 elements
• :first：找出結果集中的第一個 element (相當於 eq(0) 或者 nth(0))
• :last：選擇結果集中的最後一個 element
• :parent：在結果集中選擇 elements，它必須具有子 elements(包括文本節點)(跟 :empty 相反)
• :contains(‘test’)：選擇結果集中包含有指定文本的 elements
• :has(selector)：找出結果集中至少出現一次某 selector 的元素
• :not(selector)：反選取指定的 selector

可視 (visibility) 選擇器

• :visible 選擇所有可見(visible)的 elements
  • display 屬性的值等於 visible、block、inline
  • visibility 屬性的值等於 visible
• :hidden 選擇所有隱藏(visible)的 elements
• display 屬性的值等於 none
• visibility 屬性的值等於 hidden

表單選擇器(Form Selectors)

• :input 選擇所有表單 elements(input, select, textarea, button)
• :text 選擇所有 (type="text").
• :password 選擇所有 (type="password").
• :radio 選擇所有 (type="radio").
• :checkbox 選擇所有 (type="checkbox").
• :submit 選擇所有 (type="submit").
• :image 選擇所有 (type="image").
• :reset 選擇所有 (type="reset").
• :button 選擇所有按鈕 (type="button").
• :file 選擇所有 .
• :hidden 選擇所有隱藏的表單元素

表單狀態選擇器 (Form Selectors Filter)

• $(“input:enabled"); //選擇所有的可操作的表單元素
• $(“input:disabled"); //選擇所有的不可操作的表單元素
• $(“input:checked"); //選擇所有的被checked的表單元素
• $(“input#test:checked"); //選擇所有的被checked的 input id=test 表單元素
• $(“select option:selected"); //選擇所有的select 的子元素中被selected的元素​​​​​​​​​

選擇器效能 (Performance) 議題

在特殊的環境中 (Ex. 大型系統，手機 App 等)情況，效能會變成一個很重要的議題，所以平常寫 jQuery Selector 把握幾個重點，就可以大幅加速網頁的運作效率，如下：

減少不必要的選擇器例如對於 #id2 #id1 或 tag#id1 還不如直接寫 #id1 就好。因為文件中的 id 是唯一的，前面的父元素 #id2 沒有任何必要性。

多用 ID 選擇 (#id) 器來取代其他選擇器：因為 id 選擇器可以直接呼叫 Javascript 的 getElementById() 直接定位找出該 HTML 元素，效率最高。

盡量少用 Class 選擇器：class 選擇器必須解析整份文件，效能很差。但可以配合 tag, id 等組合的選擇器，將範圍縮小後，便能更有效率的使用 class 選擇器

使用 parent>child 取代 parent child 

前者是父子關係。而後者是所有後代的關係，會遞迴處理子節點和子節點所有的子節點，和其後的所有子節點。

將選取出來的元素快取到記憶體中如果元素會重複使用到，而且選取出來的結果不會產生變化時，盡量將已經選取出來的元素儲存到變數中，避免每次使用時都必須再選取一次、再重新解析一次文件。

ps. 最常用的應該是：$this = $(this);
 

盡量使用 Javascript 原生選取方法
如果你只需要選取 #id1，不需要進行複雜的 jQuery selector 選取模式，盡量使用 JS 原生方法，例如 getElementById() 和 getElementByTagName() 取代 jQuery ，例如想要取用 id=element1 這個 div，可以使用以下語法：

1

2


var elem= document.getElementById("element1");

$(elem).css("color","blue");

選擇器技巧

另外補充幾個選擇器技巧：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15


//確認有選取到元素

if ($("#someDiv").length) { 

//hooray!!! it exists... 

 

}​

 

 

//檢查頁面當中是否有隱藏元素

if($(element).is(":visible") == "true") {

//The element is Visible

}​

 

 

//取得最鄰近的父元素

$("#searchBox").closest("div");​

來源連結: 點我