jQuery 入门
2009-09-05 18:12
106 查看
昨天收到了cssrain的赠书《锋利的jQuery》,看了一个章节,非常不错,这里先推荐一下!
今天开始我将博客的重点放在jQuery上了,重新开始学习jQuery,并将重新学到的东西和大家分享,有不对或不妥的地方希望大家能毫无保留的留言指出,大家一起学习,一起进步。
至于什么是jQuery,jQuery的优缺点,jQuery和其他javascript库的对比我就不说了,网上已经有很多了,我这里只说一些可能更关心的一些东西。
我没JS基础,能学jQuery吗?
能!很多人说jQuery非常容易上手,不懂JS也能学的很好,是的,但是我相信如果你懂得JS能更好的学习jQuery。
有没有支持jQuery语法和语法提示的编辑器或工具呢?
有,而且很多。这里推荐最常用的几款:
1.aptana
官方下载:http://www.aptana.com/
aptana最强大的就是支持js及各个有名的js框架的语法提示,当然包括jQuery,看一些关于aptana的使用,
Aptana使用入门一(中文)
web开发利器Aptana studio 1.2(下载,破解,汉化)
aptana要支持jQuery语法提示只要在References窗口下的Global References下勾选jQuery就可以了,如图:
2.Dreamweaver cs4
cssrain开发了支持jQuery语法提示的插件,DW cs4的jQuery语法提示插件,安装这个插件需要Adobe Extension Manager扩展器
3.VS2008
Jeff King发布了一个jQuery智能提示Visual Studio 2008 SP1 补丁,安装这个补丁后,Visual Studio 2008可以自动找到vsdoc.js文件。
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
怎么配置jQuery?
先到jQuery官方网站(http://jquery.com/)下载jQuery库,目前最新版本是1.3.2,选择一个下载版本(开发版本和压缩版)如图:
开发版本和压缩版比较:
开发版:jquery-1.3.2.js,主要用于学习测试,
压缩版:jquery-1.3.2.min.js,主要用于项目开发,
下载好后引用这个jQuery库就可以了我们的jQuery开发了,在页面的<head></head>区插入<script type="text/javascript" src="jquery-1.3.2/jquery-1.3.2.min.js"></script>就可以了。
我们的第一个jQuery程序
我们写一个弹出Hello jQuery!的程序:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我们的第一个jQuery程序</title>
<script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello jQuery!");
});
</script>
</head>
<body>
</body>
</html>
:nth-child(index/even/odd/equation)和:eq(index)
:eq(index) 只匹配一个元素,索引值从0开始;
:nth-child(index/even/odd/equation) 匹配每一个父元素的第N个子或奇偶元素, 索引值从1开始,并且提供更丰富的参数及表达式;
:nth-child(even)// 匹配每一个父元素的偶数元素;
:nth-child(odd) // 匹配每一个父元素的奇数元素;
:nth-child(3n) // 匹配每一个父元素的索引值能被3整除的元素;
:nth-child(2) // 匹配每一个父元素的第2个元素;
:nth-child(3n+1) // 匹配每一个父元素的索引值被3整除后余1的元素
:nth-child(3n+2) // 匹配每一个父元素的索引值被3整除后余2的元素
所以:nth-child(index/even/odd/equation)匹配出来的是一个集合当然也有可能只匹配一个元素,而:eq(index)永远只能匹配到一个元素。
看示例(顺带:only-child也在这里测试一下):
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery1.3.2/jquery-1.3.2.min.js"></script>
</head>
<body>
<h3>我正在学习并且应用的技术</h3>
<ul>
<li>javascript</li>
<li>css2.1</li>
<li>html4</li>
<li>MXML</li>
</ul>
<h3>我想学习的技术</h3>
<ul>
<li>actionscript</li>
<li>css 3</li>
<li>html 5</li>
<li>PHP</li>
</ul>
<h3>我精通的技术</h3>
<ul>
<li>群里吹水</li>
</ul>
<div><input type="submit" name="button" id="button1" value="测试$('li:eq(2)')" />
<input type="submit" name="button" id="button2" value="测试$('li:nth(2)')" />
<input type="submit" name="button" id="button3" value="测试$('li:nth-child(even)')" />
<input type="submit" name="button" id="button4" value="测试$('li:nth-child(3n)')" />
<input type="submit" name="button" id="button5" value="测试$('li:only-child')" /></div>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("li:eq(2)").css("color","#FF3300");//这里匹配了<li>html4</li>
});
$("#button2").click(function(){
$("li:nth-child(1)").css("color","#0071db");//这里匹配了<li>javascript</li>、<li>actionscript</li>、<li>群里吹水</li>
});
$("#button3").click(function(){
$("li:nth-child(even)").css("color","#185309");//这里匹配了<li>css2.1</li>、<li>MXML</li>、<li>css 3</li>、<li>PHP</li>
});
$("#button4").click(function(){
$("li:nth-child(3n)").css("color","#185309");//这里匹配了<li>html4</li>、<li>html 5</li>
});
$("#button5").click(function(){
$("li:only-child").css("color","#4C1F68");//这里匹配了<li>html4</li>、<li>html 5</li>
});
});
</script>
</body>
</html>[/code]
今天开始我将博客的重点放在jQuery上了,重新开始学习jQuery,并将重新学到的东西和大家分享,有不对或不妥的地方希望大家能毫无保留的留言指出,大家一起学习,一起进步。
至于什么是jQuery,jQuery的优缺点,jQuery和其他javascript库的对比我就不说了,网上已经有很多了,我这里只说一些可能更关心的一些东西。
我没JS基础,能学jQuery吗?
能!很多人说jQuery非常容易上手,不懂JS也能学的很好,是的,但是我相信如果你懂得JS能更好的学习jQuery。
有没有支持jQuery语法和语法提示的编辑器或工具呢?
有,而且很多。这里推荐最常用的几款:
1.aptana
官方下载:http://www.aptana.com/
aptana最强大的就是支持js及各个有名的js框架的语法提示,当然包括jQuery,看一些关于aptana的使用,
Aptana使用入门一(中文)
web开发利器Aptana studio 1.2(下载,破解,汉化)
aptana要支持jQuery语法提示只要在References窗口下的Global References下勾选jQuery就可以了,如图:
2.Dreamweaver cs4
cssrain开发了支持jQuery语法提示的插件,DW cs4的jQuery语法提示插件,安装这个插件需要Adobe Extension Manager扩展器
3.VS2008
Jeff King发布了一个jQuery智能提示Visual Studio 2008 SP1 补丁,安装这个补丁后,Visual Studio 2008可以自动找到vsdoc.js文件。
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
怎么配置jQuery?
先到jQuery官方网站(http://jquery.com/)下载jQuery库,目前最新版本是1.3.2,选择一个下载版本(开发版本和压缩版)如图:
开发版本和压缩版比较:
开发版:jquery-1.3.2.js,主要用于学习测试,
压缩版:jquery-1.3.2.min.js,主要用于项目开发,
下载好后引用这个jQuery库就可以了我们的jQuery开发了,在页面的<head></head>区插入<script type="text/javascript" src="jquery-1.3.2/jquery-1.3.2.min.js"></script>就可以了。
我们的第一个jQuery程序
我们写一个弹出Hello jQuery!的程序:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我们的第一个jQuery程序</title>
<script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello jQuery!");
});
</script>
</head>
<body>
</body>
</html>
和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。 如: var $v =$(”#v”) ; //jQuery对象 var v=$v[0]; //DOM对象 alert(v.checked) //检测这个checkbox是否被选中 (2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象 如:var $v=$(”#v”); //jQuery对象 var v=$v.get(0); //DOM对象 alert(v.checked) //检测这个checkbox是否被选中 通过以上方法,可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。 jQuery选择器是我们学jQuery的真正的开始也是我们必须做的第一件事情,jQuery选择能让我们取得我们想要的几乎所有的页面DOM对象(如果你不知道什么是DOM元素,google一下“什么是DOM”)。确切的说我们获取的应该是jQuery对象,这在上面的章节中我已经说过两者的区别和转换。 大家知道javascript变成中很大一块是对DOM的操作,当我们获取了DOM元素后,我们就可以对改元素绑定事件,增删属性等操作,通过这些操作可以实现很多绚丽的页面效果和富因特网的应用,但是我们在做这些事情之前首相要通过DOM元素的钩子找到该DOM元素,javascript是非常灵活的语言,查找DOM元素和DOM元素的钩子方法非常多,再者由于各个浏览器对js dom属性解析的少许区别,也给我们带来了不少麻烦。jQuery的选择器就解决了这些问题,而且功能非常强大。 jQuery选择器函数–$() 大家可以去很多jQuery程序,绝大部分的函数都是从$()开始的,$()函数简化了javascript获取DOM元素的复杂性,消除了使用for循环获取一组DOM元素,所以$()函数获取的DOM元素其实是一个DOM元素组成的数组。 简单的$() 这些是最常用的几个例子: $(”div”):标签名,取得DOM文档中所有div标签的元素,返回的是一个元素集合; $(”#nickName”):ID属性,取得DOM文档中ID为nickName的一个元素(ps:一个文档中ID是唯一的),返回的是一个元素; $(”.user”):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合; 我们来看一个简单的例子:< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery简单的选择器</title> <script type="text/javascript" src="jquery-1.3.2/jquery-1.3.2.min.js"></script> <style type="text/css"> .txt-color1{ color:#FF0000} .txt-color2{ color:#666600} .txt-color3{ color:#000066} </style> </head> <body> <h1>jQuery简单的选择器</h1> <div>大家可以去很多jQuery程序,绝大部分的函数都是从$()开始的,$()函数简化了javascript获取DOM元素的复杂性,消除了使用for循环获取一组DOM元素</div> <div> <ol> <li>$("div"):标签名,取得DOM文档中所有div标签的元素,返回的是一个元素集合;</li> <li id="nickName">$("#nickName"):ID属性,取得DOM文档中ID为nickName的一个元素(ps:一个文档中ID是唯一的),返回的是一个元素;</li> <li class="user">$(".user"):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;</li> <li class="user">$(".user"):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;</li> </ol> </div> <script type="text/javascript"> $(document).ready(function(){ $("h1").addClass("txt-color1");//给标签为h1的加上txt-color1样式 $(".user").addClass("txt-color2"); $("#nickName").addClass("txt-color3"); }); </script> </body> </html>
$(”h1″).addClass(”txt-color1″);表示给标签为h1的加上txt-color1样式,
这里你要注意jQuer库的引用路径。我这里使用的是本地的。
jQuery选择器有很大一部分的写法和css选择器的写法非常相识,
我们先来看看;这些对于你应该不是很陌生,呵呵。那么我们开始学习jQuery选择器。
一、简单的jQuery选择器
首先看看最简单的jQuery选择器,再次说明jQuery选择器获取的DOM元素返回的是一个数组,及时他只返回一个元素:
查看上一篇jQuery选择器入门【jQuery入门三】中的$("div"):标签名,$("#nickName"):ID属性,$(".user"):样式名及例子,
$("div"):标签名,取得DOM文档中所有div标签的元素,返回的是一个元素集合,$(".user"):样式名:
$("#nickName"):ID属性,取得DOM文档中ID为nickName的一个元素(ps:一个文档中ID是唯一的),返回的是一个元素;
$(".user"):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;
这里再补充1个通配符,即*:
$(”*”):通配符,取得DOM文档中所有节点元素;例如:$(”*”).css(”color”,”#FF3300″);则整个文档的文字颜色都会显示红色。至于.css(”color”,”#FF3300″)给元素加上color:#FF3300的css样式,我们会在后面再给大家详细解释。
大家可以看看这个我们写的css选择器非常的相似,下面的例子也是一样,这样我们就非常容易理解jQuery选择器的含义了
二、jQuery的组合选择器:
$(”selector1,selector2,selectorN”):多元素组合选择器,将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。例如:$(”h1,div,li#nickName”),并查看一下代码:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery简单的选择器</title>
<script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery简单的选择器</h1>
<div>大家可以去很多jQuery程序,绝大部分的函数都是从$()开始的,$()函数简化了javascript获取DOM元素的复杂性,消除了使用for循环获取一组DOM元素</div>
<ol>
<li>$("div"):标签名,取得DOM文档中所有div标签的元素,返回的是一个元素集合;</li>
<li id="nickName">$("#nickName"):ID属性,取得DOM文档中ID为nickName的一个元素(ps:一个文档中ID是唯一的),返回的是一个元素;</li>
<li class="user">$(".user"):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;</li>
<li class="user">$(".user"):样式名,取得DOM文档中class为user的所有元素,返回的是一个元素集合;</li>
</ol>
<script type="text/javascript">
$(document).ready(function(){
$("h1,div,li#nickName").css("color","#FF3300")
});
</script>
</body>
</html>
三、JQuery的层级选择器:
$(”ancestor descendant”):在给定的祖先元素下匹配所有的后代元素,即子孙元素,例如:$(”div span.num”);
$(”parent > child”):在给定的父元素下匹配所有的子元素,例如:$(”div>span”);
$(”prev + next”):匹配所有紧接在 prev 元素后的 next 元素,即第一个跟屁虫的兄弟元素,例如:$(”p+span”);
$(”prev ~ siblings”):匹配 prev 元素之后的所有 siblings 元素,即一群跟屁虫的兄弟元素(当然也有可能是一个屁虫的兄弟元素,那就和$(”prev + next”)等价了),例如:$(”p~span”);
关于层级选择器的示例:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery简单的选择器</title>
<script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery简单的选择器</h1>
<div>javascript森林群规有<span class="num">120</span>个会员,其中管理员<span class="num">120</span>个;</div>
<div>javascript森林群博客目前有<span>30</span>作者,<span>10</span>篇文章;</div>
<p>我是愚人码头</p>
<span>你叫什么名字呢?</span>
<span>我爱javascript森林;</span>
<span>以为森林里有我好好多的朋友;</span>
<span>欢迎你加入我们;</span>
<div>
<input type="submit" name="button" id="button1" value="测试$('div span.num')" />
<input type="submit" name="button" id="button2" value="测试$('div/>span')" />
<input type="submit" name="button" id="button3" value="$('p+span')" />
<input type="submit" name="button" id="button4" value="测试$('p~span')" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("div span.num").css("color","#FF0033")
});
$("#button2").click(function(){
$("div>span").css("color","#FF0033")
});
$("#button3").click(function(){
$("p+span").css("color","#FF0033")
});
$("#button4").click(function(){
$("p~span").css("color","#FF0033")
});
});
</script>
</body>
</html>
四:简单的过滤选择器
:animated:匹配所有正在执行动画效果的元素集合;
:eq(index):匹配索引为 index 的一个元素,例如:$(”div:eq(0)”)//第一个div;
:even:匹配索引为偶数(双数)的元素集合,例如:$(”div:even”);
dd:匹配索引为奇数(单数)的元素集合,例如:$(”div:odd”);
:first:匹配找到的第一个元素,等价于:eq(0),例如:$(”div:first”);
:gt(index) :匹配索引大于 index 的 元素集合,例如:$(”div:gt(0)”)//除了第一个div外的所以div;
:lt(index):匹配索引小于于 index 的 元素集合,例如:$(”div:lt(0)”);
:header:匹配h1-h6的所有 元素集合;
:last:匹配找到的最后一个元素,例如:$(”div:last”)//最后一个div;
:not(selector):去除所有与给定选择器匹配的元素,例如:$(”input:not(:checked)”)//除了被选中的所有input;
示例代码:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery简单的选择器</title>
<script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery简单的选择器</h1>
<div>javascript森林群规有<span class="num">120</span>个会员,其中管理员<span class="num">120</span>个;</div>
<div>javascript森林群博客目前有<span>30</span>作者,<span>10</span>篇文章;</div>
<p>我是愚人码头</p>
<div class="txt"><span>你叫什么名字呢?</span>
<span>我爱javascript森林;</span>
<span>以为森林里有我好好多的朋友;</span>
<span>欢迎你加入我们;</span><div>
<div>
<input type="submit" name="button" id="button1" value="测试$('div:eq(1)')" />
<input type="submit" name="button" id="button2" value="测试$('.txt span:even')" />
<input type="submit" name="button" id="button3" value="测试$('.txt span:odd')" />
<input type="submit" name="button" id="button4" value="测试$('span:first')" />
<input type="submit" name="button" id="button5" value="测试$('span:gt(0)')" />
<input type="submit" name="button" id="button6" value="测试$('div:not(:last)')" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("div:eq(1)").css("color","#FF0033")
});
$("#button2").click(function(){
$(".txt span:even").css("color","#EE5533")
});
$("#button3").click(function(){
$(".txt span:odd").css("color","#66ff33")
});
$("#button4").click(function(){
$("span:first").css("color","#3300ff")
});
$("#button5").click(function(){
$("span:gt(0)").css("color","#990099")
});
$("#button6").click(function(){
$("div:not(:last)").css("color","#ff0099")
});
});
</script>
</div></div></body>
</html>
五、Jquery的子元素选择器
:first-child :匹配每个父元素的第一个子元素,相当于E:nth-child(0),例如:$(”ul li:first-child”);
:last-child :匹配每个父元素的最后一个子元素,例如:$(”ul li: last -child”);
:nth-child(index/even/odd/equation):匹配每一个父元素的第N个子或奇偶元素,例如:$(”ul li:nth-child(2)”);
nly-child :如果某个元素是父元素中唯一的子元素,那将会被匹配$(”ul li:only-child”);
六、子元素选择器和过滤性选择器的一些区别
:first-child和:first:
:first只匹配一个元素,而:first-child将为每个父元素匹配一个子元素,所以:first-child匹配出来的是一个集合当然也有可能只匹配一个元素,而:first永远只能匹配到一个元素。
:last-child和:last的区别道理也是一样的;
看示例:
[code]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.css88.com/jquery1.3.2/jquery-1.3.2.min.js"></script>
</head>
<body>
<h3>我正在学习并且应用的技术</h3>
<ul>
<li>javascript</li>
<li>css2.1</li>
<li>html4</li>
<li>MXML</li>
</ul>
<h3>我想学习的技术</h3>
<ul>
<li>actionscript</li>
<li>css 3</li>
<li>html 5</li>
<li>PHP</li>
</ul>
<h3>我精通的技术</h3>
<ul>
<li>群里吹水</li>
<li>忽悠新人</li>
</ul>
<div><input type="submit" name="button" id="button1" value="测试$('li:first')" />
<input type="submit" name="button" id="button2" value="测试$('li:first-child')" /></div>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("li:first").css("color","#FF3300");//这里匹配了<li>javascript</li>
});
$("#button2").click(function(){
$("li:first-child").css("color","#0071db");//这里匹配了<li>javascript</li>、<li>actionscript</li>、<li>群里吹水</li>
});
});
</script>
</body>
</html>
:nth-child(index/even/odd/equation)和:eq(index)
:eq(index) 只匹配一个元素,索引值从0开始;
:nth-child(index/even/odd/equation) 匹配每一个父元素的第N个子或奇偶元素, 索引值从1开始,并且提供更丰富的参数及表达式;
:nth-child(even)// 匹配每一个父元素的偶数元素;
:nth-child(odd) // 匹配每一个父元素的奇数元素;
:nth-child(3n) // 匹配每一个父元素的索引值能被3整除的元素;
:nth-child(2) // 匹配每一个父元素的第2个元素;
:nth-child(3n+1) // 匹配每一个父元素的索引值被3整除后余1的元素
:nth-child(3n+2) // 匹配每一个父元素的索引值被3整除后余2的元素
所以:nth-child(index/even/odd/equation)匹配出来的是一个集合当然也有可能只匹配一个元素,而:eq(index)永远只能匹配到一个元素。
看示例(顺带:only-child也在这里测试一下):
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery1.3.2/jquery-1.3.2.min.js"></script>
</head>
<body>
<h3>我正在学习并且应用的技术</h3>
<ul>
<li>javascript</li>
<li>css2.1</li>
<li>html4</li>
<li>MXML</li>
</ul>
<h3>我想学习的技术</h3>
<ul>
<li>actionscript</li>
<li>css 3</li>
<li>html 5</li>
<li>PHP</li>
</ul>
<h3>我精通的技术</h3>
<ul>
<li>群里吹水</li>
</ul>
<div><input type="submit" name="button" id="button1" value="测试$('li:eq(2)')" />
<input type="submit" name="button" id="button2" value="测试$('li:nth(2)')" />
<input type="submit" name="button" id="button3" value="测试$('li:nth-child(even)')" />
<input type="submit" name="button" id="button4" value="测试$('li:nth-child(3n)')" />
<input type="submit" name="button" id="button5" value="测试$('li:only-child')" /></div>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("li:eq(2)").css("color","#FF3300");//这里匹配了<li>html4</li>
});
$("#button2").click(function(){
$("li:nth-child(1)").css("color","#0071db");//这里匹配了<li>javascript</li>、<li>actionscript</li>、<li>群里吹水</li>
});
$("#button3").click(function(){
$("li:nth-child(even)").css("color","#185309");//这里匹配了<li>css2.1</li>、<li>MXML</li>、<li>css 3</li>、<li>PHP</li>
});
$("#button4").click(function(){
$("li:nth-child(3n)").css("color","#185309");//这里匹配了<li>html4</li>、<li>html 5</li>
});
$("#button5").click(function(){
$("li:only-child").css("color","#4C1F68");//这里匹配了<li>html4</li>、<li>html 5</li>
});
});
</script>
</body>
</html>[/code]
相关文章推荐
- JavaScript乱弹之(一)JQuery+CSS入门
- jQuery入门之事件
- jquery基本入门
- ASP.NET MVC和jQuery系列一:入门篇
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- jQuery入门简介、教程
- JQuery入门(二)
- 从零开始学习jQuery (一) 开天辟地入门篇
- JQuery--JQuery面向对象编程快速入门-插件开发
- jQuery 入门教程(27): jQuery UI Button示例(二)
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- [入门篇]Jquery读取.Net WebService Json数据
- 第1章 jQuery入门
- jQuery 入门教程(31): jQuery UI Datepicker 示例(四)
- 转,jQuery入门[4]-链式代码
- jQuery入门学习之安装及语法
- Jquery入门笔记
- Jquery学习入门一
- jquery入门―访问DOM对象方法