<body>
<p>Email:<input type="text" name="email"></p>
<p>密码:<input type="text" name="password"></p>
<p>重复密码:<input type="text" name="repassword"></p>
<p>学号:<input type="text" name="stunum"></p>
<p>学分:<input type="text" name="stuscore"></p>
<p><input type="password"></p>
</body>
<script src="public/Js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('input[name=password]').css('background', 'red');
$('input[name=email]').css('background', 'green');
$('input[name^=stu]').css('background', 'blue'); //匹配stu开头的
$('input[name$=password]').css('background', 'gray'); //匹配password结尾的
$('input[name*=s]').css('background', 'pink'); //模糊匹配
</script>
简单选择器
<p>
<input type="text" />
<span>1</span>
<span>2</span>
</p>
<p>
<input type="text" />
<span>3</span>
<span>4</span>
</p>
<p>
<input type="text" />
<span>5</span>
<span>6</span>
</p>
<div><span>7</span></div>
</body>
<script src="public/Js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//alert($);
$('div span').css('background', 'yellow');
//input之后紧挨着的一个第一个span
$('input + span').css('background', 'green');
//input同级的所有span
$('input ~ span').css('background', 'red');
</script>
简单过滤器
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>
</body>
<script src="public/Js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li:first').css('background', 'pink');
$('li:last').css('background', 'red');
$('li:odd').css('background', 'gray'); //隔行变色:奇数
$('li:even').css('background', 'blue'); //隔行变色:偶数
$('li:eq(3)').css('background', 'yellow'); //选中特定行
</script>
内容过滤器
<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张飞</td>
<td>男</td>
<td>26</td>
</tr>
<tr>
<td>孙尚香</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td><span>赵云</span></td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>花木兰</td>
<td></td>
<td>22</td>
</tr>
</table>
<p><br /></p>
<p>a</p>
<p></p>
</body>
<script src="public/Js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 选中td中含有“女”的标签
$('td:contains(女)').css('background', 'green');
// 寻找td为空的
$('td:empty').css('background', 'yellow');
//寻找不为空的p标签,寻找有父节点资格的P标签
$('p:parent').css('background', 'pink');
//寻找td下含有span的
$('td:has(span)').css('background', 'red');
</script>