Allan
菜鸟也是有梦想的...

导航

 

今天我主要学习的是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>

 

例子很简单,希望朋友们看了能给个建议,谢谢

翱翔之心

posted on 2011-07-30 18:09  AllanGuan  阅读(241)  评论(0编辑  收藏  举报