jquery 常用操作整理 基础入门篇


Posted in Javascript onOctober 14, 2009

jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。

jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。

jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

Jquery是继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里看过这样的写法吗?第一行代码得到所有标签下的P元素。第二行代码得到class 为container的元素,第三行代码得到标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。

如果你熟悉CSS,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。
二,Jquery对象?

jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分):

代码

var a = $("#cid"); 

var b = $("hello"); 

var c = document.createElement("table"); 

var tb = $©;

三,代替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

代码

$("#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://jquery.com/plugins/ 很多牛的插件。

http://15daysofjquery.com/jquery 的15天教程

http://jquery.org.cn/visual/cn/index.xml //不错的JQUERY 中文学习 推荐

jquery来源

jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。

jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。

jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

jQuery的最新release版本是1.3.2。

官方下载地址为:http://code.google.com/p/jqueryjs/downloads/list

微软的visual studio 2008 sp1支持对jquery的动态提示,只要在代码页导入对应的vsdoc脚本就可以

Javascript 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
javascript常用函数(1)
Nov 04 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
一些技巧性实用js代码小结
Oct 14 #Javascript
Jquery 学习笔记(一)
Oct 13 #Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 #Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 #Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 #Javascript
通用javascript脚本函数库 方便开发
Oct 13 #Javascript
jquery pagination插件实现无刷新分页代码
Oct 13 #Javascript
You might like
生成php程序的php代码
2008/04/07 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
PHP实现的策略模式示例
2019/03/20 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
用JavaScript调用WebService的示例
2008/04/07 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
python实现telnet客户端的方法
2015/04/15 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python绘制规则网络图形实例
2019/12/09 Python
Python插件机制实现详解
2020/05/04 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
python中的yield from语法快速学习
2020/11/06 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
信息员培训方案
2014/06/12 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL