码迷,mamicode.com
首页 > 其他好文 > 详细

blog

时间:2016-05-12 09:19:11      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:

jQuery:

       jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。

 

    

 
 

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。

 

基本信息

  • 中文名称

    Jquery

  • 外文名称

    Jquery

  • 定义

    id

  • 核心理念

    write less,do more

  • 发布时间

    2006年1月

 
  • 发布人

    John Resig

  • 发布地点

    美国纽约

  • 最新版本版本

    jQuery 2.1

  • 第一个版本

    jQuery 1.0(2006年8月)

折叠编辑本段?简要介绍

jQuery由美国人John Resig创建至今已吸引了来自世界各地的众多javascript高手加入其team包括来自德国的Jörn Zaefferer罗马尼亚的Stefan Petre等等jQuery是继prototype之后又一个优秀的Javascrīpt框架其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情

由于目前高校基本尚未开JavaScript的相关课程目前jQuery的学习使用研究都仅限于在职Web程序员之间

用jq的前提,首先要引用一个有jq的文件

lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

这个是jquery官方最新的地址可用在自己网站里加个这个就能使用jquery了 但仍然建议下载到本地服务器上

折叠编辑本段特点

  1. 动态特效
  2. AJAX
  3. 通过插件来扩展
  4. 方便的工具 - 例如浏览器版本判断
  5. 渐进增强
  6. 链式调用
  7. 多浏览器支持,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+(在2.0.0中取消了对Internet Explorer6,7,8的支持)

折叠编辑本段工厂函数

在编写js库代码时候你一定经常和“$”美元符号打交道吧无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作jQuery也这样做了但是它的功能远非如此瞧瞧以下的jQuery代码你就会发现它的美丽:

代码

var someElement = $("#myId");

看起来比其他两个框架的要多了一个#看看下面的用法:

代码

$("div p"); // (1)

$("div.container"); // (2)

$("div #msg"); // (3)

$("table a",context); // (4)

在prototype里看过这样的写法吗第一行代码得到所有div标签下的p元素第二行代码得到class 为container的div元素,第三行代码得到标签下面id为msg的div元素(不过最好别这样写因为jQuery需要遍历所有的div元素对于带id的元素直接用$("#id"))第四行代码得到context为上下文的table里面所有的链接元素

如果你熟悉CSS你会觉得这些写法很眼熟对了正是看出奥妙了吧jQuery就是如此强大你可以轻易地找到DOM中的任何元素而这也是jQuery设计之初query的真实含义(查询)

折叠编辑本段便利函数

jquery提供了很多便利的函数如each(fn)但是使用这些函数的前提是:你使用的对象是Jquery对象使一个Dom对象成为一个Jquery对象很简单通过下面一些方式(只是一部分):

代码

var a = $("#cid");

var b = $("<p>hello</p>");

var c = document.createElement("table");

var tb = $(c);

折叠编辑本段代替标签

这个惯例也许是除了$()之外用得最多的地方了下面一段代码:

$(document).ready(function(){

alert"hello");

});(1)

lt;body "alert‘hello‘);">(2)

lt;body "alert‘hello‘);">这里的alert‘hello‘);要等到页面全部加载完毕才执行注意是全部加载包括dom,图片等其它资源

而$(document).ready(function(){

alert"hello");

});(1)

当dom加载完就可以执行了

代码1同时做到表现和逻辑分离并且可以在不同的js文件中做相同的操作即$(document).ready (fn)可以在一个页面中重复出现而不会冲突基本上Jquery的很多plugin都是利用这个特性正因为这个特性多个plugin共同使用起来在初始化时不会发生冲突

当使用jquery时推荐使用代码1

$(document).ready(function(){fn}); 可以用 $(function(){fn});代替

如:

$(function(){

alert"hello");

});

折叠编辑本段事件机制

我们大量使用的事件可能就是button的onclick了以前习惯在input 元素上写 "fn()",使用jquery可以使javascrīpt代码与html代码分离保持HTML的清洁还可以很轻松地绑定事件甚至你可以不知道“事件”这个名词

代码

$(document).ready(function()

{

$("#clear").click(function(){

alert"i am about to clear the table");

});

$("form[12]").submit(validate);

});

function validate(){

//do some form validation

}

折叠编辑本段实现get\set

代码

$("selector").load(url,data,function(response,status,xhr))

该方法是最简单的从服务器获取数据的方法它几乎与 $.get(url, data, success) 等价不同的是它不是全局函数并且它拥有隐式的回调函数当侦测到成功的响应时(比如当 textStatus 为 "success" 或 "notmodified" 时).load() 将匹配元素的 HTML 内容设置为返回的数据这意味着该方法的大多数使用会非常简单

折叠编辑本段渐入淡出

代码

$("#msg").show("fast");

$("#msg").hide("slow");

$("#msg").fadeIn();

$("#msg").fadeOut();

没错上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出做一个像Gmail一样的动态加载通知条用jquery就那么简单两个函数接受的参数除了快慢等还可以接收整型作为渐入或淡出的完成时间单位为MS

blog

标签:

原文地址:http://www.cnblogs.com/fenghaozz/p/5484364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!