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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python微信公众号开发简单流程
2018/03/23 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Python延时操作实现方法示例
2018/08/14 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
python中安装django模块的方法
2020/03/12 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
企业项目策划书
2014/01/11 职场文书
保护动物的标语
2014/06/11 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
2014年工程师工作总结
2014/11/25 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库