`
- 浏览:
462962 次
-
简介
jQuery由美国人John
Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan
Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
工厂函数
在编写js库代码时候,你一定经常和“$”美元符号打交道吧?无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了,但是,它的功能远非如此,瞧瞧以下的jQuery代码,你就会发现它的美丽:
代码
var someElement = $("#myId");
看起来比其他两个框架的要多了一个#,好,看看下面的用法:
代码
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)
Jquery对象
jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分):
代码
var a = $("#cid");
var b = $("<p>hello</p>");
var c = document.createElement("table");
var tb = $(c);
编辑本段代替body标签的onload
这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:
代码
$(document).ready(function(){
alert("hello");
});
事件机制
我们大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。
代码
$(document).ready(function()
{
$("#clear").click(function(){
alert("i am about to clear the table");
});
$("form[12]").submit(validate);
});
function validate(){
//do some form validation
}
渐入淡出
代码
$("#msg").show("fast");
$("#msg").hide("slow");
$("#msg").fadeIn();
$("#msg").fadeOut();
没错,上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条,用jquery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作为渐入或淡出的完成时间,单位为MS。
ajax
这是一个ajax横行的时代。多少人,了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样异常简单
代码
(1)
$.get("search. do",{id:1},rend);
function rend(xml){
alert(xml);
}
(2)
$.post("search. do",{id:1},rend);
function rend(xml){
alert(xml);
}
(3)
$("#msg").ajaxStart(function(){
this.html("正在加载。。。。");
});
(4)
$("#msg").ajaxSuccess(function(){
this.html("加载完成!");
});
这些都是较常用的方法,get和post用法一样。第一个参数是异步请求的url,第二个为参数,第三个回调方法。
(4)的方法会在指定的Dom对象上绑定响应ajax执行的事件。
(5)同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
(6) 保存数据到服务器,成功时显示信息。
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
同一函数实现get\set
代码
$("selector").load(url,data,function(response,status,xhr))
该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单.
plugin
这也是一个插件的时代。
jquery插件给我的感觉清一色的清洁,简单。如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件。
写得很烂。可能大家看不出jquery的好处。嗯,光听是没用的,试用一下吧。你会发觉很有趣。
暂时告一段落吧。待有新的发现再来分享。
加一些Jquery的资源:
http://www.visualjquery. com/index.xml 很好的API查询站点
http://jquery. com/demo/thickbox/ 知道lightBox吧,看看Jquery是怎样实现相同的东西
http://jquery. org. cn/visual/cn/index.xml //不错的JQUERY 中文学习 推荐
微软的visual
studio 2008 sp1支持对jquery的动态提示,只要在代码页导入对应的vsdoc脚本就可以。
目前为止,jQuery的最新版本为1.7.2。
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
jQuery+Owl Carousel 百度百科2014图片轮播 jQuery+Owl Carousel 百度百科2014图片轮播 jQuery+Owl Carousel 百度百科2014图片轮播 jQuery+Owl Carousel 百度百科2014图片轮播 jQuery+Owl Carousel 百度百科2014图片...
jquery百度百科底部浮动导航页面滚动预览
原创,如题,基于JQuery的页内文章标签导航(类似百度百科),单击侧边的标签导航,文章会自动滑到相应的位置。
Jquery操作xml_Demo。 帮一个朋友做的一个Demo实例,用jquery读取xml文件,很简单的操作,一看就明白。
jQuery百度百科页面滚动导航代码基于jquery-1.9.0.js制作,鼠标滚动页面右下角显示,辅助浏览网页内容。
练习2:使用jQuery美化英雄联盟简介页.zip,练习2:使用jQuery美化英雄联盟简介页.zip,练习2:使用jQuery美化英雄联盟简介页.zip
Jquery学习 Jquery源代码 Jquery数据库操作 Jquery学习 Jquery源代码 Jquery数据库操作 绝对有用,技术含量
jQuery仿百度百科右侧浮动菜单特效是一款页面下拉显示索引菜单目录,点击可直接跳转到相关信息位置的js代码。
jQuery仿百度百科右侧浮动菜单代码是一款页面下拉显示索引菜单,点击可直接跳转到相关信息位置。
jQuery操作文件夹
Jquery各种连接操作 Ajax JqueryJquery各种连接操作 Ajax Jquery
几个jQuery的API方法使用的详细例子。 配套博客中讲解的代码。
jQuery + struts2 实现仿百度搜索功能的jQuery插件 样式自己可以定义!
attribute(改进了.attr()的性能)、jQuery()核心函数、CSS(.css()性能有两倍提升)、特效和事件、DOM操作等也有显著改进 1.5 美国时间1月31日John Resig在jQuery官方博客发表文章,宣布jQuery 1.5正式版已经如期...
内容包括:jQuery Ajax 操作函数,jQuery 选择器,jQuery 事件处理方法,jQuery 事件方法,jQuery 效果函数,jQuery 文档操作方法,jQuery 属性操作方法,jQuery CSS 操作函数,jQuery 遍历函数
jquery类似百度百科底部导航预览,代码很简单,这里就不多废话了。 效果图: CSS * { margin: 0; padding: 0 } .wrap { width: 1000px; overflow: hidden; margin: 0 auto; } .content { width: 780...
jquery 教程 详细解释了jquery的使用方法 入门教程,适合刚接触jquery的朋友
jquery表格操作实例jquery表格操作实例jquery表格操作实例jquery表格操作实例
本篇文章给大家介绍基于jquery实现仿百度百科右侧导航代码附源码下载,对百度百科右侧导航代码相关内容感兴趣的朋友可以参考下本