jquery简单体验


Posted in Javascript onJanuary 10, 2007

jquery简单体验
query是继prototype之后又一个优秀的Javascrīpt框架。对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共同使用起来,在初始化时不会发生冲突。
不管怎么说,这个惯例可以分离javascrīpt与HTML。推荐使用。
四,事件机制
我大量使用的事件可能就是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[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的一个重要原因是发现她已经有了很多很好,很精彩的插件。
写得很烂。可能大家看不出jquery的好处。嗯,光听是没用的,试用一下吧。你会发觉很有趣。
暂时告一段落吧。待有新的发现再来分享。

加一些Jquery的资源:
http://www.visualjquery.com/index.xml 很好的API查询站点
http://jquery.com/demo/thickbox/ 知道lightBox吧,看看Jquery是怎样实现相同的东西
http://www.codylindley.com/blogstuff/js/jtip/ Jtip,实用的提示工具
http://jquery.com/plugins/ 很多牛的插件。
http://15daysofjquery.com/jquery 的15天教程

Javascript 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
详解JS模块导入导出
Dec 20 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
java script编程起步(第三课)
Jan 10 #Javascript
javascript编程起步(第二课)
Jan 10 #Javascript
javascript编程起步(第一课)
Jan 10 #Javascript
javascript 对象的定义方法
Jan 10 #Javascript
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 #Javascript
Prototype使用指南之form.js
Jan 10 #Javascript
Prototype使用指南之selector.js
Jan 10 #Javascript
You might like
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php依赖注入知识点详解
2019/09/23 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
JS实现self的resend
2010/07/22 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
详解python上传文件和字符到PHP服务器
2017/11/24 Python
python实现简单日期工具类
2019/04/24 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
Linux上比较文件的命令都有哪些
2013/09/28 面试题
自荐信的五个重要部分
2013/10/29 职场文书
求职信写作要突出重点
2014/01/01 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
办公用品管理制度
2015/08/04 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers