主要介绍带有属性的选择器的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery选择器1</title>
</head>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 选择#box中所有处在隐藏状态下的p标签
$("#box p:hidden").css({'color':'red', 'font-size':'23px','display':'block'});
// 选择#box中所有处在显示状态下的p标签
$("#box p:visible").css({'color':'red', 'font-size':'23px'});
// 选择#box里所有有class属性的p标签
$("#box p[class]").css({'color':'red', 'font-size':'23px'});
// 选择#box里带有自定义create属性的p标签
$("#box p[create]").css({'color':'red', 'font-size':'23px'});
// 选择#box里create属性值为self-create的P标签
$("#box p[create=self-create]").css({'color':'red', 'font-size':'23px'});
// 选择#box里class属性值不是zero的p标签
$("#box p[class != zero]").css({'color':'red', 'font-size':'23px'});
// 选择#box里以t开头的class 属性名的p标签
$("#box p[class ^= t]").css({'color':'red', 'font-size':'23px'});
// 选择#box里以o结尾的class 属性名的p标签
$("#box p[class $= o]").css({'color':'red', 'font-size':'23px'});
// 选择#box里含有er字符串的class 属性名的p标签
$("#box p[class *= er]").css({'color':'red', 'font-size':'23px'});
})
</script>
<body>
<div id="box">
<p class="zero">后盾人</p>
<p style="display:none;">后盾人</p>
<p class="two">后盾人</p>
<p class="three">后盾人</p>
<p create="self-create">后盾人</p>
<p></p>
<p></p>
<div>
<p>人人做后盾</p>
<p>人人做后盾</p>
<p>人人做后盾</p>
</div>
</div>
</body>
</html>