目前分類:jQuery 筆記 (4)

瀏覽方式: 標題列表 簡短摘要

呃,我也不知道這個標題這樣下對不對。
我不知道這個學名叫做什麼 XDD

簡單來說就是input在焦點時(在該input文字框內準備輸入時),原本的說明文字會消失,若最後思考了許久沒下標題,移開了以後說明文字又會出現。
我找了幾個網站看不出來他們怎麼實現的,網路上找的又只能針對單一物件下函式,我就自己改了一下。

 

實做方式的話,我是input的value指定說明文字,而後方在多加span標籤,內容也是說明文字。
大概長這樣:<input name="sSearch_1" type="text" class="os" value="說明文字" size="60"/><span>說明文字</span> 
當然你也可以在span修改成 點了又不負責是哪招之類的 其他內容
透過jquery偵測focus狀態及blur狀態進而修改內容。

 

方式一(使用blur):

        $('input').focus(function() {  
            
            if($(this).val()==$(this).next('span').text()) {  
                $(this).val("");  
            }
            
            $(this).addClass('input_focus');
        });  
        $('input').blur(function() {  
            if($(this).val()=="") {  
                $(this).val($(this).next('span').text());  
            }
            $(this).removeClass('input_focus');
        }); 

 

方式二(使用focusin、focusout):

        $('input').focusin(
            function(){
                if($(this).val()==$(this).next('span').text()) {  
                    $(this).val("");  
                }
                $(this).addClass('input_focus');
            }).focusout(
            function(){
                if($(this).val()=="") {  
                    $(this).val($(this).next('span').text());  
                }
            $(this).removeClass('input_focus');
        });

 

當然class就是變化囉,可以調整顏色,搭配之前發的

transition:all 0.5s ease-in-out;

可以有很漂亮的效果。

 

文章標籤

ezcshi 發表在 痞客邦 PIXNET 留言(0) 人氣()

好久沒寫jQuery相關文章了,這陣子總算是實際上手使用了。(但是還沒機會實測ajax部份)
這篇大概紀錄一下用到哪些方便的函式。
基於程式功力不高,避免用詞錯誤指導錯誤,所以就寫的比較簡單 囧
有錯誤就煩請各位前輩指正 0rz



準備式
根據經驗,放壓縮版的(也就是還要重新經過瀏覽器將js檔案解譯)的,網頁執行流暢度會受限於CPU,多數都會有稍微頓一下的感覺。
所以google code很好心的提供了讓我們直接取用的jQuery,且可以從google.load("jquery","選擇版本"),一整個佛心來著阿! 經過之前架設網站使用jQuery的動態效果,發現換成下列這種方式載入以後,比原本的載入size小的包裝版順暢很多。

相關詳細連結:The Will Will Web網站部署可考慮使用 Google AJAX Libraries API 載入 JS
----------------------------
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3");

</script>
----------------------------


起始式
其中$(function(){....}同等於body的onload,也就是一進入網頁執行。
----------------------------
<script type="text/javascript">    
     $(function() {    
         你的程式碼
   });    
</script> 
----------------------------

接下來紀錄一下常用的函式

each()
相關詳細連結:黑暗執行序的作者 的 邊做邊學 jQuery 系列 6-jQuery 網頁元素操控
摘自詳細連結

jQuery.each(array, function() { ... }) ,將 array 的各元素逐一送給 callback 函數處理,函數中以 this 取得陣列元素內容。
jQuery.each(object, function(i, val) { ... }),逐一傳入物件各屬性的名稱 (i) 以及值 (val) 給 callback 函數處理。
(註: each 中 return false 時,後續尚未處理到的其他陣列元素/物件屬性則略過不處理。)


但是我不是拿來撈array跟object,我是拿去撈表格,範例如下
----------------------------
$('#data tr:gt('+ns+')').each(function(i) {
    var indata = $(this).html();
  
        $(indata).each(function(j){
        dataval = $(this).text();
----------------------------
取id為data內的tr標籤,gt就是取第幾筆(ns)以後的所有資料。
而i則是該tr的類似索引。
each就是將function內的i當作索引,會每筆每筆的讀出來,而可以用$(this).html()或$(this).text()讀取後塞到變數內。
而上面例子就是讀取巢狀表格。
是說我不曉得這樣算不算正規讀取法  囧


jQuery.extend
建立自定義函式,要把程式模組化會用到。
----------------------------
jQuery.extend({
fun1: function (i){
 alert(i);

},
fun2: function (){

},
fun3: function (){

},

});

$.fun1('hi'); //呼叫方式
----------------------------


建立物件
避免忘記 囧
----------------------------
var book = new Object;   
book.name = '書名';
----------------------------


讀取陣列資料
我忘記從哪裡看來的,如果找到了再貼回來。
----------------------------
function listMember(main) {
    var s = ""; for( key in main ) // 使用 in 運算子列舉所有成員
    s += key + ": " + main[key] + "n";
    return s;
} ;
----------------------------


變數與文字組合
直接拿自己寫的當示範,這部份就是組合網址。
----------------------------
var image_url='http://static.findbook.tw/image/book/';
image_url += bisbn + '/large'
var book_url='http://findbook.tw/book/';
book_url += bisbn +'/basic';
----------------------------


append
將資料加在其選擇的後方
----------------------------
$('#list').append(bookurl);

----------------------------
上面例子就是在id為list的物件後面加上bookurl的變數資料。


load
load(url,[data],[callback]) 
這功能實在可以說是超棒,但是傳到伺服器上就會有跨網域無法讀取的問題,所以...
好用歸好用,但是不能上傳以後還能直接撈其他網域的資料。
----------------------------
$("#demo").load("book1.html div > table",function(){$.fun1('hi');otherfunction();});

----------------------------
簡單來說,上面那一行意思就是,在id為demo的物件上將book1.html 內的div標籤下的表格資料載入。
而後面的function,其實是因為當載入後面再接其他函式需要為load讀取的資料時,會造成讀不到資料,所以這類需要撈取函式需要下在load後。函式才能夠將讀取的資料讀來運用。

下面這個例子,直接複製貼上到筆記本後存為網頁檔。
----------------------------
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3");

</script>

<script type="text/javascript">   
     $(function() {   
         $('body').load("http://tw.yahoo.com #news");
        
        
   });   
</script>
----------------------------
將其執行,你就會覺得load簡直就是太棒了,但是.... 上傳到網頁上就不能執行了,因為會出現same-origin policy限制,攸關不同網域的安全性。
儘管如此,光靠這個應該就有人嗅出可以寫出處理自己零散資訊的程式了吧。


如果這個讀取問題可以解決,基本上就能夠以靜態網站模擬成動態網站啦!
或許可以用在單機程式開發上的運用,端看看倌們如何運用啦。


補齊相關jQuery連結:
魚乾的部落格 - jQuery標籤
Web Designer Wall 國外設計師的jQuery教學(英文)
jsGears.com 技術論壇
記載著 Will 在網路世界的學習心得與技術分享 - jQuery標籤
jQuery 1.3 API參考文襠中文版
邊做邊學系列影片 - jQuery



以上
這陣子摸索心得

ezcshi 發表在 痞客邦 PIXNET 留言(1) 人氣()

jQuery自己摸索一小段時間,這篇文章是邊看書邊整理出來的筆記。
習慣先用紙筆記下來,再慢慢整理到電腦上,不過這次這個則是邊看邊記到部落格。
因為只是自個兒的學習筆記,若看官看不懂的話也只能請你google爬文或留言提問囉。


這邊小小吐個槽,這本:網頁設計.愛上jQuery
目前為止,前面文章用的例子的命名方式很不恰當,若是只熟悉js,不熟css的人會被這些樣式及id命名搞混...

最後紀錄日期:97/9/2



啟始式:
#(documnet).ready(function() {

你的程式

});  
--------------------------

你的程式

$("選取物") .觸發或動作('   ');

$("選取物") .觸發(function(){
子程式
}); 

$("選取物") .觸發1("  ").觸發2("  ");
↑ jQuery可以連續觸發,也就是連續動作這樣。

 

選取器

$("選取物") . 觸發動作(或.執行動作)

父    子 →  只要符合這種階層的父子。
父 + 子 →  這個交叉測試以後反而亂掉了,抓不出到底能選取到哪。
父 ~ 子 → 父標籤結束後的所有碰到的子標籤。
選取物:first → 抓第一個物件
選取物:last → 抓最後一個物件
選取物:not( 另一條件 ) → 除了目標以外

選取物:even → 偶數、選取物:odd → 奇數

選取物:eq( n ) → 第n個物件
選取物:gt( n ) → 大於n的物件
選取物:lt( n ) → 小於n的物件


暫時紀錄到這,持續學習中

ezcshi 發表在 痞客邦 PIXNET 留言(3) 人氣()

以前就大約知道jQuery這名詞,可是也沒刻意的想學,只是看過就這樣罷了。

所謂事出必有因,何來因呢?

有款web game:travian,從網路上找到了firefox的套件greasemonkey,可以藉著這套件增加本來沒有的功能,用的就是js腳本。
包括travian也在內,有輔助性的腳本。但想拆開來分析的是類似筆記本的功能,可以在上面紀錄文字資料,也可以放連結,雖然只有ff能用,但若是在需要蒐集資料的頁面,可以省下不少切換的時間,於是有了想拆開學習Javascript的動機(或許裡面不是這樣如此簡單,但是卻構成了動機)。

開始看內部的js碼以後,因為並不常運用,於是很多函式都看不懂。不懂當然是請出google囉 =v=
找了google的資料以後,碰巧發現了jQuery的教學網站。哎呀,不看還好,一看簡直是驚為天人(汗,說不定只是我孤陋寡聞罷了),其中的選擇器使用方式,簡直就是跟css使用概念相似(css是分離html跟樣式,而jQuery則是分離js跟html),又可以用過濾、排序的方式選擇,當下就決定把這使用技巧學起來。

目前只是初步看過,覺得實用性很高,但我這個人常常有三分鍾熱度(汗,所以持續度不曉得有多久啊..
另外一個Prototype則要比較後再決定哪個適用吧,目前就覺得jQuery很想先學起來,起碼達到懂得運用為止。

最後,下面附上幾個找到的資訊

幾個連結:
jQuery官方
jQuery中文入門教程_譯自Getting Started with jQuery
jQuery中文社區

※最近新的教學文章:出自jsGears.com這篇文章


JavaScript Framework (jQuery)
JavaScript的世界從來沒有像現在這樣精彩

偏向動態效果
moo.fx

lanc 發表在 痞客邦 PIXNET 留言(0) 人氣()

找更多相關文章與討論