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 相关文章推荐
js 中 document.createEvent的用法
Aug 29 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
angular2使用简单介绍
Mar 01 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
JS数据类型分类及常用判断方法
Nov 19 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
Windows7下的php环境配置教程
2015/02/28 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python使用KNN算法识别手写数字
2019/04/25 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
如何利用Python 进行边缘检测
2020/10/14 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
英语系本科生个人求职信
2013/09/21 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
职代会闭幕词
2015/01/28 职场文书
公司慰问信范文
2015/03/23 职场文书
二审答辩状范文
2015/05/22 职场文书
毕业典礼主持词
2015/06/29 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis