Jquery入门系列3---过滤选择器之基本过滤选择器和内容过滤选择器

本文链接：https://blog.youkuaiyun.com/qq_45461146/article/details/143752133

何为过滤选择器？

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，选择器都以冒号开头。过滤选择器可以分为基本过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器

我们一个个讲解，先讲基本过滤选择器。

基本过滤选择器

常用的基本过滤选择器我列了一张表，请看：

选择器	描述	示例
:first	选取第一个元素	$("div:first")选取所有<div>元素的第一个<div>元素
:last	选取最后一个元素	$("div:last")选取所有<div>元素的最后一个<div>元素
:not(selector)	去除所有与给定选择器匹配的元素	$("input:not(.myClass)")选取class不是myClass的<input>元素
:even	选取索引是偶数的所有元素，索引从0开始	$('input:even')选取索引是偶数的input元素
:odd	选取索引是奇数的所有元素，索引从0开始	$('input:odd')选取索引是奇数的input元素
:eq(index)	选取索引是index的所有元素，索引从0开始	$('input:eq(0)')选取索引等于0的input元素
:gt(index)	选取索引大于index的所有元素，索引从0开始	$('input:gt(0)')选取索引大于0的input元素
:lt(index)	选取索引小于index的所有元素，索引从0开始	$('input:lt(1)')选取索引小于1的input元素
:header	选取所有的标题元素，h1,h2,....	$(':header')选取页面中的<h1>,<h2>

练习环节：

框架给大家搭好了，如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div, span, p {
  width: 140px;
  height: 140px;
  margin: 5px;
  background: #aaa;
  border: #000 1px solid;
  float: left;
  font-size: 17px;
  font-family: Verdana;
}
div.mini {
  width: 55px;
  height: 55px;
  background-color: #aaa;
  font-size: 12px;
}
div.hide {
  display: none;
}
</style>
</head>
<body>
<div class="one" id="one">
  id为one，class为one的div
  <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
  id为two，class为one，title为test的div
  <div class="mini" title="other">class为mini，title为other</div>
  <div class="mini" title="test">class为mini，title为test</div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="tesst">class为mini，title为tesst</div>
</div>
<div style="display: none;" class="one">style的display为none的div</div>
<div class="hide">class为hide的div</div>
<div>包含input的type为hidden的div<input type="hidden" size="8"/></div>
<span id="mover">正在执行动画的span元素</span>
</body>
</html>

请听题

1.改变第一个<div>元素的背景色

第一个div,是不是用到过滤选择器的first,改变背景色，用.css("属性”，"值");

$("div:first").css("background","#bbffaa");

2.改变最后一个<div>元素的背景色

最后一个div,是不是用到过滤选择器的last,改变背景色，用.css("属性”，"值");

$("div:last").css("background","#bbffaa");

3.改变class不为one的<div>元素的背景色

不是，就是not，那就很简单

$("div:not(.one)").css("background","#bbffaa");

4.改变索引为偶数的<div>元素的背景色

$("div:even").css("background","#bbffaa");

5.改变索引为奇数的<div>元素的背景色

$("div:odd").css("background","#bbffaa");

6.改变索引为3的<div>元素的背景色

$("div:eq(3)").css("background","#bbffaa");

7.改变索引大于3的<div>元素的背景色

$("div:gt(3)").css("background","#ffbbaa");

8.改变索引小于3的<div>元素的背景色

9.改变所有标题元素的背景色

留2题给你们自己思考哦，很简单的，要对自己有信心，你们是最棒的

内容过滤选择器

内容过滤选择器主要过滤内容，或它所包含的子元素上，给大家列出了几种常见的

选择器	描述	示例
:contains(text)	选取含有文本内容为text的元素	$("div.contains('我')选取含有文本我的div元素
:empty	选取不包含子元素或者文本的空元素	$("div:empty")选取不包含子元素的div空元素
:has(selector)	选取含有选择器所匹配的元素	$("div:has('p')")选取含有p元素的div元素
:parent	选取含有子元素或者文本的元素	$("div:parent")选取含有子元素的div元素

练习环节：

1.改变含有文本di的<div>元素的颜色

$("div:contains('di')").css("background","#bbffaa");

2.改变不包含子元素的div空元素的背景色

3.改变含有class为mini元素的<div>元素的背景色

4.改变含有子元素的div元素的背景色

不会做的评论区留言或私信我要答案~