TOP

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)