jquery總結
jQuery是繼prototype之後又一個優秀的Javascrīpt框架
prototype就像Java,而jquery就像ruby
其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情
jQuery是一個快速的,簡潔的javaScript庫
使用戶能更方便地處理HTML documents、events、實現動畫效果,並且方便地爲網站提供AJAX交互
jQuery的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇
jQuery能夠使用戶的html頁保持代碼和html內容分離
輕量級的js庫(壓縮後只有21k) ,這是其它的js庫所不及的,它兼容CSS3,還兼容各種瀏覽器
1.$()
$("div p"); // (1) 得到所有標籤下的P元素
$("div.container"); // (2) 得到class 爲container的元素
$("div#msg"); // (3) 得到標籤下面id爲msg的元素
$("table a",context); // (4) 得到context爲上下文的table裏面所有的連接元素
2.創建Jquery對象
var a = $("#cid");
var b = $("hello");
var c = document.createElement("table");
var tb = $(c);
3.表現和邏輯分離
$(document).ready(function(){
alert("hello");
});
4.事件
$(document).ready(function(){
$("#clear").click(
function(){
alert("i am about to clear the table");
}
);
$("form[0]").submit(validate);
});
function validate(){
//do some form validation
}
5.函數重載
$("#msg").html(); 返回指定元素的HTML值
$("#msg").html("hello"); 將hello這串字符設置到指定元素中
6.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)
第一個參數是異步請求的url,第二個爲參數,第三個回調方法
3,4的方法會在指定的Dom對象上綁定響應ajax執行的事件
當然,jquery的AJAX相關的函數不僅是這些
7.漸入淡出
$("#msg").show("fast");
$("#msg").hide("slow");
$("#msg").fadeIn();
$("#msg").fadeOut();
8.plugin
只需要在你的元素的class上加上Jtip,並引入jtip.js及其樣式即可以了
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.