最简单的jQuery程序入门者学习

复制代码代码如下:<HTML> <HEAD> <STYLE type='text/css'> .css1{ display:block; width:100px; height:100px; background-color:blue; } .css2{ display:block; width:100px; height:100px; background-color:red; } </STYLE> </HEAD> <BODY> <a href='#' class='css1' id=freee>tt</a> <script src='jquery-1.3.2.js'> </script> <script> $(document).ready(function(){ $("#freee").hover(function(){ $(this).addClass("css2"); }, function(){ $(this).removeClass("css2"); }); }); </script> </BODY> </HTML> 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例子，更多的例子和列表可以在这里找到。（译者Keel注：入门看此文，修行在个人，要想在入门之后懂更多，所以这段话的几个链接迟早是要必看的！不会又要翻译吧...^_^!）每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（译者Keel注：jQuery不喜欢onXXX，所以都改成了XXX，去掉了on）。

　　推荐阅读

　　JavaScript 解析读取XML文档实例代码

JavaScript解析读取XML文件，主要就是加载并解析XML文件，然后就可以测试解析的XML文件的内容，打印输出来。在线演示：http://demo.jb51.net/js/2012/readxml/注：测试的时候需要在网站中测试，iis或apache中，注>>>详细阅读

本文标题：最简单的jQuery程序入门者学习

地址：http://www.17bianji.com/kaifa2/JS/28466.html

1/2 1

最简单的jQuery程序 入门者学习

最简单的jQuery程序入门者学习