国产福利91精品一区,国语产色综合,欧美freesex交免费视频

jquery基本教程之簡單體驗

Posted on 2009-04-03 14:54 笑看風云閱讀(225) 評論(0) 編輯收藏所屬分類: javascript

Jquery是繼prototype之后又一個優秀的Javascript框架。對prototype我使用不多，簡單了解過。但使用上jquery之后，馬上被她的優雅吸引住了。有人使用這樣的一比喻來比較prototype和jquery：prototype就像Java，而jquery就像ruby.實際上我比較喜歡java（少接觸Ruby罷了）但是jquery的簡單的實用的確有相當大的吸引力啊！在項目里我把jquery作為自已唯一的框架類包。使用其間也有一點點心得，其實這些心得，在jquery的文檔上面也可能有講，不過還是記下來，以備忘罷。

一，找到你了！

還記得$()這個東西吧？prototype還是DWR都使用了這個函數代替document.getElementById()。沒錯，jquery也跟風了。為達到document.getElementById()的目的，jquery是這樣寫的：

var someElement = $("#myId");

看起來比其他兩個框架的要多了一個#，好，看看下面的用法：

$("div p");(1)

$("div.container")(2)

$("div #msg");(3)

$("table a",context);(4)

在prototype里看過這樣的寫法嗎？第一行代碼得到所有<div>標簽下的<p>元素。第二行代碼得到class為container的<div>元素,第三行代碼得到<div>標簽下面id為msg的元素。第四行代碼得到context為上下文的table里面所有的連接元素。

如果你熟悉CSS，Xpath，你會覺得這些寫法很眼熟！對了。正是。看出奧妙了吧。jquery就是通過這樣的方式來找到Dom對象里面的元素。跟CSS的選擇器相類似。

二，Jquery對象？

jquery提供了很多便利的函數，如each(fn)，但是使用這些函數的前提是：你使用的對象是Jquer對象。使一個Dom對象成為一個Jquery對象很簡單，通過下面一些方式（只是一部分）：

var a = $("#cid");(1)

var b = $("<p>hello</p>");(2)

var c = document.createElement("table"); var tb = $(c);

三，代替body標簽的onload

這個慣例，也許是除了$()之外，用得最多的地方了。下面一段代碼：

$(document).ready(function(){

alert("hello");

});(1)

<body onload="alert('hello');">（2）

上面兩段代碼是等價的。但代碼1的好處是做到表現和邏輯分離。并且可以在不同的js文件中做相同的操作，即$(document).ready(fn)可以在一個頁面中重復出現，而不會沖突。基本上Jqeury的很多plugin都是利用這個特性，正因為這個特性，多個plugin共同使用起來，在初始化時不會發生沖突。

不管怎么說，這個慣例可以分離javascript與HTML。推薦使用。

四，事件機制

我大量使用的事件可能就是button的onclick了。以前習慣在input 元素上寫onclick = "fn()",使用jquery可以使javascript代碼與html代碼分離，保持HTML的清潔，還可以很輕松地綁定事件，甚至你可以不知道“事件”這個名詞。

$(document).ready(function(){

$("#clear").click(function(){

alert("i am about to clear the table");

});

$("form[0]").submit(validate);

});

function validate(){

//do some form validation

}

五，同一函數實現set&get

$("#msg").html();

$("#msg").html("hello");

上面兩行代碼，調用了同樣的函數。但結果卻差別很大。

第一行是返回指定元素的HTML值，第二行則是將hello這串字符設置到指定元素中。jquery的函數大部分有這樣的特性

六，ajax

這是一個ajax橫行的時代。多少人，了不了解ajax的都跟著用上一把。呵。使用jquery實現ajax同樣簡單異常

$.get("search.do",{id:1},rend);

function rend(xml){

alert(xml);

} (1)

$.post("search.do",{id:1},rend);

function rend(xml){

alert(xml);

} (2)

$("#msg").ajaxStart(function(){

this.html("正在加載。。。。");

});(3)

$("#msg").ajaxSuccess(function(){

this.html("加載完成！");

});(4)

這些都是較常用的方法，get和post用法一樣。第一個參數是異步請求的url，第二個為參數，第三個回調方法。

3，4的方法會在指定的Dom對象上綁定響應ajax執行的事件。當然，jquery的AJAX相關的函數不僅是這些，有興趣可以去研究再多。

七，漸入淡出

$("#msg").fadeIn("fast");

$("#msg").fadeOut("slow");

沒錯，上面兩行代碼已經分別實現了一個id為Msg的jquery對象的漸入和淡出。做一個像Gmail一樣的動態加載通知條，用jquery就那么簡單。兩個函數接受的參數除了快慢等，還可以接收整型，作為漸入或淡出的完成時間，單位為MS。

八，plugin

這也是一個插件的時代。

jquery插件給我的感覺清一色的清潔，簡單。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其樣式即可以了。其他事情插件全包。我喜歡jquery的一個重要原因是發現她已經有了很多很好，很精彩的插件。

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: jquery基本教程之簡單體驗列表框的左右上下移動控制Checkbox全選的JS js進行有效性驗證 10秒后實現頁面自動跳轉

笑看風云

導航

常用鏈接

留言簿

隨筆分類(26)

隨筆檔案(28)

文章檔案(2)

收藏夾(3)

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

jquery基本教程之簡單體驗