过滤选择器
2019-10-10 本文已影响0人
Tn299
过滤选择器的概念
通过特定的过滤规则来筛选出所需的元素.
选择器都以一个冒号（:）开头，冒号前是需要过滤的元素。
基本过滤选择器
image.png
例：
在浏览器中显示该页面时，
（1）、在单击“新闻标题”，来选取元素，更改“祝福冬奥”的字体颜色及背景。
（2）、在单击“首尾新闻标题”，来选取元素，更改二者的字体颜色。
（3）、在单击“隔行背景色不同”来选取元素，更改奇偶数行的背景色不一样；
（4）、在单击“前二行”来选取元素，更改元素的颜色。
image.png
代码
<title>仿冬奥列表内容</title>
<link rel="stylesheet" href="css/games.css">
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
$(document).ready(function(e) {
$("#mybtn1").click(function(){
$(".contain :header").css({
"color":"#ffffff",
"background":"blue"
});
});
$("#mybtn2").click(function(){
$(".contain li:first").css(
"color","red"
);
$(".contain li:last").css(
"color","red"
);
});
$("#mybtn3").click(function(){
$(".contain li:even").css(
"background","#ccc"
);
$(".contain li:odd").css(
"background","yellow"
);
});
$("#mybtn4").click(function(){
$(".contain li:lt(2)").css(
"background","green"
);
});
});
</script>
</head>
<body>
<div class="contain">
<h2>祝福冬奥</h2>
<ul>
<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
<li> 赵宏博：北京申办冬奥会是再合适不过了！</li>
<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
</ul>
</div>
<div style="text-align:center">
<input type="button" id="mybtn1" value="新闻标题" />
<input type="button" id="mybtn2" value="首尾新闻标题" />
<input type="button" id="mybtn3" value="隔行背景色不同" />
<input type="button" id="mybtn4" value="前二行" />
</div>
</body>
