呃,我也不知道這個標題這樣下對不對。
我不知道這個學名叫做什麼 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 發表在 痞客邦 留言(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 發表在 痞客邦 留言(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 發表在 痞客邦 留言(2) 人氣()