Archive

文章標籤 ‘jquery’

jQuery 學習筆記(二) – Form 欄位應用

2009年1月9日 3 則評論

學習jQuery，剛開始還不太習慣，語法很像javascript(呵~他本來就算在其中)，但又不能直接拿來當物件用，真是麻煩呀~~，所以使用jQuery，最好基礎打好一點，不然可能會花費很多時間在查文件或TRY TRY 是否可行。

用Javascript ，以前最常就是在驗證欄位，雖然現在用了jQuery搞不好會變成一些傳遞參數還是畫面特效的
不過驗證欄位還是基本必須的啦，所以找到不錯的文章在提到jQuery取form裡的相關欄位的方式為何:

獲取一組radio被選中項的值
var item =
$('input[@name=items][@checked]').val();
獲取select被選中項的文本
var item =
$(“select[@name=items]
option[@selected]”).text();
select下拉框的第二個元素為當前選中值
$('#select_id')[0].selectedIndex
= 1;
radio單選組的第二個元素為當前選中值
$('input[@name=items]').get(1).checked =
true;

獲取值：

文本框，文本區域：$(“#txt”).attr(“value”)；
多選框checkbox：$(“#checkbox_id”).attr(“value”)；
單選組radio：  
$(“input[@type=radio][@checked]”).val();
下拉框select： $('#sel').val();

控制表單元素：
文本框，文本區域：$(“#txt”).attr(“value”,'');//清空內容
               
$(“#txt”).attr(“value”,'11');//填充內容

多選框checkbox： $(“#chk1”).attr(“checked”,'');//不打勾
               
$(“#chk2”).attr(“checked”,true);//打勾
               
if($(“#chk1”).attr('checked')==undefined) //判斷是否已經打勾

單選組radio：   
$(“input[@type=radio]”).attr(“checked”,'2');//設置value=2的項目為當前選中項
下拉框select：  
$(“#sel”).attr(“value”,'-sel3');//設置value=-sel3的項目為當前選中項
              
$(“<option value='1'>1111</option><option
value='2'>2222</option>”).appendTo(“#sel”)//添加下拉框的option
              
$(“#sel”).empty()；//清空下拉框

感覺複雜多了，有空再來精簡一下。

參考資料:
http://www.cnblogs.com/xlfj521/archive/2008/01/29/1057375.html

Categories: Java Script Tags:

JSON 解析與運用 for PHP

2009年1月6日 尚無評論

JSON格式在Javascript裡算是標準的資料格式，但在其它語言就不算是了，所以各家server端的程式語言就要去解析來配合了，目前剛好會先用PHP進行與jquery的測試，所以先對PHP對JSON解析進行瞭解。

目前PHP在5.2版之後已經有內建支援JSON的轉換函式，看來也是因為ajax當道，所以php 直接內建了..^^
在5.2版的PHP 可以使用 json_encode及json_decode 進行轉換成PHP物件陣列，用法如下:

//PHP
$test=array(
“x” => 1,
“y” => 2,
“str” => “test string”,
“a” => array (
  “array value 1”,
  “array value 2”,
  3
}
);

$jsonstr = json_encode($test);
$jsonstr內容則為
{
“x”:1,
“y”:2,
“str”:”test string”,
“a”:[
  “array value 1”,
  “array value 2”,
  3
]
}


目前json_encode對中文字只能用utf8，要特別注意這點。最後取回時在Javascript 執行eval()即可使用了

var test= eval(“(“+ jsonstr + “)”); 


那再來如果使用的PHP版本非5.2之後，可以考慮其它人家寫好的套件，像PHP-json 算是library 如果不是自己架設的web server，可能就很不方便了，這裡有一篇網誌 石頭閒語:PHP::JSON
in PHP – 樂多日誌 有在介紹請自行參考
。除此之外，也可以使用Services_JSON (BSD license)，或者是Zend-Json (New BSD license)。不過Zend的Framework，在官網顯示PHP版本不能低於5.1.4，建議使用5.2.3以上的版本，所以看來幫助不大。

如果是php4的，可以參考以下兩篇，都有合適的lincude 函式庫可以使用：


相關參考資料:
http://nervstudio.blogspot.com/2007/02/ajaj-php-json-javascript.html

Categories: PHP Tags: , ,

JSON & JSONP 簡介

2009年1月4日 尚無評論

最近在學習Jquery，就常看到JSON及JSONP，只知道他是資料的集合，其它都不太瞭解，所以上網搜尋了一下，整了名詞解釋，希望能更瞭解一點。

JSON（Javascript Object Notation）
JSON（Javascript Object Notation）是一種輕量級的資料交換語言，以文字為基礎，且易於讓人閱讀。他本來就算在javascript標準裡，JSON是獨立於語言的文字格式，並且採用了類似於C語言家族的一些習慣。JSON格式是1999年《JavaScript
Programming Language, Standard ECMA-262 3rd Edition》的子集合，所以可以在JavaScript以eval()函式（javascript通過eval()調用解釋器）讀入。不過這並不代表JSON無法使用於其他語言，目前幾乎所有與網頁開發相關的語言都有JSON函式庫。

JSON，是一種描述javascript裡物件還有陣列(js的陣列其實也是物件啦)的一種簡略表示方法，用於描述數據結構，其結構有名稱/值 及陣列，像是下面這個範例就是JSON格式:

//Javascript
var test={
 "x":1,
 "y":2,
 "str":"test",
  "a":[
      "array value 1",
      "array value 2",
      3
   ],
   obj_array:[{
      xx:0,
      xxx:2
   },{
      xx:3,
      xxx:5
     }
   ]
};

由於JSON在語法上是JavaScript的子集合，所以一般都會使用eval()作為讀取資料的方式，這在JSON資料提供站台與使用站台都屬於可信賴時並不會有問題。但如果資料提供站台不在信任範圍內，將JavaScript程式碼嵌入JSON，則會造成安全上的問題。

另外一個安全上的問題則是跨站存取（Cross-site request
forgery，簡稱CSRF或XSRF）。這個問題在Javascript中的狀況是，由於Javascript採用了稱為「沙盒」的機制，這種機制限制Javascript引擎僅能引入同一個站點的代碼，因而某種程度上提高了安全性。

官方網站:http://www.json.org

JSONP(JSON with Padding)
什麼是JSONP：JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script
tags返回至客戶端，通過javascript
callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。由於 JSON 只是一種含有簡單括號結構的純文本，因此許多通道都可以交換 JSON
消息。因為同源策略的限制(上述提到的安全性問題)，我們不能在與外部服務器進行通信的時候使用
XMLHttpRequest。而JSONP是一種可以繞過同源策略的方法，即通過使用 JSON 與 <script>
標記相結合的方法，從服務端直接返回可執行的JavaScript函數調用或者
JavaScript對象。

JSONP的原理很簡單，但需要服務器端給予相應配合。大致來說，JSONP的實現思路就是在客戶端編程時作好使用JSON數據的準備，然後再通過圓括號將這些數據括起來以創建一條有效的JavaScript語句（可能是一次有效的函數調用）。

也就是說，客戶端可以使用一個用於命名jsonp的查詢參數來決定可以獲取的數據。最簡單的情況下，如果jsonp參數為空，則返回的數據就是被括在圓括號中的JSON。

目前已經有很多open的framework 有採用JSONP：dojo、JQuery、Youtube
GData API 、Google Social Graph API 、Digg API 、GeoNames webservice、豆瓣API、Del.icio.us JSON API等

JSONP只是解決了標準化的問題，但假如遠程主機想通過script標籤向頁面中注入惡意代碼，而不是返回JSON數據，那麼網站還是可能會隨時受到威脅。不過，一旦實現了JSONP，那麼對開發人員來說肯定是一件省時省力的大好事，在此基礎上各種一般化的抽像、教程及文檔也會應運而生的。 我們可以使用若干種方法在 JavaScript 程序中動態地生成代碼。因此在要進行eval()前，可以利用下面的正則表達式檢查 JSON 字符串看是不是有危安成份：





var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
            text.replace(/"(\\.|[^"\\])*"/g, '' ''))) &&
            eval(''('' + text + '')'');





參考資料:
http://diary.tw/tim/22
http://zh.wikipedia.org/wiki/JSON#.E8.B7.A8.E7.AB.99.E5.AD.98.E5.8F.96.E5.95.8F.E9.A1.8C
http://www.cn-cuckoo.com/2008/09/13/the-origin-of-jsonp-262.html
http://www.matrix.org.cn/resource/article/2008-03-06/b2e0ea4e-eb69-11dc-91da-b599c3ba16ef.html

			

		

		

			Categories: Java Script			Tags: , , 		

	

	

		
jQuery 學習筆記(一) -hello world

		

			2008年12月29日
									2 則評論
			

		

		

			
先前有稍為看了一下jQuery，因為目前愈來愈需要美感的網頁，所以還是認真點學習這些簡化Javascript 的framework吧!


歷程
jQuery 由美國人John Resig創建，至今已吸引了來自世界各地的眾多javascript高手加入，到目前為止(2008-12-29)最新的release 版本為 v1.2.6 ， 最小化後的檔案約30.3KB，以下為相關jquery基本連結。




jQuery是繼prototype之後又一個優秀的Javascrīpt框架。其宗旨是WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。它能快速,簡潔的使用HTML documents, handle events, perform animations,並且能把Ajax交互應用到網頁, jQuery 能夠改變並減化你寫JavaScript的方式及程式碼。
它是輕量級的 js 庫(壓縮後只有30k) ，這是其它的 js 庫所不jquery及的，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。


而目前在網路上，jQuery的使用案例及教學手冊文件等都非常充足，而學習jQuery前最好對xml力Css,Javascript,Html,DOM都有基本概念，這樣上手才會快一點。


小弟評估了jQuery及Prototype之後，才想把主力放在jQuery上，理由改天有空再寫囉!!


基本使用方式 :


1.要記得載入jQuery的函式庫
2.jQuery程式碼必須在以下的地方撰寫
  
A.$(document).ready() 就像是jQuery的window.onload() 


$(document).ready(function(){
   將jQuery 程式碼寫在這
});



B.這種方式也可以，但同時寫時A會先執行


$(function(){
將jQuery 程式碼寫在這
});



3.如何取得物件


A.抓取所有的<a /> tag物件


$(”a”)



B.此為抓取指定的ID，只要ID或NAME為this_id都會被抓出來


$(”#this_id”)



C. 此為抓取指定的class，只要css 裡有包含指定的sytle名稱就會被抓出來


$(”.this_style”)



D. 先小結A+B+C，他們還可以結合使用喔!!


$(”a#this_id”)   //找出 <a />tag,物件名稱為this_id的


$(”a.this_style”)   //找出 <a />tag,calss 名稱為this_style的 (感謝shian指導修正)



E.還有比較不容易搞混的取得物件方式，下例是為抓取this_id名稱的input物件


$(”input[@name:this_id]“)



F.也可以用這種方式取得，此為抓取type=checkbox的物件


$(”input[@type=checkbox]“)



G.還有一種叫層級的取法，以這個div > p會得到<p>two</p>


HTML Code:     <p>one</p> <div><p>two</p></div> <p>three</p> 
$(”div > p“)


還有很多種取得方式，詳細請再去參考文件，除了官網的文件蠻充足的(可惜都英文的)外；這裡還有簡體版的jQuery API 使用手冊 ，對DOM操作不太熟悉的，可以看一下jQuery 學習筆記 (6) — 操作 DOM 物件這篇，寫的淺顯易懂，應該很容易可以上手


再來當然要寫一個hello world囉:
先瞭解一下如何讀取及加入html code
在<body>裡加入一段html碼


$(”<div><p>Hello</p></div>”).appendTo(”body”);


結果會在<body>加入<div><p>Hello</p></div></body>
再來我們要取得物(div)裡的html，以上述例子再繼續執行$(”div”).html() 結果會取得:<p>Hello</p>

而我們也可以在已知物件加入html code 


$(”div”).html(”<p>Hello World</p>”)


這樣我們想要的結果就會顯示出來啦，完整如以下範例


<html>
  <script src=”js/jquery-1.2.6.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){ 
       $(“div”).html(“<p>Hello World</p>”);
});
</script>
</head>
<body>
<div><p>two</p></div>
</body>
</html>


參考資訊:
http://www.hudong.com/versionview/DdncDAFtRA3V,XA,ndwfwoBUw
http://blog.shian.tw/jquery-base.html
http://wiki.jquery.org.cn/doku.php?id=jquery%E4%B8%AD%E6%96%87%E6%8C%87%E5%AF%BC:15%E5%A4%A9%E5%AD%A6%E4%BC%9Ajquery

			

		

		

			Categories: Java Script			Tags: , , 		

	


分頁: 上一頁
1
2