posts - 0,  comments - 1,  trackbacks - 0
jquery框架学习之选择器
2.2工厂函数$()
在jQuery中，任何类型的选择符都要从$()开始.
<1>标签名：$('p')会取得文档中的所有段落。
<2>ID：$('#some-id')会取得文档中的具有对应的some-id ID的一个元素。
<3>类：$('.some-class')会取得文档中带有some-class类的所有元素。
2.3CSS选择符
2.4XPath选择符
XPath：XML Path Language 是在XML文档中识别不同元素或者元素值的一种语言。与CSS在HTML文档中识别元素的方式类似。jQuery库支持一组基本的XPath选择符。
$('a[@href]')要选择所有带属性的链接。
属性选择符允许以类似正则表达式的语法来表示字符串的开始(^)和结尾($).使用*表示字符串中的任意位置。
 1   <style type="text/css">
 2           a{color:#00f;/*普通链接显示颜色*/}
 3        a.mailto{color:#f00;/*电子邮件链接显示颜色*/}
 4        a.pdflink{color:#080;/*指向pdf文件的链接显示颜色*/}
 5        a.mysite{
 6            text-decoration:none/*移除内部链接的下划线*/
 7            border-bottom:1px dotted #00f
 8        }
 9    </style>
10<script type="text/javascript">
11        $(document).ready(function(){
12            $('#selected-plays >li').addClass('horizontal');
13            $('#selected-plays li:not(.horizontal)').addClass('sub-level');
14            $('a[@href^="mailto:"]').addClass('mailto');
15            $('a[@href$=".pdf"]').addClass('pdflink');
16            $('a[@href*="mysite.com"]').addClass('mysite');
17        });
18        
19    </script>

2.5自定义选择符
jquery还可以添加独有的自定义选择符。
自定义选择符的语法与css的伪类选择符语法相同，即选择符以一个冒号开头，如：从匹配的带有horizontal类的div集合中，选择第二个项:
$('div.horizontal:eq(1)')
注：JavaScript数组采用从0开始的编号方式，所以eq(1)取得的是作为其父元素第一子元素的多有div。
jquery库中两个有用的自定义选择符:odd和:even。可以利用这两个选择符为表格添加基本的条文样式：
 1<html>
 2<head>
 3<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4<title>为表格添加交替样式</title>
 5<script type="text/javascript" src="js/jquery.js"></script>
 6<style type="text/css">
 7    .odd{
 8        background-color:#ffc;/*奇数行的背景颜色为浅黄色*/
 9    }
10    .even{
11        background-color:#cef;/*奇数行的背景颜色为浅蓝色*/
12    }
13    .highlight{
14        font-weight:blod;
15        color:#f00;
16    }
17</style>
18<script type="text/javascript">
19    $(document).ready(function(){
20        $('tr:odd').addClass('odd');
21        $('tr:even').addClass('even');;
22        $('td:contains("Henry")').addClass("highlight");
23    });
24</script>
25</head>
26<body>
27    <table>
28        <tr>
29            <td>jAs You Like It</td>
30            <td>Comedy</td>
31        </tr>
32        <tr>
33            <td>All's Well that Ends Well</td>
34            <td>Comedy</td>
35        </tr>
36        <tr>
37            <td>Hamlet</td>
38            <td>Tragedy</td>
39        </tr>
40        <tr>
41            <td>Macbeth</td>
42            <td>Tragedy</td>
43        </tr>
44        <tr>
45            <td>Romeo and Juliet</td>
46            <td>Tragedy</td>
47        </tr>
48        <tr>
49            <td>Henry IV,Part I</td>
50            <td>History</td>
51        </tr>
52        <tr>
53            <td>Henry V,Part II</td>
54            <td>History</td>
55        </tr>
56    </table>
57</body>
58</html>

posted on 2010-05-06 22:50 ohgrateboy 阅读(85) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by:
BlogJava
Copyright ©2025 ohgrateboy