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 相关文章推荐
js切换光标示例代码
Oct 10 Javascript
javascript常用的正则表达式实例
May 15 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
express express-session的使用小结
Dec 12 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
Javascript的一种模块模式
2008/03/22 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
为什么需要版本控制?
2013/08/08 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
地陪导游欢迎词
2015/01/26 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
小学中队长竞选稿
2015/11/20 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Echarts如何重新渲染实例详解
2022/05/30 Javascript