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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
javascript实现异形滚动轮播
Nov 28 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 json_encode与json_decode详解及实例
2016/12/13 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
php框架知识点的整理和补充
2021/03/01 PHP
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
Django CBV类的用法详解
2019/07/26 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
《金子》教学反思
2014/04/13 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
Ruby处理YAML和json数据
2022/04/18 Ruby