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 相关文章推荐
读jQuery之四(优雅的迭代)
Jun 20 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
php检查页面是否被百度收录
2015/10/28 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
python实现简单学生信息管理系统
2020/04/09 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
销售文员岗位职责
2013/11/29 职场文书
水果超市创业计划书
2014/01/27 职场文书
骨干教师考核方案
2014/05/09 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
节约用电通知
2015/04/25 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
公司年会主持词范文!
2019/05/07 职场文书