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下组织javascript代码(js函数化)
Aug 25 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
js对象属性名驼峰式转下划线的实例代码
Sep 17 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中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
使用Python对微信好友进行数据分析
2018/06/27 Python
python 异或加密字符串的实例
2018/10/14 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python requests post多层字典的方法
2018/12/27 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
一个精品风格的世界:Atterley
2019/05/01 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
施工资料员的岗位职责
2013/12/22 职场文书
英文演讲稿
2014/05/15 职场文书
给学校的建议书范文
2014/05/15 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
安全教育观后感
2015/06/17 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
Tomcat弱口令复现及利用
2022/05/06 Servers