Correcting teacher:西门大官人
Correction status:qualified
Teacher's comments:
1、ID选择器$(#name)
<button id="btn">按钮</button>
<script>
$(function () {
// 点击按钮改变按钮的颜色
$('#btn').click(function () {
$(this).css('color','red');
});
});
</script>
2、类选择器$(.name)
<p class="text">这里是一段文字</p>
<button id="btn">按钮</button>
<script>
$(function () {
// 点击按钮隐藏文字
$('#btn').click(function () {
$('.text').hide();
});
});
</script>
3、元素选择器$('元素')
<ul>
<li>网站首页</li>
<li>产品中心</li>
<li>新闻资讯</li>
<li>文档下载</li>
</ul>
<script>
$(function () {
// hover 菜单改变颜色
$('li').hover(function () {
$(this).css('color','#df8348');
},function () {
$(this).css('color','#666666');
});
});
</script>
4、兄弟选择器$('~')
<ul>
<h2>中文网</h2>
<p>php中文网</p>
<li>网站首页</li>
<li>产品中心</li>
<li>新闻资讯</li>
<li>文档下载</li>
</ul>
<script>
$(function () {
// p后面所有的li 被选中
$('p ~ li').hover(function () {
$(this).css('color','#df8348');
},function () {
$(this).css('color','#666666');
});
});
</script>
5、子代选择器$('ul > p')
<ul>
<h2>中文网</h2>
<p>php中文网</p>
<li>网站首页</li>
<li>产品中心</li>
<li>新闻资讯</li>
<li>文档下载</li>
</ul>
<script>
$(function () {
$('ul > p').hover(function () {
$(this).css('color','#df8348');
},function () {
$(this).css('color','#666666');
});
});
</script>
6、后代选择器$('ul li')
<ul>
<div>
<li>菜单一</li>
<li>菜单二</li>
</div>
<li>网站首页</li>
<li>产品中心</li>
<li>新闻资讯</li>
<li>文档下载</li>
</ul>
<form action="">
用户:<input type="text">
密码:<input type="password">
</form>
<script>
$(function () {
//ul元素里面所有的li被选中
$('ul li').hover(function () {
$(this).css('color','#df8348');
},function () {
$(this).css('color','#666666');
});
});
</script>
7、紧邻选择器$('h2 + p')
<ul>
<h2>标题</h2>
<p>段落</p>
<li>网站首页</li>
<li>产品中心</li>
<li>新闻资讯</li>
<li>文档下载</li>
</ul>
<script>
$(function () {
//h2后面的p被选中
$('h2 + p').hover(function () {
$(this).css('color','#df8348');
},function () {
$(this).css('color','#666666');
});
});
</script>
THE END !