今天我主要学习的是Jquery属性选择器的使用,
至于Jquery包的引用这里就不写了,下面是我写的javascript代码,主要是练习Jquery属性选择器的
$(document).ready(function(){
$('#ready_play > li').addClass('title');
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdf');
$('a[href$=".doc"]').addClass('doc');
$('a[id]').addClass("doc");
});
我刚开始写的时候,把所有的选择属性的Jquery代码都写完了$('a[@href^="mailto:"]').addClass('mailto'); 那就是在href的属性前面都加上了@字符,效果怎么也显示不出来,后来去网上搜索一下,原来加@字符是旧版本的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>SecondDay</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ready_play > li').addClass('title');
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdf');
$('a[href$=".doc"]').addClass('doc');
$('a[id]').addClass("doc");
});
</script>
<style type="text/css">
a { text-decoration:none}
.title{ font-size:large;
font-style:oblique;
}
.pdf {color:red;}
.doc{color:green}
.mailto{ color:gray}
.noselect{text-decoration:overline}
</style>
</head>
<body>
<ul id="ready_play">
<li>首页
<ul>
<li>首页</li>
<li><a href="safsdf.pdf">pdf类型</a></li>
</ul>
</li>
<li>解决方案
<ul>
<li>解决方案</li>
<li><a href="bbbb.doc" id="aaa">doc类型</a></li>
</ul>
</li>
<li>我们的服务
<ul>
<li>我们的服务</li>
<li><a href="mailto:fsdfsdf.com">以mailto:开头的</a>
</ul>
</li>
<li>关于我们
<ul>
<li>关于我们</li>
<li><a href="#">没有文件类型</a></li>
</ul>
</li>
</ul>
</body>
</html>
例子很简单,希望朋友们看了能给个建议,谢谢
翱翔之心