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>
<title></title>
<script src="jQueryNote/jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
.selector
{
background-color: Red;
}
</style>
<script type="text/javascript">
$(function () {
//1标签选择器
document.getElementById('btnTest').onclick = function () {
$('p').text('nhao');
};
});
//2id选择器
$(function () {
document.getElementById('btn').onclick = function () {
$('#p1').html('<font color="red">我们是中国人</font>');
};
});
//类选择器,表示选择页面上所有应用了类selector
$(function () {
document.getElementById('btn3').onclick = function () {
$('.selector').css('color', 'green');
//3层次选择器
$('div p').css('color', 'gray');
//4组合选择器
$('#p1,span').css('color', 'yellow');
//5标签+类选择器
$('.selector ol').css('color','blue');
};
});
</script>
</head>
<body>
<div>
<p></p>
</div>
<input type="button" name="name" value="测试" id="btnTest" />
<input type="button" name="name" value=" 测试2" id="btn" />
<input type="button" name="name" value="测试3" id="btn3" />
<div id="dv">
<p id="p1">
床前明月光</p>
<p>
疑是地上霜</p>
<span>我是郭德纲</span>
<p>
举头望明月</p>
<p>
低头思故乡</p>
</div>
<div class="selector">
<ol>
<li>jQuery三大选择器:id,类,标签</li>
</ol>
</div>
</body>
</html>
