小白入门第九天 —— jQuery选择器

程序员文章站 2022-06-16 10:27:55

...

了解一下什么是选择器

匹配对应的HTML元素

DOM也有类似用法，如querySelector()方法和querySelectorAll()方法，就是利用css选择器定位的页面元素。

jQuery相比于DOM的性能要好。

jQuery选择器是将工厂函数当作容器，语法：

var element = $(selector);

selector – 是参数，表示jQuery的选择器。

完整：

<head>
	<script src="./jQuery文件/jquery.js"></script>
</head>
<body>
    <button id="btn"></button>
    <script>
        var element = $(btn);
        console.log(element);
    </script>
</body>
// jQuery.fn.init [button#btn, context: button#btn]

$('#one').css('background','#bfa');

返回值 – jQuery的工厂函数会返回一个jQuery对象。

jQuery.fn.init {context: document, selector: "#one"}

jQuery定义一个元素时，仍然是一个集合。

选择器有哪些

基本选择器

ID选择器
元素选择器
类选择器
通配选择器
组合选择器

描述：

选择器	描述
ID选择器	根据给定ID匹配元素
元素选择器	根据给定名称匹配元素
类选择器	根据给定类名匹配元素
通配选择器	匹配所有元素
组合选择器	把每一个选择器匹配到的元素合并一起返回

<body>
    <div id="d1">基本选择器</div>
    <div id="d2" class="c1">类选择器</div>
    <script>
        // ID选择器
        console.log($('#d1')); 
        //    jQuery.fn.init(1)
        /*  0: div#d1
        */

        //  元素选择器
        console.log($('div'));
        //    jQuery.fn.init(2)
        /*  0: div#d1
            1: div#d2.c1
        */

        //  类选择器
        console.log($('.c1'));
        //    jQuery.fn.init(1)
        /*  0: div#d2.c1
        */

        //----   
        console.log($('class'));
        //    jQuery.fn.init(0)

        //  通配选择器  -- 找所有元素
        console.log($('*'));
        //    jQuery.fn.init(10)
        /*  0: html
            1: head
            2: meta
            3: meta
            4: title
            5: script
            6: body
            7: div#d1
            8: div#d2.c1
            9: script
        */

        //  组合选择器  -- 多个选择器用逗号隔开
        console.log($('#d1,.c1')); //加逗号是并集
        //    jQuery.fn.init(2)
        /*  0: div#d1
            1: div#d2.c1
        */
        //多个选择器没有分隔
        console.log($('#d1.c1')); //不加逗号是交集
        //    jQuery.fn.init(0)
        
        console.log($('#d2.c1')); //不加逗号是交集
        //    jQuery.fn.init(1)
        /*   0: div#d2.c1
        */
    </script>
</body>

层级选择器

后代选择器
子选择器
相邻兄弟选择器
普通兄弟选择器

描述：

选择器	描述
后代选择器	根据祖父元素匹配所有后代元素
子选择器	根据父元素匹配所有子元素
相邻兄弟选择器	根据目标元素匹配下一个相邻兄弟元素
普通兄弟选择器	根据目标元素匹配后面所有兄弟元素

<body>
    <div id="parent">
        <div id="child1">
            <div id="d6"></div>
            <div id="d1"></div>
            <div id="d2"></div>
            <div id="d3"></div>
            <div id="d4"></div>
        </div>
        <div id="child2">
            <div id="d5"></div>
        </div>
    </div>
    <script>
        //获取父级以下的元素
        console.log($('#parent div'));
        //   jQuery.fn.init(7)
        /*  0: div#child1
            1: div#d1
            2: div#d2
            3: div#d3
            4: div#d4
            5: div#child2
            6: div#d5
        */

        //根据父级获取子级元素
        console.log($('#parent>div'));
        //   jQuery.fn.init(2)
        /*  0: div#child1
            1: div#child2
        */

        //指定元素的下一个相邻兄弟元素
        console.log($('#d1+div'));
        //   jQuery.fn.init(1)
        /*  0: div#d2
        */

        //指定元素的后面所有的兄弟元素 
        console.log($('#d1~div'));
        //   jQuery.fn.init(3)
        /*  0: div#d2
            1: div#d3
            2: div#d4
        */
        // siblings - 获取指定元素的兄弟元素的（前+后）
        console.log($('#d1').siblings('div'));
        /*  0: div#d6
            1: div#d2
            2: div#d3
            3: div#d4
        */
        
    </script>
</body>

基本过滤选择器

:first过滤选择器
:last过滤选择器
:even过滤选择器
:odd过滤选择器
:eq()过滤选择器
:gt()过滤选择器
:lt()过滤选择器
:not()过滤选择器
:header过滤选择器
:animated过滤选择器

描述：

选择器	描述
`first`过滤选择器	获取第一个元素
`:last`过滤选择器	获取最后一个元素
`:even`过滤选择器	找所有偶数索引值（奇数元素），从0开始
`:odd`过滤选择器	找所有奇数索引值（偶数元素），从0开始
`:eq()`过滤选择器	找一个和给定索引值一样的元素
`:gt()`过滤选择器	找所有大于给定索引值的元素
`:lt()`过滤选择器	找所有小于给定索引值的元素
`:not()`过滤选择器	去掉所有与给定选择器相匹配的元素
`:header`过滤选择器	找h1类的标题元素
`:animated`过滤选择器	找所有正在执行动画效果的元素

注：jQuery对象是类数组对象，即使匹配的元素只有一个，返回的结果还是类数组对象。

<style>
    #dong{
        width: 100px;
        height: 150px;
        background-color: aqua;
    }
</style>
<body>
    <h1>biaoti1</h1>
    <h7>biaoti2</h7>
    <div>基本过滤选择器</div>
    <div id="d2">
        <div id="child"></div>
    </div>
   <div></div>
   <div></div> 
   <div></div> 
   <div id="dong"></div> 
   <script>
       //要在指定范围元素内筛选
       console.log ($('div:first'));
       /*  0: div
       */
       console.log ($('div:last')); //获取最后个元素
        /*  0: div
       */

        //索引值为偶数
        console.log($('div:even')); //找所有奇数元素
        /*  0: div
            1: div#child
            2: div
            3: div#dong
        */
        //索引值为奇数
        console.log($('div:odd'));  //找所有偶数元素
        /*  0: div#d2
            1: div
            2: div
        */

        //比较的
        console.log($('div:eq(0)')); // 匹配给定索引值的元素
        /*  0: div
        */
        console.log($('div:gt(2)')); // 大于给定索引值的元素
        /*  0: div
            1: div
            2: div
            3: div#dong  
        */
        console.log($('div:lt(2)')); // 小于给定索引值的元素
        /*  0: div
            1: div#d2 
        */

        //匹配h1~h7元素
        console.log($(':header'));  //找标题元素
        /*  0: h1
            1: h7
        */

        function dong(){
            $('#dong').slideToggle(dong);
        }
        dong();

        console.log($(':animated'));  //:animated --  只能匹配jQuery实现的动画
        /*  0: div#dong
        */

        //去掉所有与给定选择器相匹配的元素
        console.log($('div:not("#chilsd")'));
        /*  0: div
            1: div#d2
            2: div#child
            3: div
            4: div
            5: div
            6: div#dong
        */
   </script>
</body>

内容过滤选择器

:contains() 过滤选择器
:empty 过滤选择器
parent 过滤选择器
has() 过滤选择器

描述：

选择器	描述
`:contains()` 过滤选择器	寻找包含给定文本的元素
`:empty` 过滤选择器	寻找所有不包含子元素或者文本的空元素
`:parent` 过滤选择器	寻找含有子元素或者文本的元素
`has()` 过滤选择器	寻找含有选择器所匹配的元素的元素

<div>div元素</div>
    <div></div>
    <div>
        <div id="child"></div>
    </div>
    <script>
        //寻找包含给定文本的元素
        console.log($('div:contains("di")'));
        /*
            0: div
        */

        //寻找所有不包含子元素或者文本的空元素
        console.log($('div:empty'));
        /*
            0: div
            1: div#child
        */

        //寻找含有子元素或者文本的元素
        console.log($('div:parent'));
        /*
            0: div
            1: div
        */

        //:has() -- 寻找含有选择器所匹配的父级元素
        console.log($('div:has("#child")')[0]);
        /*以div为标准去找div里#child的父级
        <div>
            <div id="child"></div>
        </div>
        */
    </script>

可见性过滤选择器

:hidden过滤选择器
:visible过滤选择器

描述：

选择器	描述
:hidden过滤选择器	匹配所有不可见元素，或者type为hidden的元素
:visible过滤选择器	匹配所有的可见元素

<style>
        #d1{
            display: none;
        }
        #d2{
            visibility: hidden;
        }
</style>
<body>
    <div id="d1">可见性</div>
    <div id="d2">过滤选择器</div>
    <input type="hidden" value="用户名">
    <input type="text" value="username">
    <script>
        /*:hidden*/
        /*  不能匹配样式属性visibility为hidden的隐藏元素
            不能匹配html中不做显示效果的元素
        */
        /*使用时先确定元素类型或指定范围*/
       console.log($(':hidden'));   //所有不可见元素，或者type为hidden的元素
        /*   0: head
            1: meta
            2: meta
            3: title
            4: script
            5: style
            6: div#d1
            7: input
            8: script 
        */

        /*visible*/
        /*   能匹配样式属性visibility为hidden的隐藏元素
                visibility为hidden时，还是会占有页面空间   
            还能匹配HTML中的html和boby元素 
        
        */
        console.log($(':visible'));
        /*  0: html
            1: body
            2: div#d2
            3: input
        */
    </script>
</body>

属性过滤选择器

[attr] 过滤选择器
[attr=value] 过滤选择器
[attr!=value] 过滤选择器
[attr^=value] 过滤选择器
[attr$=value] 过滤选择器
[attr*=value] 过滤选择器
组合属性过滤选择器

选择器	描述
`[attr]` 过滤选择器	匹配包含给定属性的元素
`[attr=value]` 过滤选择器	匹配给定的元素是某个特定值的元素
`[attr!=value]` 过滤选择器	匹配所有不含有指定的元素,或者属性不等于特定值的元素
`[attr^=value]` 过滤选择器	匹配给定的属性是以某些值开始的元素
`[attr$=value]` 过滤选择器	匹配给定的属性是以某些值结尾的元素
`[attr*=value]` 过滤选择器	匹配给定的属性是以包含某些值的元素
组合属性过滤选择器	匹配元素需要同时满足多个属性过滤选择器

<body>
    <div id="username" name='d1' class="mydiv"></div>
    <div id="password" name='d2' class="mycls"></div>
    <div id="d3"></div>
    <div class="myd"></div>
</body>
<script>
    //匹配包含给定了的属性的元素
    console.log($('div[name]'));
    /*
    0: div#username.myd
    1: div#password.myc
    */

    //匹配给定了的属性的元素
    console.log($('div[class=mydiv]'));
    /*
    0: div#username.myd
    1: div.myd
    */

    //匹配所有不含有指定的属性
    console.log($('div[class!=myd]'));
    /*
    0: div#username.mydiv
    1: div#password.myc
    2: div#d3
    */

    //匹配以给定的属性开始的元素
    console.log($('div[class^=my]'));
    /*
    0: div#username.mydiv
    1: div#password.mycls
    2: div.myd
    */

    //组合选择器  --  交集
    console.log($('div[name=d1][class^=my]'));
    /*
    0: div#username.mydiv
    */

    //以给定属性结尾的元素
    console.log($('div[class$=s]'))
    /*
    0: div#password.mycls
    */

</script>

子属性过滤选择器

:nthchild()过滤器
:fist-child()过滤器
:last-child()过滤器
:only-child()过滤器

描述：

选择器	描述
`:nth-child()`过滤器	匹配所给属性的父元素下的某个元素
`:fist-child()`过滤器	匹配一个子元素
`:last-child()`过滤器	匹配最后一个元素
`:only-child()`过滤器	如果该元素是父元素的唯一子级，就会匹配

<body>
    <div id="fu">
        <div id="d1">d1</div>
        <div id="d2">d2</div>
        <div id="d3">d3
            <div id="child"></div>
        </div>
    </div>
    <script>
        //匹配第一个子元素
        console.log($('div:first-child'));
        /*
        0: div#fu
        1: div#d1
        2: div#child
        */
        
        //匹配最后一个子元素
        console.log($('div:last-child'));
        /*
        0: div#d3
        1: div#child
        */
        
        // 是匹配作为第index个的子元素，但index是表示第几个，所以是从1开始的
        console.log($('div:nth-child(1)'));
        /*
        0: div#fu
        1: div#d1
        2: div#child
        */
        
        //如元素是父元素中唯一的子元素，就会被匹配
        // 如父元素中含有其他元素，将不被匹配
        console.log($('div:only-child'));
        /*
        0s: div#child
        */
        // console.log($('boby>div'));
    </script>
</body>

表单对象属性过滤选择器

:enabled过滤选择器
:disabled过滤选择器
:checked过滤选择器
:selected过滤选择器

描述：

选择器	描述
`:enabled`过滤选择器	匹配所有可以使用元素
`:disabled`过滤选择器	匹配所有不可以使用元素
`:checked`过滤选择器	匹配所有选中的被选中元素(复选框、单选框等)
`:selected`过滤选择器	匹配所有选中的`<option>`元素

<body>
<form action="#">
    <input type="text" disabled>
    <input type="checkbox">html
    <input type="checkbox" checked>css
    <select>
        <option>北京</option>
        <option selected>石家庄</option>
        <option>衡水</option>
    </select>
</form> 
<script>
    //匹配input下的disabled元素
    console.log($('input:disabled'));
    /*
    0: input
    */
    console.log($('input:checked'));
    /*
    0: input
    */
    console.log($('option:selected'));
    /*
    0: input
    */
</script>

表单选择器

选择器	描述
`:input` 选择器	匹配所有 `input`、`textarea`、`select` 和 `button` 元素
`:text` 选择器	匹配所有的单行文本框
`:password` 选择器	匹配所有密码框
`:radio` 选择器	匹配所有单选按钮
`:checkbox` 选择器	匹配所有复选框
`:submit` 选择器	匹配所有提交按钮
`:image` 选择器	匹配所有图像域
`:reset` 选择器	匹配所有重置按钮
`:button` 选择器	匹配所有按钮
`:file`选择器	匹配所有文件域

click() 方法

当单击元素时，发生 click 事件。

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

$(selector).click()     // 触发时

$(selector).click(function)尝试	//添加时

上一篇： Spring的JNDI数据源连接池配置示例及Spring对JNDI实现分析

下一篇：自定义RecyclerView实现不固定刻度的刻度尺

小白入门第九天 —— jQuery选择器

了解一下什么是选择器

选择器有哪些

基本选择器

层级选择器

基本过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

子属性过滤选择器

表单对象属性过滤选择器

表单选择器

click() 方法

Jquery入门学习篇--选择器（一）

python web py入门（48）- jQuery - #id 选择器

python web py入门（47）- jQuery - 元素选择器

jQuery 选择器用法基础入门示例

小白入门第九天 —— jQuery选择器

jquery入门—选择器实现隔行变色实例代码_jquery

jquery入门—选择器实现隔行变色实例代码_jquery

jQuery入门之层次选择器实例简析_jquery

jQuery入门之层次选择器实例简析_jquery

jQuery 选择器用法基础入门示例