JavaScript库jQuery入门简介

作者:seektan 来源:蓝色理想 时间:2007-10-17 11:43:00 

jQuery是最近比较火的一个JavaScript库,从del.icio.us/上相关的收藏可见一斑。

到目前为之jQuery已经发布到1.2.1版本,而在这之前的一个星期他们刚发布1.2版本,看看他的各个版本的 发布时间 ,不难发现他的飞速发展,每个月都在更新版本;而且不断有人开发出新的 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相关

  1. 《Learning jQuery:Better Interaction Design and Web Development with Simple JavaScript Techniques》第一本由jQuery的开发人员写的关于如何学习jQuery的书已经于七月面世,同时还有三本相关的书在问世当中。

  2. jQueryCamp 2007,一个jQuery开发人员的见面会也将于10月27日在Boston召开。

  3. 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)

标签:jQuery,入门
0
投稿

猜你喜欢

  • ie6 img onload

    2009-04-08 17:23:00
  • 如何基于Python + requests实现发送HTTP请求

    2022-04-17 09:27:09
  • 一个非常简单好用的Python图形界面库(PysimpleGUI)

    2022-12-25 08:17:09
  • 详解python eval函数的妙用

    2021-12-23 10:56:05
  • php获取通过http协议post提交过来xml数据及解析xml

    2023-11-14 15:43:36
  • Python搭建代理IP池实现接口设置与整体调度

    2023-05-25 11:52:03
  • 5个款MySQL常用维护管理工具

    2010-10-25 19:45:00
  • 探讨如何配置SQL2008,让其允许C#远程外部连接的方法详解

    2024-01-23 10:51:09
  • 关于Python中的编码规范

    2021-11-07 02:38:02
  • bootstrap-table组合表头的实现方法

    2024-05-11 09:07:53
  • Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写

    2024-01-17 11:52:41
  • SQL SERVER 中构建执行动态SQL语句的方法

    2024-01-22 10:01:46
  • js实现文本框宽度自适应文本宽度的方法

    2024-04-19 09:52:36
  • Python三十行代码实现简单人脸识别的示例代码

    2022-08-29 18:07:49
  • MSMQ微软消息队列详解

    2024-05-03 15:32:00
  • vue-cli中使用高德地图的方法示例

    2024-04-27 16:09:39
  • Python3实现建造者模式的示例代码

    2021-05-11 13:30:16
  • 不唐突的JavaScript的七条准则[翻译]

    2008-12-09 13:33:00
  • javascript如何判断输入的url是否正确

    2024-06-10 00:57:55
  • Python实现判断一个字符串是否包含子串的方法总结

    2023-04-17 06:27:58
  • asp之家 网络编程 m.aspxhome.com