jquery伪类选择器
html元素
<div class="mydiv" style="background: #000;" id="div_back">黑色</div><div class="emydiv" style="background: #ff0000;" id="div_red">红色</div><div class="mydiv" style="background: #00ff00;" id="div_green" as="ass"><p id="a">div中的p标签</p><div><p id="b">div中的div的p标签</p><p id="c">p3</p></div><p id="d">pd</p><div style="background: yellow">第二个div</div></div><p id="4">我是p标签</p>
:first选择器(选择第一个匹配的DOM元素)
<script type="text/javascript">//:first选择器(选择第一个匹配的DOM元素)var div = $('div:first');console.log(div);</script>
:last选择器(选择最后一个匹配的元素)
<script type="text/javascript">//:last选择器(选择最后一个匹配的元素)var div = $('div:last');console.log(div);</script>
:eq(index)选择器(在匹配的集合中选择索引值为index的元素)
<script type="text/javascript">//:eq(index)选择器(在匹配的集合中选择索引值为index的元素)// 要匹配元素的索引值（从0开始计数）var div = $('div:eq(2)');console.log(div);</script>
:gt(index)选择器(选择匹配集合中所有大于给定index（索引值）的元素)
<script type="text/javascript">//:gt(index)选择器(选择匹配集合中所有大于给定index（索引值）的元素)// 从0开始计数的索引值var div = $('div:gt(2)');console.log(div);</script>
:lt(index)选择器(选择匹配集合中所有索引值小于给定index参数的元素)
<script type="text/javascript">//:lt(index)选择器(选择匹配集合中所有索引值小于给定index参数的元素)// 从0开始计数的索引值var div = $('div:lt(2)');console.log(div);</script>
属性选择器
[attribute]属性选择器(选择所有具有指定属性的元素，该属性可以是任何值)
<script type="text/javascript">//[attribute]属性选择器(选择所有具有指定属性的元素，该属性可以是任何值)var div = $('div[as]');console.log(div);</script>
[attribute=value]属性选择器(选择指定属性是给定值的元素)
<script type="text/javascript">//[attribute=value]属性选择器(选择指定属性是给定值的元素)var div = $('div[class="emydiv"]');console.log(div);</script>
[attribute!=value]属性选择器(选择不存在指定属性，或者指定的属性值不等于给定值的元素。)
<script type="text/javascript">//[attribute!=value]属性选择器(选择不存在指定属性，或者指定的属性值不等于给定值的元素。)var div = $('div[class!="emydiv"]');console.log(div);</script>
[attribute^=value]属性选择器(选择指定属性是以给定字符串开始的元素)
<script type="text/javascript">//[attribute^=value]属性选择器(选择指定属性是以给定字符串开始的元素)var div = $('div[class^="my"]');console.log(div);</script>
[attribute$=value]属性选择器(选择指定属性是以给定值结尾的元素)
<script type="text/javascript">//[attribute$=value]属性选择器(选择指定属性是以给定值结尾的元素)var div = $('div[class$="div"]');console.log(div);</script>
html元素
<div class="mydiv" style="background: #000;" id="div_back">黑色</div><div class="emydiv" style="background: #ff0000;" id="div_red">红色</div><div class="mydiv aa cc" style="background: #00ff00;" id="div_green" as="ass"><p id="a">div中的p标签</p><div><p id="b">div中的div的p标签</p><p id="c">p3</p></div><p id="d">pd</p><div style="background: yellow">第二个div</div></div><p id="4">我是p标签</p>
[attribute*=value]属性选择器(选择指定属性具有包含一个给定的子字符串的元素)
<script type="text/javascript">//[attribute*=value]属性选择器(选择指定属性具有包含一个给定的子字符串的元素)var div = $('div[class*="aa"]');console.log(div);</script>
:checked选择器(匹配所有勾选的元素)
选择器适用于复选框 （checkbox） ，单选框（radio button），和select元素的option元素
综合小案例
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="jquery-3.4.1.min.js" type="text/javascript"></script></head><body><form><div><label>用户名</label><input type="text" name="username"></div><div><label>密码</label><input type="password" name="pwd"></div><div><label>重复密码</label><input type="password" name="repwd"></div><div><label>性别</label><input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="2">女</div><div><label>籍贯</label><select name="province"><option value="anhui">安徽</option><option value="zhejiang">浙江</option><option value="henan">河南</option><option value="fujian" selected>福建</option></select></div><div><label>用户状态</label><input type="checkbox" name="status" value="0">禁用</div><button type="button" onclick="save()">保存</button></form><script type="text/javascript">function save(){var username = $('input[name="username"]').val();var pwd = $('input[name="pwd"]').val();var repwd = $('input[name="repwd"]').val();var sex = $('input[name="sex"]:checked').val();var status = $('input[name="status"]:checked').val();//var province = $('select[name="province"]').val();var province = $('select option:selected').text();if(username==''){alert('请填写用户名');return;}if(pwd==''){alert('请填写密码');return;}if(pwd!=repwd){alert('两次密码不一致');return;}if(sex==undefined){alert('请选择性别');return;}if(status==undefined){alert('请选择用户状态');return;}}</script></body></html>