CSDN话题挑战赛第2期
参赛话题:前端技术分享
分享的本意就是总结并传播知识。这里,大家可以将自己掌握的前端知识总结,分享给大家。内容不限于分享技术干货、实用方案、框架解读、工具资源、前沿资讯等等,只要和前端技术有关即可,期待大家的大作~~~:
目录
过滤器
JQ过滤器
过滤器就是过滤条件,对已经定位到数组中的DOM对象进行过滤筛选,过滤条件不能独立出现在jQuery函数,如果使用只能出现在选择器后方。
基本过滤器
$("选择器:过滤器")
过滤器有:
:first - 保留数组中第一个DOM对象
:last - 保留数组中最后一个DOM对象
:even - 偶数
:odd - 奇数
:eq() - 等于 - 指定DOM对象
:gt() - 大于
:lt() - 小 于
:not() - 不符合的
:header - 标题
子元素过滤器
可筛选指定的元素的子元素
「:first-child
」
当前选中元素的第一个子元素
「:last-child
」
当前选中元素的最后一个子元素
「:nth-child
」
指定当前选中元素的第n个子元素
「:nth-last-child
」
指定当前选中元素的倒数第n个子元素
「:onlyt-child
」
指定当前选中元素的唯一子元素
内容过滤器
「:contains
」
选择所有处于隐藏状态的元素
案例
基础选择器
:first
<!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>JQ Filtre(过滤器)</title>
<script src="js/jQuery.min.js">
</script>
</head>
<body>
<h1>JQ Base Filter</h1>
<div>
<p>00-01</p>
<p>01-02</p>
<p>02-03</p>
</div>
<script>
$(document).ready(
function() {
// 1.base filter---:first
$("p:first").css("color","red");
}
);
</script>
</body>
</html>
:last
<!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>JQ Filtre(过滤器)</title>
<script src="js/jQuery.min.js">
</script>
<style>
body{
background-color:cadetblue;
}
</style>
</head>
<body>
<h1>JQ Base Filter</h1>
<div>
<p>00-01</p>
<p>01-02</p>
<p>02-03</p>
</div>
<script>
$(document).ready(
function() {
// 2.:last
$("p:last").css("color","yellow");
}
);
</script>
</body>
</html>
:even
:选择偶数的元素
偶数指的是—索引的数值
<!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>JQ Filtre(过滤器)</title>
<script src="js/jQuery.min.js">
</script>
<style>
body{
background-color:cadetblue;
}
</style>
</head>
<body>
<h1>JQ Base Filter</h1>
<div>
<p>00-01</p>
<p>01-02</p>
<p>02-03</p>
<p>03-04</p>
<p>04-05</p>
<p>05-06</p>
</div>
<script>
$(document).ready(
function() {
// 1.base filter---:first
// $("p:first").css("color","red");
// 2.:last
// $("p:last").css("color","yellow");
// 3.:even
$("p:even").css("color","blue");
}
);
</script>
</body>
</html>
:odd
—选择索引为奇数数值的元素
even、odd、first、last 以上都是将符合
冒号:
前条件的元素,收集起来放入集合中,从0开始编号为索引~ 对应的选择符合冒号:
后条件的元素~~~
<!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>JQ Filtre(过滤器)</title>
<script src="js/jQuery.min.js">
</script>