选择器美元符号的实例化应用.docx

jquery选择器(美元符号)的实例化应用2011-07-01 文章来源：互联网 浏览次数：2920jQuery框架 jQuery 是一个JavaScript 库，它有助于简化 JavaScript 以及 Asynchronous JavaScript + XML (Ajax) 编程与类似的 JavaScript 库不同，jQuery 具有独特的基本原理，可以简洁地表示常见的复杂代码学习 jQuery 基本原理，探索其特性和功能，执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery清单 1 所示var external_links = document.getElementById('external_links'); var links = external_links.getElementsByTagName('a'); for (var i=0;i links.length;i++) { var link = links.item(i); link.onclick = function() { return confirm('You are going to visit ' + this.href); }; } 清单 2 显示了使用 jQuery 实现的相同的功能。

external_links a).click(function() { return confirm(You are going to visit + this.href); }); 清单 2. 使用了 jQuery 的 DOM 脚本 是不是很神奇？ 使用 jQuery，您可以把握问题的要点，只让代码实现您想要的功能，而省去了一些繁琐的过程无需对元素进行循环，click() 函数将完成这些操作同样也不需要进行多个 DOM 脚本调用您只需要使用一个简短的字符串对所需的元素进行定义即可理解这一代码的工作原理可能会有一点复杂首先，我们使用了 $() 函数 —— jQuery 中功能最强大的函数通常，我们都是使用这个函数从文档中选择元素在本例中，一个包含有一些层叠样式表（Cascading Style Sheet，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选择器来进行实例化var elements = $(#myId); 以上代码，将获取到ID为myId的jquery对象 .相当于DOM中document.getElementById('myId'),不同点为，后者返回的是一个DOM对象示例2 - 使用 jQuery 的标签选择器进行实例化var elements = $(p); 以上代码，将获取整个DOM文档中所有标签为p的jquery对象，相当于DOM中的document.getElementsByTagName('p')，不同点为，后者返回多个标签为 p的DOM对象.示例3 - 使用 jQuery 的css样式选择器进行实例化var elements = $(.container); 以上返回的均为jQuery 对象 ，结构上类似于数组。

因为它返回的是jquery对象，所以可以进行方法的链接使用介绍一简单的调用例子 说明 ：获取html文档中ID为message的元素（返回的是jquery对象），设置它的background为yellow,它的innerHtml内容为hello,并显示出来示例原Html ：div id=”message”div结果： div id=”message” style=”backgroundyellow;displayblock;”Hello!div备注 ：如果 displaynone的话，将变为displayblock或displayinline;二、 jQuery如何在页面中进行引用在需要使用JQuery的页面中引入JQuery的js文件即可例如：script type=textjavascript src=jsjquery.jsscript具体的路径，可以根据实际情况，来对”src”进行改动引入之后便可在页面的任意地方使用jQuery提供的语法三、 jQuery 的使用具体的使用查看相关的示例四、 jQuery 使用的注意事项1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象普通的dom对象一般可以通过$()转换成jquery对象如：$(document.getElementById(msg))则为jquery对象，可以使用jquery的方法由于jquery对象本身是一个集合所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出如：$(#msg)[0]，$(div).eq(1)[0]，$(div).get()[1]，$(td)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法以下几种写法都是正确的：$(#msg).html(); $(#msg)[0].innerHTML; $(#msg).eq(0)[0].innerHTML; $(#msg).get(0).innerHTML; 3、如何获取jQuery集合的某一项对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。

对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个div元素的内容有如下两种方法：$(div).eq(2).html(); 调用jquery对象的方法 $(div).get(2).innerHTML; 调用dom的方法属性 4、同一函数实现set和getJquery中的很多方法都是如此，主要包括如下几个：$(#msg).html(); 返回id为msg的元素节点的html内容 $(#msg).html(bnew contentb); 将“bnew contentb” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(#msg).text(); 返回id为msg的元素节点的文本内容 $(#msg).text(bnew contentb); 将“bnew contentb” 作为普文本串写入id为msg的元素节点内容中,页面显示bnew contentb $(#msg).height(); 返回id为msg的元素的高度 $(#msg).height(300); 将id为msg的元素的高度设为300 $(#msg).width(); 返回id为msg的元素的宽度 $(#msg).width(300); 将id为msg的元素的宽度设为300 $(input).val(); 返回表单输入框的value值 $(input).val(test); 将表单输入框的value值设为test $(#msg).click(); 触发id为msg的元素的单击事件 $(#msg).click(fn); 为id为msg的元素单击事件添加函数 同样blur,focus,select,submit事件都可以有着两种调用方法5、集合处理功能对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。

包括两种形式：$(p).each(function(i){this.style.color=['#f00',' #0f0','#00f'][i]}) 为索引分别为0，1，2的p元素分别设定不同的字体颜色 $(tr).each(function(i){this.style.backgroundColo r=['#ccc','#fff'][i%2]}) 实现表格的隔行换色效果 $(p).click(function(){alert($(this).html())}) 为每个p元素增加了click事件，单击某个p元素则弹出其内容 6、支持方法的连写所谓连写，即可以对一个jquery对象连续调用各种不同的方法例如：$(p).click(function(){alert($(this).html())}) .mouseover(function(){alert('mouse over event')}) .each(function(i){this.style.color=['#f00','#0f0', '#00f'][i]}); 7、操作元素的样式主要包括以下几种方式：$(#msg).css(background); 返回元素的背景颜色 $(#msg).css(background,#ccc) 设定元素背景为灰色 $(#msg).height(300); $(#msg).width(200); 设定宽高 $(#msg).css({ color red, background blue });以名值对的形式设定样式 $(#msg).addClass(select。