|
$(document).ready(function(){
//Allthehiddenimagesareshown
$("img:hidden").show();
//Thefirstpisgoingtobeorange
$("p:first").css("color","orange");
//Inputwithtypepassword
//thisis$("input[type='password']")
$("input:password").focus(function(){
alert("Thisisapassword!");
});
//Divswithparagraph
$("div:has(p)").css("color","green");
//Wecanalsocombinethem.with()
//Allnotdisabledcheckboxes
$("input:checkbox(:not(:disabled))").hover(function(){
alert("Thischeckboxisworking.");
});
}); |
如上例所示，可供使用的选择器是多种多样的，并且它们之前不是互相独立的，所以我们可以将这些选择器组合起来进行使用，如上例中的选择器。
理解网站的结构
网络的结构可能看起来非常复杂，但事实上并非如此，如果我们想要使用某些选择器以及作用于网络结构之上的方法。我们可以将网站视为一个颠倒的树，树根在顶部，而其他元素从根部延伸出来。查看下面的代码，试着想象一棵树，树根是body标签。
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>...</head>
<body>
<div id="wrapper">
<div id="main">
<h1>CreateanAccount!</h1>
<form id="myform" action="#" method="post">
<legend>PersonalInformation</legend>
<input type="text" name="email_address" value="EmailAddress"/>
<input type="checkbox" name="checking" value=""/>
</form>
<p>Message</p>
</div>
</div>
<div id="footer">
<p>Footermessage</p>
</div>
</body>
</html> |
以上示例代码的树形图如下：
很简单，是不是？从现在开始我们可以将html或xhtml看做一棵树，不过我们想做的是程序员，这些植物学的理论有什么用处？答案就在下一个要点之中。
