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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
用python写扫雷游戏实例代码分享
2018/05/27 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python3.7 的新特性详解
2019/07/25 Python
python3实现单目标粒子群算法
2019/11/14 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
Order by的几种用法
2013/06/16 面试题
中秋节超市促销方案
2014/01/30 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
项目合作协议书范本
2014/04/16 职场文书
大型公益活动策划方案
2014/08/20 职场文书
2014年应急工作总结
2014/12/11 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android