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及其样式即可以了