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国旗变换效果代码
Aug 13 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Python处理文本文件中控制字符的方法
2017/02/07 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
全球最大的服务市场:Fiverr
2017/01/03 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
班主任评语大全
2014/04/26 职场文书
地道战观后感300字
2015/06/04 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
tomcat下部署jenkins的方法
2022/05/06 Servers