jQuery入门第一课 jQuery选择符

2020-05-23 06:09:10易采站长站整理

</body>
</html>

效果如下:
image 


jQuery的强大之处还不限于此,除了支持CSS选择符以外,jQuery自身还支持其他的选择符,其中一大类就是基于位置的选择符。例如选择列表中的第一个,或者表格中的偶数行等等。这类选择器的一般形式是 :location,例如 a:first,匹配页面上第一个a, p:even 匹配页面上偶数个p.下面详细介绍。































选择器描述
:first页面最先出现的。li a:first 在li标签下第一个出现的a
:last同上,最后出现的。
:first-child最先的子元素
:last-child最后的子元素
:nth-child(n)返回第n个子元素(从1开始)
:nth-child(even|odd)返回第偶数|奇数个子元素
:even :odd第偶数、奇数个元素
:eq(n) :gt(n) :lt(n) 返回第n个元素(从0开始),第n个元素之后元素,第n个元素之前的元素


先看一个例子再作解释:

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Custom Selector</title>
<style type=”text/css”>
table
{
border-collapse: collapse;
font-family:Verdana;
}
td
{
padding-left: 10px;
padding-right: 10px;
border: solid 1px black;
}
</style>
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘tr:first’).css({fontWeight:’bold’,fontSize:’large’});
$(‘tr:even’).css(‘background-color’,’silver’);
$(‘tr td:first’).css(‘color’,’red’);
$(‘tr:gt(0) :first-child’).css(‘font-style’,’italic’);
$(‘p:eq(0)’).css({fontFamily:’Arial’,fontSize:’x-large’});
});