jQuery基础（转）
JQuery基础
部署jQuery
使用如下语句将jQuery添加到工作文档中
<head> <title>Example</title> <script src="jquery-1.7.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"/> </head>
可以从网上下载到两个版本，jquery-1.7.js常常用在网站的开发阶段，有230KB，代码未经过压缩，你可以直接打开阅读里面的代码，学习jQuery里面的特性，而且在遇到问题的时候可以进入进行调试。jquery-1.7.min.js是经过压缩的版本，常常用在网站的部署阶段，里面的所有空白被删除，变量的名字采用了单个字母来代替，经过压缩的版本几乎不可能阅读的，但是只有31KB，可以大大的节省流量，也就意味着节省金钱。
还有一种部署的方式是使用public content distribution networks CDNs来存储jQuery。一个CDN是一个分布式的网络服务器，可以使用距离客户机最近的服务器向用户提供jQuery。这样的好处一是速度快，第二个是节省了网站服务器大量的流量。Google和Microsoft都提供了jQuery的CDN服务，而且是免费的。可以分别去网站www.asp.net/ajaxlibrary/cdn.ashx和http://code.google.com/apis/libraries/devguide.html来了解他们的CDN服务。但是这种方式不适合内网的网站，因为这样会需要客户机到外网获取jQuery，而其实距离他们最近的就是他们网站的服务器。
理解jQuery的$函数
你可以通过$(...)函数来进入jQuery，$符号是jQuery函数的缩写，你也可以使用jQuery来进入jQuery，如下：
<script type="text/javascript"> jQuery(document).ready(function () { jQuery("img:odd").mouseenter(function(e) { jQuery(this).css("opacity", 0.5); }).mouseout(function(e) { jQuery(this).css("opacity", 1.0); }); }); </script>
jQuery不是唯一使用$的javascript库，因此如果你引用了多个库的话就有可能发生冲突，你可以使用jQuery.noConflict方来来放弃jQuery的控制权，如下：
<script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function () { jQuery("img:odd").mouseenter(function(e) { jQuery(this).css("opacity", 0.5); }).mouseout(function(e) { jQuery(this).css("opacity", 1.0); }); }); </script>
你也可以通过将noConflict方法的结果赋给一个变量来更改自己的jQuery函数的简写版本，如下：
<script type="text/javascript"> var jq = jQuery.noConflict(); jq(document).ready(function () { jq("img:odd").mouseenter(function(e) { jq(this).css("opacity", 0.5); }).mouseout(function(e) { jq(this).css("opacity", 1.0); }); }); </script>
不管你如何表示jQuery函数，他们可以接受的参数和类型是不会变的，jQuery可以调用的函数形式如下
| 参数 | 描述 |
| $(function) | DOM准备好之后执行的函数 |
| $(selector) | 从文档中选择元素 |
| $(selector,context) | 从文档中选择元素 |
| $(HTMLElement) | 从HTMLElement或HTMLElement对象数组中创建jQuery对象 |
| $(HTMLElement[]) | 从HTMLElement或HTMLElement对象数组中创建jQuery对象 |
| $() | 创佳一个空的选择 |
| $(HTML) | 从HTML片段中创建新的元素 |
等待Document Object Model
一般在书写javascript代码的时候，为了让代码在整个文档加载完毕之后再执行，通常将代码写在文档的底部，使用jQuery函数可以设定让函数等待文档加载完毕再开始执行，如下：
<script type="text/javascript"> $(document).ready(function () { // ...code to execute... }); </script>
这里对于新手经常会犯的错误是忽略了function，结果就是ready里面的语句会立刻执行，并不是等到文档加载完毕再去执行，观察下面两个语句的不同：
<script type="text/javascript"> function countImgElements() { return $('img').length; } $(document).ready(function() { console.log("Ready function invoked. IMG count: " + countImgElements()); }); $(document).ready( console.log("Ready statement invoked. IMG count: " + countImgElements()) ); </script>
为了实现同样的效果，你可以克制直接将函数作为参数传递给jQuery$函数，同样也是等到文档加载完毕后开始执行，如下：
<script type="text/javascript"> $(function() { $("img:odd").mouseenter(function(e) { $(this).css("opacity", 0.5); }).mouseout(function(e) { $(this).css("opacity", 1.0); }) }); </script>
还可以控制ready时间执行的延迟时间，如下使用holdReay方法，必须在ready事件触发之前首先调用holdReay，当你准备好之后再次调用holdReady，如下：
<script type="text/javascript"> $.holdReady(true); $(document).ready(function() { console.log("Ready event triggered"); $("img:odd").mouseenter(function(e) { $(this).css("opacity", 0.5); }).mouseout(function(e) { $(this).css("opacity", 1.0); }) }); setTimeout(function() { console.log("Releasing hold"); $.holdReady(false); }, 5000); </script>
元素选择
选择器是jQuery最常用的功能之一，如下选择所有基数位置的图片
<script type="text/javascript"> $(document).ready(function() { $("img:odd").mouseenter(function(e) { $(this).css("opacity", 0.5); }).mouseout(function(e) { $(this).css("opacity", 1.0); }) }); </script>
但是因为odd是从下标0开始的，所以这里的第一个元素实际上是偶数。
jQuery支持所有的CSS选择器，同时还有一些自己的选择器扩展，例如:animated :contains(text) :eq(n) :even :first :gt(n) :has(selector) :last :lt(n) :odd :text，这些扩展选择很难用CSS表示，他们可以单独使用如$(':even')也可以与CSS选择器一起使用$('img:even')。此外jQuery还定义了一些类型选择器，如:button :checkbox :file :header :hidden :image :input :last :parent :password :radio :reset :selected :submit :visible
使用上下文缩小选择范围
默认情况下jQuery会搜索整个DOM文档来查找符合条件的元素，我们可以通过指定第二个参数来限制jQuery的搜索范围，如下
<script type="text/javascript"> $(document).ready(function() { $("img:odd", $('.drow')).mouseenter(function(e) { $(this).css("opacity", 0.5); }).mouseout(function(e) { $(this).css("opacity", 1.0); }) }); </script>
在这里当你提供了包含多个元素的上下文的时候，上下文的选择结果被集合到一起然后再进行逐查询，也就是同样一个元素在DOM和你设定的上下文中的序号可能是不一样的。
理解选择器结果
当你使用jQuery选择器的时候，结果是jQuery对象，jQuery对象有可能是0个或者多个DOM元素。当使用jQuery对一个或多个元素进行操作的时候，其返回键诶过也是jQuery对象。jQuery对象中定义的属性和方法有如下：context；each(function)；get(index) ；index(HTMLElement)； index(jQuery)； index(selector)； length； selector； size()； toArray()。
如可以使用selector来显示用来操作的选择符：
<script type="text/javascript"> $(document).ready(function() { var selector = $("img:odd").selector console.log("Selector: " + selector); }); </script>
context属性返回创建jQuery对象的时候的上下文，如果上下文是HTMLElement对象，那么就返回这个HTMLElemtn，如果没有上下文对象或者使用了多个元素作为上下文，那么返回的结果是undefined
<script type="text/javascript"> $(document).ready(function() { var jq1 = $("img:odd"); console.log("No context: " + jq1.context.tagName); var jq2 = $("img:odd", $('.drow')); console.log("Multiple context elements: " + jq2.context.tagName); var jq3 = $("img:odd", document.getElementById("oblock")); console.log("Single context element: " + jq3.context.tagName); }); </script>
从DOM对象创建jQuery对象
可以通过将HTMLElement对象或者HTMLElement数组传入$函数来获得jQuery对象，从而方便操作，这在操作JavaScript代码的时候非常有用，如下：
<script type="text/javascript"> $(document).ready(function() { var elems = document.getElementsByTagName("img"); $(elems).mouseenter(function(e) { $(this).css("opacity", 0.5); }).mouseout(function(e) { $(this).css("opacity", 1.0); }) }); </script>
将jQuery对象当成数组
可以将jQuery对象当成HTMLElement对象数组来看待，也就是你可以通过length属性和数组风格的方式来操作jQuery对象内部的数据，你可以通过调用toArray方法来转换成HTMLElement对象的数组，这通常在不使用jQuery操作HTMLElement元素的时候非常有用：
<script type="text/javascript"> $(document).ready(function() { var elems = $('img:odd'); for (var i = 0; i < elems.length; i++) { console.log("Element: " + elems[i].tagName + " " + elems[i].src); } }); </script>
历遍DOM对象函数
each方法允许你对每个jQuery对象中的DOM元素执行方法：
<script type="text/javascript"> $(document).ready(function() { $('img:odd').each(function(index, elem) { console.log("Element: " + elem.tagName + " " + elem.src); }); }); </script>
查找索引和特定元素
index方法返回jQuery对象中HTMLElement元素的索引。你也可以传递一个HTMLElemtn或jQuery对象作为参数，当使用jQuery对象作为参数的时候，将会返回第一个匹配的元素的索引，如下：
<script type="text/javascript"> $(document).ready(function() { var elems = $('body *'); // find an index using the basic DOM API var index = elems.index(document.getElementById("oblock")); console.log("Index using DOM element is: " + index); // find an index using another jQuery object index = elems.index($('#oblock')); console.log("Index using jQuery object is: " + index); }); </script>
你也可以传递一个字符串给index方法，字符串将会用来作为选择器，但是这样会使得index这个方法有不同的行为，jQuery使用这个选择器进行匹配元素，然后返回第一个匹配的元素在你调用这个方法的元素内的索引。
<script type="text/javascript"> $(document).ready(function() { var imgElems = $('img:odd'); // find an index using a selector index = imgElems.index("body *"); console.log("Index using selector is: " + index); // perform the same task using a jQuery object index = $("body *").index(imgElems); console.log("Index using jQuery object is: " + index); }); </script>
get方式是index方法的补充，通过传递元素的索引来获得索引，与使用数组的索引是一样的效果：
<script type="text/javascript"> $(document).ready(function() { var elem = $('img:odd').get(1); console.log("Element: " + elem.tagName + " " + elem.src); }); </script>
更改多个元素和调用方法链
jQuery的一个特点就是当一个jQuery调用一个方法的时候通常会对jQuery对象内所有的元素其作用，但是也有特殊的情况，因为并不是任何时候这样做都合理。如下面的代码中分别使用了两种不同的方法达到同样的效果：
<script type="text/javascript"> $(document).ready(function() { $('label').css("color", "blue"); var labelElems = document.getElementsByTagName("label"); for (var i = 0; i < labelElems.length; i++) { labelElems[i].style.color = "blue"; } }); </script>
jQuery的另外一个特点是实现了流式API，这意味着不管你什么时候调用方法更改对象的内容，返回的结果总是另外一个jQuery对象，这个特点看起来简单，但是却能够让你实现方法的链条调用：
<script type="text/javascript"> $(document).ready(function() { $('label').css("color", "blue").css("font-size", ".75em"); var labelElems = document.getElementsByTagName("label"); for (var i = 0; i < labelElems.length; i++) { labelElems[i].style.color = "blue"; labelElems[i].style.fontSize = ".75em"; } }); </script>
下面是一个更加复杂的例子
<script type="text/javascript"> $(document).ready(function() { $('label').css("color", "blue").add("input[name!='rose']")
.filter("[for!='snowdrop']").css("font-size", ".75em"); var elems = document.getElementsByTagName("label"); for (var i = 0; i < elems.length; i++) { elems[i].style.color = "blue"; if (elems[i].getAttribute("for") != "snowdrop") { elems[i].style.fontSize= ".75em"; } } elems = document.getElementsByTagName("input"); for (var i = 0; i < elems.length; i++) { if (elems[i].getAttribute("name") != "rose") { elems[i].style.fontSize= ".75em"; } } }); </script>
响应事件
jQuery使用类似于方法的方式来调用事件，如下：
<script type="text/javascript"> $(document).ready(function() { $("img:odd").mouseenter(function(e) { $(this).css("opacity", 0.5); }).mouseout(function(e) { $(this).css("opacity", 1.0); }) }); </script>
