CSS選擇器

Pattern	Meaning	Described in section
*	任何標籤	Universal selector
E	元素E的標籤	Type selectors
E F	選擇E的後代標籤F	Descendant selectors
E > F	選擇E的子標籤F(白話:選擇E的孩子，向下一代)	Child selectors
E:first-child	選擇E的第一個孩子	The :first-child pseudo-class
E:link E:visited	:link連結前，:visited連結後	The link pseudo-classes
E:active E:hover E:focus	動態標籤	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
E + F	E的相鄰標籤F(等級為兄弟姊妹)	Adjacent selectors
E[foo]	標籤屬性有foo	Attribute selectors
E[foo="warning"]	標籤屬性foo的value=warning	Attribute selectors
E[foo~="warning"]	標籤屬性foo的value=有warning類似的值	Attribute selectors
E[lang|="en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".	Attribute selectors
DIV.warning	class=warning	Class selectors
E#myid	id=myid	ID selectors

瀏覽器支援jQuery程度

	IE8	FF3.*	Google7.*	Opera10.*
leadingWhitespace	false	true	true	true
tbody	false	true	true	true
htmlSerialize	false	true	true	true
style	false	true	true	true
hrefNormalized	false	true	true	true
opacity	false	true	true	true
cssFloat	false	true	true	true
checkOn	true	true	false	true
optSelected	false	true	true	true
optDisabled	true	true	true	true
checkClone	true	true	true	true
scriptEval	false	true	true	true
noCloneEvent	false	true	true	true
boxModel	true	true	true	true
inlineBlockNeedsLayout	true	false	false	false
shrinkWrapBlocks	false	false	false	false
reliableHiddenOffsets	false	true	true	true
submitBubbles	false	true	true	true
changeBubbles	false	true	true	true
ajax	true	true	true	true
資料取得於jQuery2010.10.27日

	true	false	Ex.
leadingWhitespace
tbody	當Talbe缺少tbody時自動補上	缺就給他缺完全不理會
htmlSerialize
style	getAttribute("style");可以完全取出物件的css屬性	不支援
hrefNormalized	當使用getAttribute（）取出href的Value時只會回傳屬性值，而不是回傳完整URL	會取出完整URL	請點button
opacity	可以直接使用css透明屬性opacity	IE替代方式filter:alpha(opacity=透明值(Number));
cssFloat	支援CSS的float屬性	不支援
checkOn
optSelected
optDisabled
checkClone
scriptEval
noCloneEvent
boxModel	完全支援W3C的CSS盒模型	不支援
inlineBlockNeedsLayout
inlineBlockNeedsLayout
shrinkWrapBlocks
reliableHiddenOffsets
submitBubbles
changeBubbles
ajax
資料取得於jQuery2010.10.27日

CSS透明

原圖

IE專用.....style="alpha(opacity=50");"

FF,GOOGLE適用style="opacity: 0.5;"

Response And Request

成員名稱	說明與用法
Request	request("欄位名稱")，這個很方便可以取得任何表單傳送過來的(不論是Get或是Post)，例如<%=request("欄位名稱")%>會顯示出該欄位中的資料。
Request.form	request.form("欄位名稱")，例如<%=request.form("欄位名稱")%>會顯示出該欄位中的資料，當然，您可以利用這個來做布林邏輯判斷或是指定數值給其他變數，這個只能用來取得利用POST METHOD傳送的表單。
Request.Cookies	request.cookies("Cookie名稱")("項目名稱")，詳細的使用方法我們會在之後的Response與Request教學中給予更詳細的講解。
Request.QueryString	request.QueryString("Query名稱")，這個Request語法可以取得網址"?"之後的Query字串(包含利用Get產生的Query字串)，如果網址是./xxx.asp?happy=coobila而您用 Request.QueryString("happy")的話就會顯示coobila，因為happy這個Query的數值是coobila
Request.ServerVariables	request.ServerVariables("名稱")，這種Request物件是用來取得各種伺服器相關的資料，如request.ServerVariables("Local_Addr")就是取得主機的IP位置。

成員名稱	說明與用法
Response.Write	Response.Write("字串")，這段語法會告訴伺服器在網頁的這個地方顯示該字串。
Response.End	Response.End，這個語法會停止伺服器的處理並且將處理完畢的內容傳回使用者端。
Response.Redirect	Response.Redirect("網址")，這個語法會將網頁轉址到指定的網址。
Response.Cookies	Response.Cookies("名稱")，這個地方是告訴伺服器在這裡回應給使用者一個寫入Cookie的指令。
Response.Buffer	Response.Buffer=True|False，這個語法是告訴伺服器在處理這份網頁的時候可以使用緩衝功能，也就是當網頁在處理的時候，會將處理完畢的一些資料存在IIS的緩衝區。
Response.CacheControl	Response.CacheControl=Private|Public，Cache就是快取的意思，如果您的網路提供者有Proxy Server的話，這個語法會告訴伺服器是否要將這個網頁存在Proxy Sserver，Private是關閉Proxy Server的快取功能，Public的話是開啟，預設值是Private。
Response.ContentType	Response.ContentType="MIME-type"，這個用來指定檔案的閱讀方式，如text/html就是以HTML的方式，預設值是text/html，這個設定很少使用。
Response.AddHeader	Response.AddHeader("名稱","內容")，這個語法是增加該網頁中的META標頭，如果您寫Response.AddHeader("Refresh","10")就是增加一個META標頭，而這個META標頭的內容就是每10秒刷新，在使用這個語法前您必須知道有哪些META標頭可以使用。這個功能也必須在任何HTML的META標籤產生前使用
Response.Charset	Response.Charset=編碼名稱(如Big5)，這個語法的功能和HTML的META標籤一樣可以設定網頁的編碼，這個語法必須要在任何HTTP的META標題產生前使用，這個設定很少使用。

原來下載類型這麼簡單[Response.ContentType]

近日接到，是有關報表下載，沒想到asp直接有這麼完美指令，害我思考半天，看來我進步空間，還很寬裕。
Response.ContentType = "application/vnd.ms-excel"
Response.AddHeader "Content-Disposition","attachment;filename=要下載的文件名.xml"
↑↑短短兩行決定了他的出生
↓↓底下為網路尋找類型
'ez' => 'application/andrew-inset',
'hqx' => 'application/mac-binhex40',
'cpt' => 'application/mac-compactpro',
'doc' => 'application/msword',
'bin' => 'application/octet-stream',
'dms' => 'application/octet-stream',
'lha' => 'application/octet-stream',
'lzh' => 'application/octet-stream',
'exe' => 'application/octet-stream',
'class' => 'application/octet-stream',
'so' => 'application/octet-stream',
'dll' => 'application/octet-stream',
'oda' => 'application/oda',
'pdf' => 'application/pdf',
'ai' => 'application/postscript',
'eps' => 'application/postscript',
'ps' => 'application/postscript',
'smi' => 'application/smil',
'smil' => 'application/smil',
'mif' => 'application/vnd.mif',
'xls' => 'application/vnd.ms-excel',
'ppt' => 'application/vnd.ms-powerpoint',
'wbxml' => 'application/vnd.wap.wbxml',
'wmlc' => 'application/vnd.wap.wmlc',
'wmlsc' => 'application/vnd.wap.wmlscriptc',
'bcpio' => 'application/x-bcpio',
'vcd' => 'application/x-cdlink',
'pgn' => 'application/x-chess-pgn',
'cpio' => 'application/x-cpio',
'csh' => 'application/x-csh',
'dcr' => 'application/x-director',
'dir' => 'application/x-director',
'dxr' => 'application/x-director',
'dvi' => 'application/x-dvi',
'spl' => 'application/x-futuresplash',
'gtar' => 'application/x-gtar',
'hdf' => 'application/x-hdf',
'js' => 'application/x-javascript',
'skp' => 'application/x-koan',
'skd' => 'application/x-koan',
'skt' => 'application/x-koan',
'skm' => 'application/x-koan',
'latex' => 'application/x-latex',
'nc' => 'application/x-netcdf',
'cdf' => 'application/x-netcdf',
'sh' => 'application/x-sh',
'shar' => 'application/x-shar',
'swf' => 'application/x-shockwave-flash',
'sit' => 'application/x-stuffit',
'sv4cpio' => 'application/x-sv4cpio',
'sv4crc' => 'application/x-sv4crc',
'tar' => 'application/x-tar',
'tcl' => 'application/x-tcl',
'tex' => 'application/x-tex',
'texinfo' => 'application/x-texinfo',
'texi' => 'application/x-texinfo',
't' => 'application/x-troff',
'tr' => 'application/x-troff',
'roff' => 'application/x-troff',
'man' => 'application/x-troff-man',
'me' => 'application/x-troff-me',
'ms' => 'application/x-troff-ms',
'ustar' => 'application/x-ustar',
'src' => 'application/x-wais-source',
'xhtml' => 'application/xhtml+xml',
'xht' => 'application/xhtml+xml',
'zip' => 'application/zip',
'au' => 'audio/basic',
'snd' => 'audio/basic',
'mid' => 'audio/midi',
'midi' => 'audio/midi',
'kar' => 'audio/midi',
'mpga' => 'audio/mpeg',
'mp2' => 'audio/mpeg',
'mp3' => 'audio/mpeg',
'aif' => 'audio/x-aiff',
'aiff' => 'audio/x-aiff',
'aifc' => 'audio/x-aiff',
'm3u' => 'audio/x-mpegurl',
'ram' => 'audio/x-pn-realaudio',
'rm' => 'audio/x-pn-realaudio',
'rpm' => 'audio/x-pn-realaudio-plugin',
'ra' => 'audio/x-realaudio',
'wav' => 'audio/x-wav',
'pdb' => 'chemical/x-pdb',
'xyz' => 'chemical/x-xyz',
'bmp' => 'image/bmp',
'gif' => 'image/gif',
'ief' => 'image/ief',
'jpeg' => 'image/jpeg',
'jpg' => 'image/jpeg',
'jpe' => 'image/jpeg',
'png' => 'image/png',
'tiff' => 'image/tiff',
'tif' => 'image/tiff',
'djvu' => 'image/vnd.djvu',
'djv' => 'image/vnd.djvu',
'wbmp' => 'image/vnd.wap.wbmp',
'ras' => 'image/x-cmu-raster',
'pnm' => 'image/x-portable-anymap',
'pbm' => 'image/x-portable-bitmap',
'pgm' => 'image/x-portable-graymap',
'ppm' => 'image/x-portable-pixmap',
'rgb' => 'image/x-rgb',
'xbm' => 'image/x-xbitmap',
'xpm' => 'image/x-xpixmap',
'xwd' => 'image/x-xwindowdump',
'igs' => 'model/iges',
'iges' => 'model/iges',
'msh' => 'model/mesh',
'mesh' => 'model/mesh',
'silo' => 'model/mesh',
'wrl' => 'model/vrml',
'vrml' => 'model/vrml',
'css' => 'text/css',
'html' => 'text/html',
'htm' => 'text/html',
'asc' => 'text/plain',
'txt' => 'text/plain',
'rtx' => 'text/richtext',
'rtf' => 'text/rtf',
'sgml' => 'text/sgml',
'sgm' => 'text/sgml',
'tsv' => 'text/tab-separated-values',
'wml' => 'text/vnd.wap.wml',
'wmls' => 'text/vnd.wap.wmlscript',
'etx' => 'text/x-setext',
'xsl' => 'text/xml',
'xml' => 'text/xml',
'mpeg' => 'video/mpeg',
'mpg' => 'video/mpeg',
'mpe' => 'video/mpeg',
'qt' => 'video/quicktime',
'mov' => 'video/quicktime',
'mxu' => 'video/vnd.mpegurl',
'avi' => 'video/x-msvideo',
'movie' => 'video/x-sgi-movie',
'ice' => 'x-conference/x-cooltalk'

RegExp規則

RegExp規則

RegExp位置符號: ^=強制由自首開始 $=強制到字尾結束 \b=代表單字第一個字 \B=代表單字中含檢測內容 RegExp符號語法: {n}=n代表字數 {n,}=代表n個以上字元 {n,m}=代表n到m字元 ? =代表問號前字元有出現即可 * = 代表幾個字元都可以有出現即可 + = 代表至少一個字元 | = 代表或 RegExp方法: text(Str)=搜尋Str字串,回傳Booln exec(Str)=搜尋Str字串,回傳找到字串,找不到回傳null

[]=框框內文字代表可輸入文字 [^]=代表框框內字元為不允許 .=代表enter以外所有字元 \w=代表[0-9A-Za-z] \W=代表[^0-9A-Za-z] \d=代表[0-9] \D=代表[^0-9] \s=代表空白鍵 \S=代表非空白鍵 \n=代表插入一行符號 \f=代表換行 \r=代表游標移到第一位置 \t=代表Tab鍵 比對方式: g=代表全部比對 i=不分大小 m=多行模式

輸入數字

輸入文字

Autocomplete and ashx

Autocomplete.js

$(function(){
      var path = "Autocomplete.ashx";//連接位置       
      $( "#tags" ).autocomplete({
          source:function(request,response){
              $.ajax({
                  type:"POST",
                  url:path,
                  dataType:"text",
                  timeout:3000,//over 3000s exit
                  data:{"value":request.term,"type":"id"},
                  success:function(data, textStatus){
                      if(data == "")return response([]);
                      var aTemp = data.split(",");
                      response($.map(aTemp,function(n){
                          return{value:n}
                      }));
                  }
              });
          },
          delay:500,//輸入完畢延遲0.5秒
          minLength:1//最少輸入1字元
      });
});

Autocomplete.html

<div >
   <input type="text" id="tags" />
</div>

Autocomplete.ashx

Dim db As New intra.intraConn
Dim dt As DataTable
Dim SQL10, strID As String
Dim rows As DataRow
SQL10 = "Select top 10 id from StaffData WHERE " & context.Request("type") & " LIKE '" & context.Request("value") & "%'"
dt = db.GetDataTable(SQL10) ''連接資料庫取得dataTable
strID = ""
If Not dt.Rows.Count = 0 Then '檢查資料是否為null
    For Each rows In dt.Rows '一一取出
        If strID = "" Then
            strID = rows.Item("id").ToString
        Else
            strID = Trim(strID) & "," & rows.Item("id").ToString
        End If
    Next
End If
db.Close()
If Trim(strID) = "" Then
    context.Response.End()
End If
context.Response.ContentType = "text/plain"
context.Response.Write(Trim(strID)) '傳回字串

這是小弟的設計，大家參考看看，有感想歡迎提出

jQueryUI Autocomplete

jQueryUI真是太方便了，像這種欄位自動輸入，其實asp.net 的Ajax Tools其實也有，小弟也小玩過，但感覺想跳來jQuery原因就是~~，他實在方便又美觀，不廢話，小說明一下:

屬性:

soucer	來源
minLength	當輸入第幾字元時開始搜尋
delay	當資料較龐大時使用，其實設定0也可以，只是效果，自己判斷摟
Disables	(true)禁用(false)啟用 不設定也可以因為預設:false

事件:

select	選擇完畢觸發
open	選擇窗開啟時觸發
close	選擇窗關閉時觸發
focus	當focus在選擇欄位時觸發
change	輸入欄位值改變時觸發
search	搜尋之前觸發

方法:

.autocomplete( "destroy" )	直接移除掉自動搜尋功能
.autocomplete( "disable" )	自動輸入"禁用"
.autocomplete( "enable" )	自動輸入"啟用"
.autocomplete( "option" , optionName , [value] )	設定與獲得，無value時，就是獲得
.autocomplete( "option" , options )	options物件 一次設定多個指令
.autocomplete( "widget" )
.autocomplete( "search" , [value] )
.autocomplete( "close" )

javascript

$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

html

<label for="tags">Tags:</label>
<input id="tags">

CSS3 漸層功能

CSS漸層功能太方便拉 對我這種不愛用圖檔的人來說真是一大樂事阿

CSS語法:

-moz-linear-gradient(顏色漸成開始位置,開始顏色,結束顏色) /*Firefox Linear gradients*/
-webkit-gradient(linear,開始位置,結束位置,from(開始顏色),to(結束顏色)) /*Safari, Chrome Linear gradients*/
個人比較喜歡FF的寫法精簡，但其實兩者都挺容易上手。

趕快來看看效果如何:

左to右
background:-moz-linear-gradient(left, #003300, #66CC66) ;/*FF3.0*/
background: -webkit-gradient(linear, left center, right center, from(#003300), to(#66CC66)); /*Google*/

上to下
background:-moz-linear-gradient(top, #003300, #66CC66) ;/*FF3.0*/
background: -webkit-gradient(linear,center top,center bottom, from(#003300), to(#66CC66)); /*Google*/

左斜to右斜
background:-moz-linear-gradient(left top 300deg, #003300, #66CC66) ;/*FF3.0*/
background:-webkit-gradient(linear, left top, right bottom, from(#003300), to(#66CC66)); /*Google*/

CSS3圓角 陰影 功能

CSS圓弧設計對我來說真是太方便了，本人由於太懶，都不太愛做圖片，廢話不多說來已場示範八

-moz-border-radius: 10px;/*Firefox使用*/
-webkit-border-radius: 10px;/*Google使用*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/

再加上陰影 感覺更有質感

-moz-border-radius: 10px;/*Firefox 圓角*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影*/
-webkit-border-radius: 10px;/*Google 圓角*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影 直 橫 模糊 顏色*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影 陰影 直 橫 模糊 顏色*/

陰影方向可以自由調整

-moz-border-radius: 10px;/*Firefox 圓角*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影*/
-webkit-border-radius: 10px;/*Google 圓角*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-moz-box-shadow: 5px -5px 7px #818181;/*Firefox 陰影 直 橫 模糊 顏色*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-box-shadow: 5px -5px 7px #818181;/*Google 陰影 陰影 直 橫 模糊 顏色*/

目前很遺憾IE 並未支援，大家只好忍耐，但聽說IE9會全面支援W3C希望可以統一，對開發者而言可是一大福音。
以上參考圓角範例:CSS Library