课时四 jQuery基础过滤器
:animated Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 160px;
background-color: yellow;
float: left;
border: 1px solid #aaaaaa;
margin: 0 5px;
}
.colored{
background-color: green;
}
</style>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<button id="run">run</button>
<div></div>
<div id="mover"></div>
<div></div>
<script>
//效果 id为mover的div执行动画,点击按钮时改为绿色
$(function(){
$("#run").click(function(){
// 查找正在执行动画的div,点击按钮改变class
$("div:animated").toggleClass("colored");
});
function animatedit(){
// 用滑动动画显示或者隐藏一个元素
$("#mover").slideToggle("slow",animatedit)
};
animatedit();
})
</script>
</body>
</html>
效果:
:eq( ) Selector
:even Selector
:first Selector
:focus Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.focused{
background-color: #abcdef;;
}
</style>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<div id="content">
<input tabindex="1">
<input tabindex="2">
<select tabindex="3">
<option>select menu</option>
</select>
<div tabindex="4">
a div
</div>
</div>
<script>
$(function(){
// delegate(),给一个元素添加一个或多个事件
//toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
// setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在"任务队列"的尾部添加一个事件,因此要等到主线程把同步任务和"任务队列"现有的事件都处理完,才会得到执行。在某种程度上,我们可以利用setTimeout(fn,0)的特性,修正浏览器的任务顺序。
//setTimeout(fn,0)是异步函数
$("#content").delegate("*","focus blur",function(event){
var e =$(this);
setTimeout(function(){
// 当获取焦点时运用focused
e.toggleClass("focused",e.is(":focus"));
},0)
})
})
</script>
</body>
</html>
效果:焦点处背景颜色改变
:header Selector
:last Selector
:gt() Selector
:lt() Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.6.0.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>td #0</td>
<td>td #1</td>
<td>td #2</td>
</tr>
<tr>
<td>td #3</td>
<td>td #4</td>
<td>td #5</td>
</tr>
<tr>
<td>td #6</td>
<td>td #7</td>
<td>td #8</td>
</tr>
</table>
<script>
//索引值小于4的所有元素,让字体颜色变为红色
$(function(){
$("td:lt(4)").css("color","red")
})
</script>
</body>
</html>
效果://索引值小于4的所有元素,让字体颜色变为红色