您的位置：首页 > Web前端 > JQuery

JQuery笔记Ⅰ-朦胧篇

2010-09-25 13:15 127 查看

鸣谢：张子秋博客、baidu 、 google、wiki

JQuery--概念篇　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

jQuery是一套跨浏览器的JavaScript 库，强化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上释出第一个版本。目前全球有28%的站台使用jQuery，是目前最受欢迎的JavaScript库。

JQ官方网站http://jquery.com/

简介

jQuery免费且开放源代码，使用GPL和MIT许可证双协议。jQuery的语法设计使得许多操作变容易，如操作文档对象（document）、选择DOM元素、动画效果、事件处理、发展Ajax以及其他功能。除此之外，jQuery提供API让开发者将自己所写的功能融入jQuery内。

微软与诺基亚在2008年9月时宣布，会在他们的平台上内置jQuery。微软同时将jQuery与其开发工具Microsoft Visual Studio集成。

jQuery 1.3版以后，引入全新的CSS选择器引擎Sizzle。同时不再提供Packed版本，因为解压缩的消耗的时间，远大于所节省的下载时间，且不利于Debug，且已有Google AJAX Libraries API等公开站台提供jQuery的js的引用服务，故Packed版本原本的优点已荡然无存。

特点

例如：jQuery 有下列特色:

· 跨浏览器的DOM元素选择

· DOM 巡访与更改 —— 支持 CSS 1-3 与基本的XPath，jQuery 1.2版以后默认取消XPath支持，改为插件支持

· 事件（Events）

· CSS操纵

· 特效和动画

· Ajax

· 延伸性（Extensibility）

· 工具 —— 例如浏览器版本和each函数。

· JavaScript插件

· 轻量级

· DHTML DOM选择器与链式语法

经由jQuery的DHTML DOM选择器，可以更容易的操作在复杂的树状HTML中的任何DHTML DOM对象，并可用链式语法对同一对象的不同属性进行操作。

例如： $("p.surprise").addClass("ohmy").show("slow");

相当于

1 查找HTML的<p>标签，且其class为"surprise"的DHTML DOM对象

1 将其Class属性多加上一个"ohmy"（通常是配CSS的定义做显示时的配色修改）

1 打开显示

· CSS 1-3 选择器 —— 支持CSS选择器选定DOM对象。

· 跨浏览器 —— 跨浏览器的AJAX解决方式，支持Internet Explorer 6.0+、Opera 9.0+、Firefox 2+、Safari 2.0+、Google Chrome 1.0+

§ 简单 —— 较其它JavaScript库更易于入门。

找你很容易

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

　var someElement = $("#myId"); 　　

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


　　

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

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

JQuery对象jquery提供了很多遍历的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）： 　　
代替body标签的onload这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码： 　　

$(document).ready(function(){ 　　

alert("hello"); 　　

});(1) 　　

<body onload="alert('hello');">（2）


　　

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

不管怎么说，这个惯例可以分离javascrīpt与HTML。推荐使用。

添加VS智能提示
不再复述如何安装VS对jQuery的智能感知，可以参考http://hi.baidu.com/tianhaoer/blog/item/f335818f213dacf1503d9277.html。注意，这里要安装的是针对VS2008SP1的补丁。

参考资料：

jQ官方网站 http://jquery.com/

百度百科 http://baike.baidu.com/view/1020297.htm

启用VS对jQuery的智能感知http://hi.baidu.com/tianhaoer/blog/item/f335818f213dacf1503d9277.html

Wiki百科http://zh.wikipedia.org/zh/JQuery

var a = $("#cid"); 　　

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

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

var tb = $（c）;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航