jquery选择器(美元符号)的实例化应用2011-07-01文章来源：互联网浏览次数：2920jQuery框架jQuery是一个JavaScript库，它有助于简化JavaScript以及AsynchronousJavaScript+XML(Ajax)编程。与类似的JavaScript库不同，jQuery具有独特的基本原理，可以简洁地表示常见的复杂代码。学习jQuery基本原理，探索其特性和功能，执行一些常见的Ajax任务并掌握如何使用插件扩展jQuery。清单1所示。varexternal_links=document.getElementById('external_links');varlinks=external_links.getElementsByTagName('a');for(vari=0;ilinks.length;i++){varlink=links.item(i);link.onclick=function(){returnconfirm('Youaregoingtovisit'+this.href);};}清单2显示了使用jQuery实现的相同的功能。$(#external_linksa).click(function(){returnconfirm(Youaregoingtovisit+this.href);});清单2.使用了jQuery的DOM脚本是不是很神奇？使用jQuery，您可以把握问题的要点，只让代码实现您想要的功能，而省去了一些繁琐的过程。无需对元素进行循环，click()函数将完成这些操作。同样也不需要进行多个DOM脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。理解这一代码的工作原理可能会有一点复杂。首先，我们使用了$()函数——jQuery中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（CascadingStyleSheet，CSS）语法的字符串被传递给函数，然后jQuery尽可能高效地把这些元素找出来。如果您具备CSS选择器的基本知识，那么应该很熟悉这些语法。在清单2中，#external_links用于检索id为external_links的元素。a后的空格表示jQuery需要检索external_links元素中的所有a元素。用英语说起来非常绕口，甚至在DOM脚本中也是这样，但是在CSS中这再简单不过了一、jQuery如何进行实例化上一小节对jQuery进行了解释，在解释中，运用了一个实例来说明其在代码上的精简性，在这之中谈到了$()，这是整个jQuery库中最为核心的一部分，所有的函数都必须先经过它，才可对库中的方法进行调度。$()函数这就是jQuery的实例化操作函数，只有jquery对象才可运用库中的其他函数，否则将拒绝访问，提示错误。返回值：$(expr,context))函数返回一个含有所有与CSS选择器匹配的元素的jQuery对象jQuery对象类似于数组，但是它附带有大量特殊的jQuery函数。比方说，您可以通过调用click函数把click处理函数指定给jQuery对象中的所有元素。还可以向$()函数传递一个元素或者一个元素数组，该函数将把这些元素封装在一个jQuery对象中。下面介绍一些比较常用的实例化事例示例1-使用jQuery的ID选择器来进行实例化。varelements=$(#myId);以上代码，将获取到ID为myId的jquery对象.相当于DOM中document.getElementById('myId'),不同点为，后者返回的是一个DOM对象示例2-使用jQuery的标签选择器进行实例化varelements=$(p);以上代码，将获取整个DOM文档中所有标签为p的jquery对象，相当于DOM中的document.getElementsByTagName('p')，不同点为，后者返回多个标签为p的DOM对象.示例3-使用jQuery的css样式选择器进行实例化varelements=$(.container);以上返回的均为jQuery对象，结构上类似于数组。因为它返回的是jquery对象，所以可以进行方法的链接使用。介绍一简单的调用例子说明：获取html文档中ID为message的元素（返回的是jquery对象），设置它的background为yellow,它的innerHtml内容为hello,并显示出来示例原Html：divid=”message”div结果：divid=”message”style