过滤选择器
过滤选择器通过特定的过滤规则来筛选元素语法特点是使用“:” , 如使用$(“li:first”)来选取第一个li元素
主要分类如下:
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器、 子元素过滤选择器……
验证以上理论的演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script>
/**
* 过滤选择器通过特定的过滤规则来筛选元素;<br>
*语法特点是使用“:” , 如使用$(“li:first”)来选取第一个li元素
* 主要分类如下:
* 基本过滤选择器<br>
* 可见性过滤选择器<br>
* 表单对象过滤选择器<br>
*内容过滤选择器、 子元素过滤选择器……<br>
**/
$(function() {
/*
* 语法: :first<br>
* 描述:选取第一个元素<br>
* 实例:$(" li:first" )选取所有<li>元素中的第一个<li>元素<br>
*
*/
//取出第一个元素
$("li:first").css("background-color", "red");
/**
* 语法: :last<br>
* 描述:选取最后一个元素<br>
* 实例:$(" li:last" )选取所有<li>元素中的最后一个<li>元素<br>
*
*/
//取出最后一个元素
$("li:last").css("background-color", "#09F");
/**
* 语法: :even<br>
* 描述:选取索引是偶数的所有元素(index从0开始)<br>
* 实例:$(" li:even" )选取索引是偶数的所有<li>元素<br>
*/
//取出偶数
$("li:even").css("background-color", "chartreuse");
/**
* 语法: :odd<br>
* 描述:选取索引是偶数的所有元素(index从0开始)<br>
* 实例:$(" li:even" )选取索引是偶数的所有<li>元素<br>
*
*/
//取出奇数
$("li:odd").css("background-color", "coral");
/**
* 语法: :eq(index)<br>
* 描述:选取索引等于index的元素(index从0开始)<br>
* 实例:$("li:eq(1 )" )选取索引等于1的<li>元素
*/
/**
* 语法: :eq(index)<br>
* 描述:选取索引等于index的元素(index从0开始)<br>
* 实例:$("li:eq(1 )" )选取索引等于1的<li>元素<br>
*
*/
//选取索引值等于1的元素
$("li:eq(1)").css("background-color", "red");
/**
* 语法: :gt(index)<br>
* 描述:选取索引大于index的元素(index从0开始)<br>
* 案例:$(" li:gt(1 )" )选取索引大于1的<li>元素(注: 大于1, 不包括1)<br>
*
*/
//选取索引值大于1的元素
$("li:gt(1)").css("background-color", "royalblue");
/**
* 语法: :lt(index);<br>
* 描述:选取索引小于index的元素(index从0开始)
* 案例:$(“li:lt(1 )” )选取索引小于1的<li>元素(注: 小于1, 不包括1)
*/
//选取索引值小于1的元素
$("li:lt(1)").css("background-color", "brown");
/**
* 语法: :not(selector)<br>
* 描述:选取去除所有与给定选择器匹配的元素<br>
* 案例:$(" li:not(.three)" )选取class不是three的元素<br>
*/
//根据选择器反向选择元素
$("li:not(.three)").css("background-color", "brown");
/**
* 语法: :header
* 描述:选取所有标题元素,如h1 ~h6
* 案例:$(":header" )选取网页中所有标题元素
*/
//选取所有标题元素
$(":header").css("background-color", "coral");
/**
* 语法: :focus
* 描述:选取当前获取焦点的元素<br>
* 案例:$(":focus" )选取当前获取焦点的元素
*/
//选取获得焦点的元素
$(":focus").css("background-color", "red");
//特殊符号的转义
//选择器中的特殊符号需要转义, 在如下html代码中
//获取这两个元素的选择器
/**
* $("#id#a");$("#id[2]");这两种写法是错误的
*/
$("#id\\#a").css("background-color", "red");
$("#id\\[2\\]").css("background-color","yellow");
//选择器中的空格
//选择器的注意事项
//选择器的书写规范很严格, 多一个空格或少一个空格,都会影响选择器的效果
//显示
$("p:visible").css("background-color","red");
//隐藏
$("p:hidden").css("background-color","yellow");
})
</script>
</head>
<body>
<h2>网络小说</h2>
<ul>
<li>王妃不好当</li>
<li>致命交易</li>
<li class="three">迦兰寺</li>
<li>逆天之宠</li>
<li>交错时光的爱恋</li>
<li>张震鬼故事</li>
<li>第一次亲密接触</li>
</ul>
<div id="id#a">aa</div>
<div id="id[2]">cc</div>
<p>我是内容。。</p>
</body>
</html>