jQuery03
一． 简单选择器
<!DOCTYPE html>
<html>
<head>
<title>常规选择器</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function () {
//ID选择器
//$('#box').css('color', 'blue'); //添加一个行为，这个行为是添加样式
//元素标签名选择器
//$('div').css('color', 'maroon');
//类选择器
//$('.pox').css('color', 'green');
//alert($('#box').size());
//alert($('.pox').size());
//alert($('div').size());
//$('div').eq(1).css('color', 'red');
//alert($('div').length);
//$('#fox > p').css('color', 'red');
//$('#pox').css('color', 'red'); //jquery自动有容错的功能
//if (document.getElementById('pox')) {
// document.getElementById('pox').style.color = 'red';
//}
//很多情况下有动态DOM生成的问题，会导致执行不存在的ID选择器
//$('#pox').css('color', 'red');
//if ($('#pox').size() > 0) {
// $('#pox').css('color', 'red');
//}
//if ($('#pox').get(0)) {
// ...
//}
//if ($('#pox')[0]) {
// ...
//}
});
</script>
<style type="text/css">
/*
//ID选择器
#box {
color:red; //添加一个样式
}
//元素标签名选择器
div {
color:orange;
}
//类选择器
.pox {
color:red;
}
#fox > p {
color:red;
}
*/
</style>
</head>
<body>
<div id="box">常规选择器</div>
<div id="box">常规选择器</div>
<div id="box">常规选择器</div>
<div>常规选择器</div>
<div class="pox">常规选择器</div>
<div class="pox">常规选择器</div>
<div class="pox">常规选择器</div>
<hr>
<div id="fox">
<p>常规选择器</p>
<p>常规选择器</p>
<p>常规选择器</p>
<div>
<p>常规选择器</p>
<p>常规选择器</p>
<p>常规选择器</p>
</div>
</div>
</body>
</html>