JQuery选择器

最新推荐文章于 2022-11-03 22:33:30 发布

ICY___

最新推荐文章于 2022-11-03 22:33:30 发布

阅读量121

点赞数

分类专栏： ICY___的Jquery入门文章标签： JQuery选择器

本文链接：https://blog.csdn.net/ICY___/article/details/87871487

版权

JQuery 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

ICY___的Jquery入门

9 篇文章 0 订阅

订阅专栏

听说Jquery很火，我也来凑个热闹，下面为大家介绍JQuery里面的强大的选择器。

有四大部分：基本选择器层级选择器过滤选择器表单选择器

讲真，如果js掌握的扎实的话，这一部分只需要多加练习即可掌握。写法和用法见代码：（建议自己亲自打一遍，加深记忆）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery选择器</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4
            <ol>44
                <li>444</li>
            </ol>
        </li>
        <li>5</li>
        <li>6</li>
        <li class="li7">7
            <li>777</li>
            <li>7777</li>
        </li>
        <li>8</li>
        <li>9</li>
    </ul>
    <div></div>
    <div><span></span></div>
    <button class="btn" id="btn1"> button1</button>
    <button style="display: none">button2</button>
    <input type="checkbox" checked>
    <input type="radio" checked>hai
    <script> 
        //$为JQuery对象
        console.log($);
        // 1.基本选择器
        console.log($('button'));//btn标签取
        console.log($('.btn'));//class取
        console.log($('#btn1'));//id取
        console.log($('*'));//通配符取
        console.log($('button,.btn,#btn1'));//连续取
        //2.层级选择器
        console.log($('ul li'));//取所有子集
        console.log($('ul>li'));//取儿子集
        console.log($('.li7+li'));//取紧接之后的相邻元素
        console.log($('.li7~li'));//取元素之后的所有元素
        // 3.过滤选择器
        // 简单过滤
        console.log($('ul>li:first'));//第一个（索引从0开始）
        console.log($('ul>li:last'));//最后一个
        console.log($('ul>li:even'));//所有偶数索引
        console.log($('ul>li:odd')); //所有奇数索引
        console.log($('ul>li:gt(1)'));//所有索引大于1的
        console.log($('ul>li:lt(1)'));//所有索引小于1的
        console.log($('ul>li:eq(0)'))//索引为0的
        console.log($('ul>li:not(.li7)'));//除了class为.li7的所有符合元素
        // 内容过滤
        console.log($('li:contains(777)'));//获取元素内容含有777的所有元素
        console.log($('div:empty'));//获取空元素
        console.log($('div:parent'));//获取含有子元素的元素(父)
        console.log($("div:has('span')"));//获取含有匹配元素的元素（父）
        //可见性选择
        console.log($('button:visible'));//可见
        console.log($('button:hidden'));//不可见
        // 属性选择器
        console.log($('button[id][class]'));//属性选择
        // 子元素过滤选择
        console.log($('ul>li:nth-child(2)'));//（不是索引）
        console.log($('ul>li:first-child'));//对应与css
        console.log($('ul>li:last-child'));
        // 表单元素属性过滤
        console.log($("input[type='checkbox']:checked"));//获取checked的checkbox的input
        console.log($("input[type='radio']:checked"));//获取checked的radio的input
        // 4.表单选择器(这些都可以)
        // :input;获取所有的input  textarea select
        // :text; 获取所有的单行文本框
        // :password;获取所有的密码框
        // :radio;获取所有的单行按钮
        // :checkbox;获取所有的复选框
        // :submit;获取所有提交按钮
        // :Image;获取所有图像域
        // :reset;获取所有重复按钮
        // :button;获取所有按钮
        // :fire获取所有文件域
    </script>
</body>

</html>

因为JQuery选择器很强大，所以比起原生js来说选择器多了不少，但功能和实现方式变丰富了，利用好选择器可以命名，努力努力再努力！