jQuery入门知识简介


Posted in Javascript onMarch 04, 2010

到目前为之jQuery已经发布到1.4.2版本,而在这之前的一个星期他们刚发布1.4版本,看看他的各个版本的 发布时间 ,不难发现他的飞速发展,每个月都在更新版本;而且不断有人开发出新的 jQuery插件 ,最近又推出了 jQuery UI 库
jQuery于2006年一月十四号在BarCamp NYC (New York City)面世。主将 John Resig ,写有《Pro JavaScript Techniques》一书,因为效力于mozolla,据说firefox 3将包含Jquery,现在的 Jquery团队 有主要开发人员,推广人员,UI,插件开发,网站设计维护,其中3个主要开发人员分别是:两个美国人John Resig/Brandon Aaron,一个德国人Jorn Zaefferer)
下面简单介绍一下jQuery的一些特性和用法:
1、精准简单的选择对象(dom):

$('#element');// 相当于document.getElementById("element") 
$('.element');//Class 
$('p');//html标签 
$("form > input");//子对象 
$("div,span,p.myClass");//同时选择多种对象 
$("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景 
$(":input");//表单对象 
$("input[name='newsletter']");//特定的表单对象

2、对象函数的应用简单和不限制:
element.function(par); 
$(”p.surprise”).addClass(”ohmy”).show(”slow”)...

3、对已选择对象的操作(包括样式):
$("#element").addClass("selected");//给对象添加样式 
$('#element').css({ "background-color":"yellow", "font-weight":"bolder" });//改变对象样式 
$("p").text("Some new text.");//改变对象文本 
$("img").attr({ src: "test.jpg", alt: "Test Image" });//改变对象文本 
$("p").add("span");//给对象增加标签 
$("p").find("span");//查找对象内部的对应元素 
$("p").parent();//对象的父级元素 
$("p").append("<b>Hello</b>");//给对象添加内容

4、支持aJax,支持文件格式:xml/html/script/json/jsonp
$("#feeds").load("feeds.html");//相应区域导入静态页内容 
$("#feeds").load("feeds.php", {limit: 25}, function(){alert("The last 25 entries in the feed have been loaded");});//导入动态内容

4、对事件的支持:
$("p").hover(function () { 
$(this).addClass("hilite");//鼠标放上去时 
}, function () { 
$(this).removeClass("hilite");//移开鼠标 
});//鼠标放上去和移开的不同效果(自动循环所有p对象)

5、动画:
$("p").show("slow");//隐藏对象(慢速渐变) 
$("#go").click(function(){ 
$("#block").animate({ 
width: "90%", 
height: "100%", 
fontSize: "10em" 
}, 1000 ); 
});//鼠标点击后宽、高、字体的动态变化

6、扩展:
$.fn.background = function(bg){ 
return this.css('background', bg); 
}; 
$(#element).background("red");

如果要为每一个jQuery 对象添加一个函数,必须把该函数指派给 $.fn,同时这个函数必须要返回一个 this(jQuery 对象)
jQuery相关
《Learning jQuery:Better Interaction Design and Web Development with Simple JavaScript Techniques》第一本由jQuery的开发人员写的关于如何学习jQuery的书已经于七月面世,同时还有三本相关的书在问世当中。
jQueryCamp 2007,一个jQuery开发人员的见面会也将于10月27日在Boston召开。
VisualJquery是一个Jquery的学习和查询网站,也跟着更新到了1.1.2版本。
jQuery官网介绍翻译:
jQuery是一个以前未曾有过的JavaScript库。
他快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果。
jQuery是为了改变JavaScript的编写方式而设计的。
他适合所有人:设计师、开发人员、极客、商业应用...
体积小:26.5KB(1.2.1压缩版),45.3KB(1.2.1精简版),78.6KB(1.2.1完整版)...20.7KB(1.1.2压缩版),57.9KB(1.1.2完整版)
兼容性:支持CSS 1-3和基本的XPath
跨浏览器:IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+(向后兼容)
jQuery插件:
Ajax (25)/Animation and Effects (26)/Browser Tweaks (6)/Data (17)/DOM (21)/Drag-and-Drop (6)/Events (19)/Forms (39)/Integration (12)/JavaScript (20)/jQuery Extensions (37)/Layout (23)/Media (13)/Menus (13)/Navigation (23)/Tables (11)/User Interface (84)/Utilities (27)/Widgets (41)/Windows and Overlays (4)

jQueryUI库:
基本的鼠标互动:拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)
各种互动效果:手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow)

Javascript 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
js倒计时小程序
Nov 05 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
shiro授权的实现原理
Sep 21 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
jQuery 获取URL参数的插件
Mar 04 #Javascript
老鱼 浅谈javascript面向对象编程
Mar 04 #Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 #Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 #Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 #Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 #Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 #Javascript
You might like
Ajax PHP分页演示
2007/01/02 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python Pandas 箱线图的实现
2019/07/23 Python
python之array赋值技巧分享
2019/11/28 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Python Selenium截图功能实现代码
2020/04/26 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
标准毕业生自荐信范文
2013/11/04 职场文书
团队精神演讲稿
2013/12/31 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
通知范文怎么写
2015/04/16 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers