<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
//1.属性过滤
$("[style]").css("background-color","#a175dd"); //找带有 sytle 属性的 修改背景
//2.完全匹配属性值
$("[title='网站名称'").css("background-color","#bce738");
//3.指定属性值的起始字符串:'中'
$("[title^='中']").css("background-color","#eee636");
//4.指定属性值结束的字符串:网
$("[title$='网'").css("background-color","#d60808");
//5.属性中不等于某个字符的 完全匹配
// $("[title!='啊']").css("background-color","#c80808");
//6.模糊匹配 所有包含‘中’字的
$("[title*='中']").css("background-color","#ffffff");
//7匹配单词,字符串前或后有空格分隔的认为是单词
$("[title~='pet']").css("background-color","#5fd69d")
//8多个属性同时查询
$("[title][class]").css("background-color","#ddd69d")
})
</script>
</head>
<body>
<div id="box">
<h class="title"></h>
<ul class="list">
<li title="中文" class="child1">我是第1个</li>
<li title="网站名称" class="child2">我是第2个</li>
<li title="大中文网" class="child3">我是第3个</li>
<li class="child4">我是第4个</li>
<li title="pet dog">我是第6个</li>
<li style="height:20px" class="child5">我是第5个</li>
</ul>
</div>
</body>
</html>
表单过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
//1.选择所有文本域,加入边框
$("input:text").css("border","1px solid blue");
//2.修改密码输入框的说明文字
$("input:password").attr("placeholder","密码最少8位");
//3.选择所有复选框,加一个阴影
$("input:checkbox").css("box-shadow","2px 2px 2px red");
//4.给默认的复选框 设置一个 蓝色阴影
$("input:checked").css("box-shadow","2px 2px 2px blue");
//5.按钮背景修改
$(":button").css("background-color","red");
//6修改禁用元素的背景
$(":disabled").css("background-color","#ccc")
})
</script>
</head>
<body>
<div id="box">
<h1 class="title">表单过滤器</h1>
<from action="">
用户名:<input type="text" name="" id="" placeholder="输入用户名"><br>
密 码:<input type="password" placeholder="6到8位"></br>
内容选择<input type="checkbox" name="boy" value="读书">
<input type="checkbox" name="boy" checked value="游戏">
<input type="checkbox" name="boy" value="编程">
<input type="checkbox" name="boy" value="旅游">
<button type="submit">提交</button>
<input type="text" disabled placeholder="禁用">
</from>
</div>
</body>
</html>
位置过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
//1相等eq(n)
$("li:eq(0)").css("background-color","#ff5");
//2大于gt(7),最后两个8,9
$("li:gt(7)").css("background-color","#f55");
//3小于lt(2),前两个 0 1
$("li:lt(2)").css("background-color","#f75");
//选择第一额first
$("li:first").css("background-color","#7e48cc");
//5选择最后一个last
$("li:last").css("background-color","#2eab55");
//6选择所有偶数行
$("li:even").css("background-color","#3eebe3");
//7选择所有奇数行
$("li:odd").css("background-color","#e89a1e");
//8通用过滤器:nth-child()匹配父节点的第n个元素,可以用first,odd等
//8-1 全选:参数n n取值(1-max)注意N从1开始
$("li:nth-child(3)").css("background-color","#ffffff");
//选择偶数
$("li:nth-child(2n)").css("background-color","#ffffff");
$("li:nth-child(even)").css("background-color","#000000");
//选择奇数
$("li:nth-child(2n+1)").css("background-color","#feeff");
$("li:nth-child(odd)").css("background-color","#000fff");
})
</script>
</head>
<body>
<div id="box">
<h1 class="title">位置过滤器</h1>
<ul>
<li>位置过滤器1</li>
<li>位置过滤器2</li>
<li>位置过滤器3</li>
<li>位置过滤器4</li>
<li>位置过滤器5</li>
<li>位置过滤器6</li>
<li>位置过滤器7</li>
<li>位置过滤器8</li>
<li>位置过滤器9</li>
<li>位置过滤器10</li>
</ul>
</div>
</body>
</html>