TOP

2013年7月25日 星期四

[JQuery]Selector使用教學

JQuery提供的提供了許多selector用法 >>連結<<
熟悉這些Selector可以讓你快速的選到正確的物件,提升開發速度,以下替各位整理一些常用的指令
  //選取所有元素
  $('*');
  
  //使用HTML DOM選取(常用selector)
  $('a');$('div');$('p');$('input');
  
  //使用class選取(常用selector)
  $('.link');
  
  //使用type選取(常用selector)
  $(':checkbox');
xxx 
OOO
+++

//$('selector[attribute="value"]')選取attribute為title且value為link1
$('a[title="link1"]').size(); //1

//$('selector[attribute|="value"]')選取attribute為url且value開頭單字為en
$('a[url|="en"]').size(); //2

//$('selector[attribute*="value"]')選取attribute為name且value內容包含man(任意位置)
$('a[name*="man"]').size(); //3

//$('selector[attribute~="value"]')選取attribute為name且value內容包含完整單字good
$('a[name~="good"]').size(); //1

//$('selector[attribute^="value"]')選取attribute為title且value開頭為link
$('a[title^="link"]').size(); //3

//$('selector[attribute$="value"]')選取attribute為name且value結尾包含man
$('a[name$="man"]').size(); //2

//選取第一個a
$('a:first').text();//XXX
$('a').eq(0).text();//OOO

//選取第二個a
$('a:eq(1)').text();//OOO
$('a').eq(1).text();//OOO

//選取最後一個a
$('a:last').text();//+++

//選取有class這個attribute的物件
$('a[class]').text();//xxx

//選取子物件為img的物件
$('a:has(img)').size();//1

//選取index 1,3,5,7....的物件
$("a:odd").css("background-color", "#bbbbff");
 
 //取得下拉式選單選取得值
  $('select[name="sel1"] option:selected').text();
  
  //取得所有class為Ck_add且被選取的checkbox
  $('input[class="Ck_add"]:checked').size();
  
  //選擇正在播放動畫的DIV
  $('div:animated');
  

Corey

Yehuda

Adam

Todd

Nobody

Jorn

Scott

Timo

//$('selector:gt(index)') 取index後的所有p
$( "p:gt(1)" ).text('oo');
//$('selector:gt(-index)') 取得總數量減去index後的所有p
$( "p:gt(-2)" ).text('xx');


//各區塊內第一個變色
$("span:first-of-type").css('background-color','#123');
//區塊內最後一個變色
$("span:last-of-type").css('background-color','#123');

2013年7月11日 星期四

[JQuery]去除符號

寫網頁時遇到輸入的地方都要特別小心使用者輸入了一些不法字元
為了降低SQL injection的發生,我們可以用JQuery動一些手腳

var txt='!@#$&^&*(&*(*&()';
txt=txt.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g,' ');
alert(txt);
※預防SQL injection,建議在Server端再做些防護,因為瀏覽器的 console介面可以讓懂JQuery語法的人下語法去讓整的驗證機制失效

2013年7月4日 星期四

[JQuery]超簡單GoTop按鈕

將CSS放入<head></head>




下列語法放入<body></body>

TOP

JQuery語法放在<body></body>最後面
註:須先將JQuery的JS檔包進來
$(function(){

  $(window).scroll(function() {
     if ($(window).scrollTop() > 0) {
        $('#TopBtn').css('display','block')
     } else {
        $('#TopBtn').css('display','none')
     };
  }).scroll();
  
  $('#TopBtn').click(function(){
     $("html,body").animate({scrollTop: 0}, 500);
  })

});

2013年7月3日 星期三

[JQuery]調整視窗大小時,版面跟著調整

如果想要讓您的網頁,根據瀏覽器視窗大小,而決定要顯示多少內容
可以透過JQuery來處理,不多說我們直接進入範例

首先在您Js檔及CSS放入<head></head> 中

並且將以四個DIV加入Body
JQuery的程式碼您可以考慮寫在<Body></Body>中,不過在開發大型網頁時,小編建議也包成一個JS檔方便管理
$(function(){
    $(window).resize(function(){ 
        $('.box').each(function(){
              if ( $(window).width() < ($(this).index()+1)*200)
              {
                 $(this).css('display','none');
              }
              else
              {
                 $(this).css('display','');
              }
         });
  
     });
});
(此範例紅、黃、綠的底色為黑色,視窗縮小後上層色即消失)

2013年7月1日 星期一

[SQL]Trigger(觸發程序)大批異動資料時,要注意的事


看這篇文章前,您必須先瞭解什麼是Trigger(觸發程序),Trigger可以想像它是一個警報器,只有三件事情可以使這個警報器發揮作用,
Insert、Update和Delete這三個指令,而這個警報器用在資料表被這三個指令使用時觸發,因此我們可以讓資料表插入資料時,讓Trigger
去幫我們檢查或是更新資料時另外加一筆資料到另一張資料表,今天介紹Trigger不是重點,今天要說的是大批異動資料時通常會忽略的事。

以下使用北風資料庫來做範例
[Orders2]             (訂單資料表)
[OrderDetails2]    (訂單明細)

為了快速達成Demo效果先建立資料表
Orders2、OrderDetails2,並將資料轉入
CREATE TABLE [dbo].[Orders2](
 [OrderID] [int]  NOT NULL,
 [CustomerID] [nvarchar](5) NULL,
 [EmployeeID] [int] NULL,
 [OrderDate] [datetime] NULL,
 [RequiredDate] [datetime] NULL,
 [ShippedDate] [datetime] NULL,
 [ShipVia] [int] NULL,
 [Freight] [money] NULL,
 [ShipName] [nvarchar](40) NULL,
 [ShipAddress] [nvarchar](60) NULL,
 [ShipCity] [nvarchar](15) NULL,
 [ShipRegion] [nvarchar](15) NULL,
 [ShipPostalCode] [nvarchar](10) NULL,
 [ShipCountry] [nvarchar](15) NULL)
 
INSERT INTO [Orders2] SELECT * FROM [Orders]
------------------------------------------------------------- 
CREATE TABLE [dbo].[OrderDetails2](
 [OrderID] [int] NOT NULL,
 [ProductID] [int] NOT NULL,
 [UnitPrice] [money] NOT NULL,
 [Quantity] [smallint] NOT NULL,
 [Discount] [real] NOT NULL)
 
INSERT INTO  [OrderDetails2] SELECT * FROM [OrderDetails]

建立Trigger




















一般來說Trigger會這樣寫,這樣可以讓刪除[orders]的資料時可以將刪除的動作觸發Trigger並且刪除[OrderDetails]

--Trigger01
Create TRIGGER [dbo].[Orders2_trigger_del] ON [dbo].[Orders2]
FOR Delete --指定Delete觸發本事件
AS
DECLARE @orderid int
 SELECT @orderid=orderID FROM DELETED
 Delete OrderDetails2 where OrderID=@orderid 


今天我們要刪除訂單,以下指令將會刪除14筆資料
DELETE orders  where EmployeeID=5 AND ShipVia=1

如果使用 Trigger01 的方式,就會發現刪了14筆訂單主檔跟第一筆訂單的明細,可是其他訂單的明細卻沒有跟著刪除
 

--Trigger02 
Alter TRIGGER [dbo].[Orders2_trigger_del] ON [dbo].[Orders2]
FOR Delete --指定Delete觸發本事件
AS
    Delete OrderDetails2 where OrderID in
    (SELECT orderID FROM DELETED)--此Trigger包含N筆資料
Trigger02這種方式也可以改用迴圈去處理各筆資料,
如此一來,我們刪除訂單的同時,Trigger也會確實地將明細也一併清除


2013年6月9日 星期日

[JQuery]第一次學JQuery就上手

/*基礎篇*/
var ←宣告
範例:
var aaa, ←宣告可直接給予初始化,或單純宣告,多筆請用逗點
$ss=&('#ss');   ←給予初始化,結尾請加分號

/*取得網頁中元素、區塊等*/

取得元素的基本方法有三種
取HTML標籤、取ID、取Class

<img class='book' id='bookimg' name='img1'>
範例:
$('img') ←取HTML標籤
$('.book')←取class
$('#bookimg') ←取ID
  $('img[name="img1"]') ←標籤+屬性
※以上四個皆可取得同一個元素
進階:
<div>
<imp class='book' id='bookimg'/>
<imp class='book' id='bookimg'/>
<imp class='book' id='bookimg'/>
<input class='book' id='test' />
</div>
<p>
<imp class='book' id='bookimg'>
<imp class='book' id='bookimg'>
<imp class='book' id='bookimg'>
</p>

$('img') ←取HTML標籤 可取得6個元素(陣列)
$('div').find('img') ←取得div下的所有img,共3個元素
$('div').find('.book') ←取得div下的class是book的,共4個元素
/*常用函數*/

.size(); ←取得筆數
.html(); ←取得下層所有內容,回傳文字型態
.html('xxxx'); ←設定下層內容,設定內容包含HTML格式的話,將會已HTML呈現
.text(); ←取得下層所有文字(去除HTML標籤)
.text('<a href="#">OOO</a>') ←此種設法會將這定的值,以字串方式呈現
.attr(); ←取得屬性
.attr('','');                 ←設定屬性
.css('',''); ←設定CSS
.addClass(''); ←增加Class
.removeClass(''); ←移除Class
//-----------------------------------
範例:
<div id='book' >xxxxxx</div>
<div id='book1' value='20'>xxxxxx</div>
<div id='book2' class='newbook'>xxxxxx</div>

$('div').size(); ←取得本頁div的數量,結果為3
$('#book').html(); ←取得ID=book下的內容 xxxxxx
$('#book').html('OOO'); ←更改ID=book下的內容<div id='book'>xxxxxx</div> 變成 <div id='book'>OOO</div>
$('#book1').attr('value'); ←取得value屬性,值為20
$('#book1').attr('value',30); ←設值,沒有的屬性也可以加給他,<div id='book1' value='30'>xxxxxx</div>
$('#book2').removeClass('newbook').addClass('oldbook'); ←移除newbook,增加oldbook
$('#book').css('color','#FF3E96'); ←修改CSS內容
$('#book').html('xxx').addClass('oldbook').attr('value',111).css('color','#FF3E96') ←可以寫在同一行
/*事件
請參考 http://webdesign.kerthis.com/jquery/jquery_events
*/
範例:
<img src='1.png'/>
$('img').click(function() { //增加圖片的滑鼠單擊事件
alert($(this).attr('src')); ←在function裡使用$(this)表示觸發的元素,此範例為顯示圖檔網址
});

[VB.NET]第一次使用Json就上手

首先

先去下載.dll元件,沒有這個什麼都做不了>>http://json.codeplex.com/<<

使用 VB2012 先將Json轉成 .NET類別(如果只是要轉換成DataTable可以略過此步驟)
保哥的教學 http://www.youtube.com/watch?v=zwTbyn5VZh8

引用
 
Imports Newtonsoft.Json
Imports Newtonsoft.Json.Linq
宣告WebClient用來取得Json(註":該物件也可用來下載網頁原始碼) 本範例使用臺北創意街區 主要欄位說明:區域、店名、地址、電話、營業時間、網址 使用UTF-8編碼取得Json內容
 
Dim objWebClient As New System.Net.WebClient
Dim Url As String = "http://data.taipei.gov.tw/opendata/apply/json/RkZBQjUyMTktM0E0NC00RkI2LUFFNTUtMkJBMTJEMEFGRDUy" 
Dim JsonStr As String = ""
JsonStr = Encoding.UTF8.GetString(objWebClient.DownloadData(New Uri(Url.Trim())))
※ Json說明: 1. JSON 字串可以包含陣列 Array 資料或者是物件 Object 資料 2. 陣列 [ ] ,例:[{"Name":"Liuder"},{"Name":"yukuto"},{"Name":"INN"},{"Name":"QQ"}] 3. 物件 { } ,例:{"Name":"Liuder","address":"taipei","phone":"0912345678"} 4. 物件+陣列 {"response":[{"Name":"Liuder"},{"Name":"yukuto"},{"Name":"INN"},{"Name":"QQ"}]}
範例一、已知本範例內容為陣列型態,所以可以直接轉換成List或DataTable
 
Dim DataList As New List(Of TaipeiArtStreet) '根據之前先轉換好的類別宣告List
DataList = JsonConvert.DeserializeObject(Of List(Of TaipeiArtStreet))(JsonStr)
Dim Table1 As New DataTable '轉換成Datatable
Table1 = JsonConvert.DeserializeObject(Of DataTable)(JsonStr)
範例二、如果已知JsonStr為單一物件,可用下列範例
 
Dim JsonStr as string= "{""orderdata"":{""orderid"":""20130101002"",""itemCount"":""3"",""Pricetotal"":""600"",""detail"":[{""ISBN"":""957000001"",""Name"":""book1"",""price"":""100""},{""ISBN"":""957100002"",""Name"":""book2"",""price"":""200""},{""ISBN"":""957100003"",""Name"":""book3"",""price"":""300""}]}" 
Dim Obj As Newtonsoft.Json.Linq.JObject = Newtonsoft.Json.JsonConvert.DeserializeObject(JsonStr)
'取得物件明細的方法 依據階層 Obj.item("階層1")("階層2") 以此類推
Dim OrderId As String = Obj.Item("orderdata")("orderid").ToString
Dim itemCount As String = Obj.Item("orderdata")("itemCount").ToString
Dim Pricetotal As Int32 = Obj.Item("orderdata")("Pricetotal").ToString
Dim Dt As New DataTable
'將訂單明細轉成DataTable
Dt = JsonConvert.DeserializeObject(Of DataTable)(Obj.Item("orderdata")("detail").ToString)