最简单的jQuery程序入门教学

发布时间：2022-06-07 14:09 所属栏目：122 来源：互联网

导读：Find me:使用选择器和事件 jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$(div ul a)）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。为了测

　　Find me:使用选择器和事件

　　jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

　　为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个ordered list.

　　一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们这样做：

　　$(document).ready(function() {

　　$("#orderedlist").addClass("red");

　　});这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注：参考测试包中的css目录下的core.css，其中定义了red样式)。因此，在你刷新了starterkit.html后，你将会看到第一个有序列表(ordered list )背景色变成了红色，而第二个有序列表没有变化.

　　现在，让我们添加一些新的样式到list的子节点.

　　$(document).ready(function() {

　　$("#orderedlist > li").addClass("blue");

　　});这样，所有orderedlist中的li都附加了样式"blue"。

　　现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。

　　$(document).ready(function() {

　　$("#orderedlist li:last").hover(function() {

　　$(this).addClass("green");

　　}, function() {

　　$(this).removeClass("green");

　　});

　　});还有大量的类似的CSS和XPath例子，更多的例子和列表可以在这里找到。

　　每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法。

（编辑：ASP站长网）