选择器
选择器是 jQuery 的根基,在 jQuery 中,对事件处理、遍历 DOM 和 ajax 操作都依赖于选择器。如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。
jQuery 中的选择器完全继承了 CSS 的风格。利用 jQuery 选择器,可以非常便捷和快速地找出特定的 DOM 元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器。学会使用选择器是学习 jQuery 的基础,jQuery 的行为规则都必须在获取到元素后才能生效。
1、基本选择器
基本选择器是 jQuery 中最常用的选择器,也是最简单的选择器,它通过元素 id、class和标签名等来查找 DOM 元素。可以使用这些选择器来完成绝大多数的工作。
<div id="box">小张</div>
<p class="abc">小耗子</p>
<ul class="ul1">
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<ul class="ul2">
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<script>
// jq帮我们做了循环工作
// 隐式迭代:给匹配到的所有元素,进行循环遍历,执行相应的方法,这个过程就叫做隐式迭代。
$('#box').css('background', 'red');
$('.abc').css('background', 'pink');
$('li').css('background', 'yellow');
// 群级选择器
$('#box, .abc, li').css('font-size', 40);
</script>
如果想通过 DOM 元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等,那么层次选择器是一个非常好的选择。
<ul>
<li>
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
</li>
<li>吃饭</li>
<li class="abc">睡觉</li>
<li>打豆豆</li>
<li>小张</li>
</ul>
<script>
$('ul li').css('border-bottom', '3px solid red'); // 子孙节点
$('ul').find('li').css('border-bottom', '3px solid red');
$('ul>li').css('border-bottom', '3px solid red'); // 子节点
$('ul').children().css('border-bottom', '3px solid red'); // 子节点
$('.abc+li').css('background', 'red'); // 下一个兄弟
$('.abc').next().css('background', 'red');
$('.abc~li').css('background', 'red'); // 下面所有的兄弟
$('.abc').nextAll().css('background', 'red');
</script>
3、过滤选择器
<ul>
<li>00</li>
<li>11</li>
<li>22</li>
<li class="abc">33</li>
<li class="abc">44</li>
<li>55</li>
<li>66</li>
<li>77</li>
</ul>
$('li:first').css('background', 'red'); // 第一个元素
$('li').first().css('background', 'red');
$('li:last').css('background', 'red'); // 最后一个元素
$('li').last().css('background', 'red');
$('li:eq(3)').css('background', 'pink'); // 下标为3的元素
$('li').eq(3).css('background', 'red');
$('li:odd').css('background', 'red'); // 下标奇数
$('li:even').css('background', 'green'); // 下标偶数
$('li').odd().css('background', 'red');
$('li').even().css('background', 'green');
$('li:gt(3)').css('background', 'green'); // 下标大于3的
$('li:lt(3)').css('background', 'green'); // 下标小于3的
$('li:lt(5):gt(2)').css('background', 'green'); // 下标小于5大于2的区间
$('li:not(.abc)').css('background', 'pink');
$('li').not('.abc').css('background', 'pink');
4、表单选择器
$(‘:checked’); // 选取所有被选中的 input 标签
$(‘:input’); // 选取所有 input textarea select button 元素
$(‘:text’); // 所有单行文本框,即类型为:type=”text”
$(‘:password’); // 密码框
$(‘:radio’); // 单选框
$(‘:checkbox’); // 多选框
$(‘:submit’); // 提交按钮
$(‘:reset’); // 重置按钮
$(‘:button’); // 普通按钮
$(‘:file’); // 上传域
<form action="">
<input type="text">
<input type="password" name="">
<input type="radio" name="" checked>
<input type="checkbox" name="" checked>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
<input type="file" name="">
</form>
<script>
console.log($(':input')); // 所有的表单元素
console.log($(':text')); // 单行文本
console.log($(':password')); // 密码
console.log($(':checked')); // 所有选中的radio checkbox option
console.log($(':radio:checked')); // 选中的单选按钮
</script>