PIXNET Logo登入

麥克的學習紀錄

跳到主文

主要是記錄自己在工作和程式學習上的歷程 也給自己一個可查閱的地方^^

部落格全站分類:數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 11月 11 週一 201309:36
  • justfont 白金版回應區

我是 justfont 的開發團隊
如果您對於 justfont 白金版APP有任何問題
歡迎您在這裡留言
我會儘速回應並處理的
(繼續閱讀...)
文章標籤

miggo 發表在 痞客邦 留言(12) 人氣(205)

  • 個人分類:
▲top
  • 5月 08 週三 201309:36
  • 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”) :選出所有 <p> </p>的節點

$(“#divId”):選出所有 <div id=”divId”></div> 的節點

$(“.divClass”):選出所有 <div class=”divClass”></div> 的節點

階層選擇器

階層屬性有以下四種:
物件中的某一種物件(空白):$(‘#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 選擇所有 <input type="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. var elem= document.getElementById("element1");  

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




選擇器技巧

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



檢視原始檔複製到剪貼簿列印關於



  1. //確認有選取到元素  

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

  3. //hooray!!! it exists...   

  4. }​  

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

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

  7. //The element is Visible  

  8. }​  

  9. //取得最鄰近的父元素  

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


(繼續閱讀...)
文章標籤

miggo 發表在 痞客邦 留言(0) 人氣(323)

  • 個人分類:jquery
▲top
  • 6月 07 週四 201211:31
  • 關於人才培養問題

前幾天中午吃飯時,一起和幾個創業者聊天
大家其實都是一樣的感覺,好的人才真難找
創業夥伴更難
不過我算是很幸運的,在appWorks的幫忙下
(繼續閱讀...)
文章標籤

miggo 發表在 痞客邦 留言(0) 人氣(311)

  • 個人分類:PM二三事
▲top
  • 12月 24 週五 201015:24
  • [jquery] Draggable參數說明與範例

 

很清楚的說明文章~還帶有範例!


Draggable參數說明




Draggable參數說明




以下是些有趣的範例


1.draggable 在div中,限制唯一的element,並限制拖曳類型


 網頁


 Demo



 
2.購物車類型的draggable,可點選icon加入或從購物車刪除
(繼續閱讀...)
文章標籤

miggo 發表在 痞客邦 留言(0) 人氣(6,200)

  • 個人分類:jquery
▲top
  • 11月 25 週四 201017:34
  • EC2上架設APC(Alternative PHP Cache)

本來想找文章參考的,發現好像沒人在EC2上架設
過程中遇到些問題,不過終於搞定囉
紀錄給大家參考:
PHP效能優化,選擇APC
安裝php-APC過程竟然給我出ERROR!
(繼續閱讀...)
文章標籤

miggo 發表在 痞客邦 留言(0) 人氣(494)

  • 個人分類:Linux
▲top
  • 11月 16 週二 201013:25
  • 馬雲演講

剛好有機會,在書店中看到天下雜誌「2010天下經濟論壇」馬雲的演講內容,當下就決定買了
看完後很佩服他得一些觀點和看法
找了些他的演講,有空可看看!
 
(繼續閱讀...)
文章標籤

miggo 發表在 痞客邦 留言(0) 人氣(247)

  • 個人分類:名人演講
▲top
  • 10月 14 週四 201017:53
  • openssl 批次檔 [轉載]

轉載 http://hi.baidu.com/xuhonghui126/blog/item/a32c8dceb99a5e0493457e5b.html
 
配置步驟:
(繼續閱讀...)
文章標籤

miggo 發表在 痞客邦 留言(0) 人氣(4,446)

  • 個人分類:Linux
▲top
  • 6月 04 週五 201009:51
  • .htaccess設定方法

本來想尋找設定的語法的
但找到更好的啦!
已經有人將設定介面開發好了
進去設定好,就產生想要的.htaccess內容
讚!
(繼續閱讀...)
文章標籤

miggo 發表在 痞客邦 留言(0) 人氣(358)

  • 個人分類:Linux
▲top
  • 5月 21 週五 201010:04
  • DB2 安裝 & INSTANCE設定

DB2安裝完畢後出 現




未定義環境變 數DB2INSTANCE,或該變數無效





(繼續閱讀...)
文章標籤

miggo 發表在 痞客邦 留言(0) 人氣(900)

  • 個人分類:DB2
▲top
  • 5月 11 週二 201012:44
  • [MySQL進階] Stored procedure (二) 迴圈語法

一、Stored procedure建立temporary table+While迴圈範例




delimiter
$$


CREATE
PROCEDURE myFunction()


BEGIN


        --定義變數i並給予初始值


        DECLARE i INT DEFAULT 1;


       


        --建立temporary
table


        CREATE TEMPORARY TABLE ascii_chart


        (ascii_code int, ascii_char CHAR(1));


       


        --採用while…do…end while迴圈


        WHILE (i<=128) DO


                INSERT INTO ascii_chart
VALUES(i,CHAR(i));


                SET i=i+1;


        END WHILE;


       


        select * from ascii_chart order by
ascii_code;


       


        --刪除temporary
table


        drop table ascii_chart;


END$$


delimiter
;





(繼續閱讀...)
文章標籤

miggo 發表在 痞客邦 留言(0) 人氣(28,760)

  • 個人分類:MySQL
▲top
12...6»

個人資訊

miggo
暱稱:
miggo
分類:
數位生活
好友:
累積中
地區:

熱門文章

  • (52,111)[MySQL進階] Stored procedure (一) 基本語法
  • (44,545)[Mysql基本觀念] primary Key / Index / Unique差別
  • (19,007)[Mysql進階]各Engine Type(MyISAM / InnoDB / Memory) 的特性說明
  • (6,200)[jquery] Draggable參數說明與範例
  • (4,446)openssl 批次檔 [轉載]
  • (1,986)Unicode 4byte (UCS 4)輸入方式和表示法轉換

文章分類

  • jquery (2)
  • 名人演講 (1)
  • Linux (3)
  • DB2 (1)
  • 中文編碼相關 (4)
  • 專利 (6)
  • PM二三事 (6)
  • 個人作品集 (2)
  • PHP (21)
  • MySQL (6)
  • 未分類文章 (1)

最新文章

  • justfont 白金版回應區
  • CSS Selector vs jQuery Selector 比較
  • 關於人才培養問題
  • [jquery] Draggable參數說明與範例
  • EC2上架設APC(Alternative PHP Cache)
  • 馬雲演講
  • openssl 批次檔 [轉載]
  • .htaccess設定方法
  • DB2 安裝 & INSTANCE設定
  • [MySQL進階] Stored procedure (二) 迴圈語法

最新留言

  • [20/11/04] 菜逼八 於文章「[PHP觀念]self和$this的差異...」留言:
    從別的網站的轉載看到 那邊沒有留言可以看 害我花了一個下...
  • [19/09/24] 訪客 於文章「[PHP觀念]self和$this的差異...」留言:
    結果反了啦 ...
  • [19/07/30] hi 於文章「專利迴避設計...」留言:
    想問, 假設採用專利迴避設計之後, 如果後續有人看了你的設計...
  • [19/07/30] 訪客 於文章「專利迴避設計...」留言:
    你好 如果未來其他人針對你迴避侵權過後的設計提出專利申請 然...
  • [17/09/22] 設計 於文章「[MySQL進階] Stored pro...」留言:
    常執行的SQL敘述就可以建立為「Stored procedu...
  • [17/04/28] JohnTurnbull 於文章「[PHP觀念]self和$this的差異...」留言:
    你害我看好久 XDDDD 我是被誤導的可憐新手...
  • [16/12/18] no 於文章「[PHP觀念]self和$this的差異...」留言:
    反了吧...
  • [16/08/17] 菜叫 於文章「[PHP觀念]self和$this的差異...」留言:
    小弟尚菜 看到結果正想這什麼魔術 還好有看到留言 感謝...
  • [16/07/10] 羅 於文章「[MySQL進階] Stored pro...」留言:
    謝謝分享...
  • [15/07/30] 訪客 於文章「[PHP觀念]self和$this的差異...」留言:
    結果反啦!!!...

文章精選

文章搜尋

誰來我家

參觀人氣

  • 本日人氣:
  • 累積人氣: