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的多功能软键盘插件
Jul 25 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
微信小程序实现折叠展开效果
Jul 19 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
详细聊聊浏览器是如何看闭包的
Nov 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
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
python 实现倒排索引的方法
2018/12/25 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
linux面试题参考答案(5)
2014/09/01 面试题
学生会干部自荐信
2014/02/04 职场文书
小学教师培训感言
2014/02/11 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
派出所所长先进事迹
2014/05/19 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
项目合作协议书
2014/09/23 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript