jquery 四种选择器 – 炮渣日记

选择器

选择器是 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>

2、层次选择器

如果想通过 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、过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都以一个冒号开头

<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、表单选择器

为了使用户能够更灵活地操作表单，jQuery 中专门加入了表单选择器。利用这个选择器，能极其方便地获取到表单的某个或某类型的元素。

$(‘: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>