jQuery--选择器

最新推荐文章于 2024-03-17 00:10:12 发布
最新推荐文章于 2024-03-17 00:10:12 发布
阅读量298 收藏 1
点赞数 1
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_gia/article/details/79042078
版权

jQuery–选择器

一、JavaScript中选择元素

• document.getElementById()
• document.getElementsByName()
• document.getElementsByTagName()
• document.getElementsByClassName()
• document.querySelector()
• document.querySelectorAll()

<head>
    <meta charset="UTF-8">
    <title>jsSelector</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        #box2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="box1"></div>
<div id="box2"></div>
<div class="box">.box</div>
<div class="box">.box</div>
<input type="text" name="username">


<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
//        var element1 = document.getElementById('box1');
//        var element2 = document.getElementById('box2');
//        var element3 = document.getElementsByClassName('box');
//        var element4 = document.getElementsByName('username');
//        var element5 = document.getElementsByTagName('div');
//
//        console.log(element1);
//        console.log(element2);
//        console.log(element3);
//        console.log(element4);
//        console.log(element5);


        var element6 = document.querySelector('.box');
        var element7 = document.querySelectorAll('.box');
        console.log(element6);
        console.log(element7);
    });
</script>
</body>
二、CSS中选择元素

CSS 选择器

①基本选择器

基本选择器.jpg

②属性选择器

属性选择器.jpg

③伪类选择器

伪类选择器.jpg

④伪元素选择器

伪元素选择器.jpg

⑤伪元素

伪元素.jpg

<head>
    <meta charset="UTF-8">
    <title>example</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        #box2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="box1"></div>
<div id="box2"></div>


<script src="../../../vendor/jquery-1.12.4.js"></script>

</body>
三、jQuery选择器

• 兼容CSS3选择器标准
• 对选择器语法有更多扩充
• 返回0、1或多个jQuery元素的集合
• 集合内元素顺序和在页面上顺序一致

1.基本选择器
①ID选择器
②类选择器
④后代选择器
⑤属性选择器
③元素选择器

<head>
    <meta charset="UTF-8">
    <title>jQuerySelector</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        #box2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="box1"></div>
<div id="box2"></div>
<div class="box">.box</div>
<div class="box">.box</div>
<input type="text" name="username">


<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        var element1 = $('#box1');
        var element2 = $('#box1, #box2');
        var element3 = $('.box');
        var element4 = $('[name="username"]');
        var element5 = $('div');
        var element6 = $(document.getElementById('box1'));

        console.log(element1);
        console.log(element2);
        console.log(element3);
        console.log(element4);
        console.log(element5);
        console.log(element6);
    });
</script>
</body>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>basicSelector</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>

<h1>h1. 标题</h1>
<h2>h2. 标题</h2>

<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, quae?</p>

<ul class="list">
    <li>list1</li>
    <li>list2</li>
    <ul>
        <li>list2-1</li>
        <li>list2-2</li>
        <li>list2-3</li>
    </ul>
    <li>list3</li>
</ul>

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.163.com">网易</a>
<a href="#">本地</a>

<p data-id="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugit illum libero, minus odio quas
    repellat
    repellendus similique unde voluptatem.</p>

<p data-id="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugit illum libero, minus odio quas
    repellat
    repellendus similique unde voluptatem.</p>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        //console.log($('#p1').addClass('highlight'))
        //console.log($('.list').addClass('highlight'))
        //console.log($('.list > li').addClass('highlight'))
        //console.log($('a[href="http://www.baidu.com"]').addClass('highlight'))
        //console.log($('a[href*="www"]').addClass('highlight'))
        //console.log($('a[href^="http"]').addClass('highlight'))
        //console.log($('a[href$="com"]').addClass('highlight'))
        //console.log($('a[href][target]').addClass('highlight'))
        //console.log($('a[href!="http://www.baidu.com"]').addClass('highlight'))  //jQuery独有

        console.log($('p[data-id="1"]').addClass('highlight'));
    });
</script>
</body>
</html>

2.筛选器/过滤器
①位置筛选器
:first
:last
:even
:odd
:eq(n)
:gt(n)
:lt(n)

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

<head>
    <meta charset="UTF-8">
    <title>positionFilter</title>
    <style>
    .highlight {
        background-color: yellow;
    }
    </style>
</head>

<body>
    <ul>
        <li>list-01</li>
        <li>list-02</li>
        <li>list-03</li>
        <li>list-04</li>
        <li>list-05</li>
        <li>list-06</li>
        <li>list-07</li>
        <li>list-08</li>
        <li>list-09</li>
        <li>list-10</li>
    </ul>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        //        console.log($('li:first').addClass('highlight'))
        //        console.log($('li:last').addClass('highlight'))
        //        console.log($('li:even').addClass('highlight'))
        //        console.log($('li:odd').addClass('highlight'))
        //        console.log($('li:eq(2)').addClass('highlight'))
        //        console.log($('li:gt(2)').addClass('highlight'))
        console.log($('li:lt(2)').addClass('highlight'));
    });
    </script>
</body>

</html>

②子元素筛选器
:first-child
:last-child
:first-of-type
:last-of-type
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:only-child
:only-of-type

<head>
    <meta charset="UTF-8">
    <title>childFilter</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li>list-01</li>
    <li>list-02</li>
    <li>list-03</li>
    <li>list-04</li>
    <li>list-05</li>
    <li>list-06</li>
    <li>list-07</li>
    <li>list-08</li>
    <li>list-09</li>
    <li>list-10</li>
</ul>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
//                console.log($('li:first-child').addClass('highlight'))
//                console.log($('li:last-child').addClass('highlight'))
//                console.log($('li:first-of-type').addClass('highlight'))
//                console.log($('li:last-of-type').addClass('highlight'))
//                console.log($('li:nth-child(2)').addClass('highlight'))
//                console.log($('li:nth-child(2n)').addClass('highlight'))
        //        console.log($('li:nth-child(odd)').addClass('highlight'))
                console.log($('li:nth-child(even)').addClass('highlight'));
    });
</script>
</body>

③表单筛选器
:checked
:disabled
:enabled
:focus
:button
:checkbox
:file
:image
:input
:password
:radio
:reset
:selected
:submit
:text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formFilter</title>
    <style>
        .highlight {
            padding: 10px;
            border: 1px solid yellow;
            background-color: lightyellow;
        }
    </style>
</head>
<body>

<form>
    <p><input value="input without type"></p>
    <p><input type="text" value="input type text" autofocus></p>
    <p><input type="text" value="input type text disabled" disabled></p>
    <p><input type="password" value="input type password"></p>
    <p><input type="checkbox"> input type checkbox</p>
    <p><input type="checkbox" checked> input type checkbox checked</p>
    <p><input type="radio"> input type radio</p>
    <p><input type="radio" checked> input type radio checked</p>
    <p><input type="file"></p>
    <p><input type="image" src="login.png"></p>
    <p><select></select></p>
    <p><select>
        <option value=""> -- 请选择 --</option>
        <option value="1">option 1</option>
        <option value="2" selected>option 2</option>
        <option value="3">option 3</option>
        <option value="4">option 4</option>
    </select></p>
    <p><textarea cols="30" rows="10"></textarea></p>
    <p><input type="submit" value="input type submit"></p>
    <p><input type="reset" value="input type reset"></p>
    <p><input type="button" value="input type button"></p>
    <p>
        <button>BUTTON</button>
    </p>
</form>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        //        console.log($(':checked').parent().addClass('highlight'))
        //                console.log($(':disabled').parent().addClass('highlight'))
        //                console.log($(':enabled').parent().addClass('highlight'))
        //                setTimeout(function () {
        //                    console.log($(':focus').parent().addClass('highlight'));
        //                }, 1000);
        //                        console.log($(':button').parent().addClass('highlight'))
        //                        console.log($(':checkbox').parent().addClass('highlight'))
        //                        console.log($(':file').parent().addClass('highlight'))
        //                        console.log($(':image').parent().addClass('highlight'))
        //                        console.log($(':input').parent().addClass('highlight'))
        //                        console.log($(':password').parent().addClass('highlight'))
        //                        console.log($(':radio').parent().addClass('highlight'))
        //                        console.log($(':reset').parent().addClass('highlight'))
        //                        console.log($(':selected').parent().addClass('highlight'))
//        console.log($(':submit').parent().addClass('highlight'))
                console.log($(':text').parent().addClass('highlight'));
    });
</script>
</body>
</html>

④内容筛选器
:empty
:contains(text)
:has(selector)
:parent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>contentFilter</title>
    <style>
        .highlight {
            padding: 10px;
            border: 1px solid yellow;
            background-color: lightyellow;
        }
    </style>
</head>
<body>

<p></p>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, earum.</p>
<p>123 <span>456</span></p>
<input type="text" value="input">

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
//                console.log($(':empty').addClass('highlight'));
//                console.log($('p:contains("Lorem")').addClass('highlight'));
                console.log($('p:has(span)').addClass('highlight'));
//        console.log($('p:parent').addClass('highlight'));
    });
</script>
</body>
</html>

⑤其他筛选器
:lang(language)
:not(selector)
:root
:target
:hidden
:visible
:header
:animated

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

<head>
    <meta charset="UTF-8">
    <title>otherFilter</title>
    <style>
    .highlight {
        background-color: yellow;
    }
    </style>
</head>

<body>
    <p id="foo" lang="en-US">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, eius.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quo.</p>
    <input type="text">
    <input type="hidden">
    <p style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, excepturi molestiae odio officiis optio praesentium recusandae similique soluta vel velit? Enim et iste neque quaerat quis quisquam quo rem vel.
    </p>
    <p style="visibility: hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, excepturi molestiae odio officiis optio praesentium recusandae similique soluta vel velit? Enim et iste neque quaerat quis quisquam quo rem vel.
    </p>
    <p style="opacity: 0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, excepturi molestiae odio officiis optio praesentium recusandae similique soluta vel velit? Enim et iste neque quaerat quis quisquam quo rem vel.
    </p>
    <h1>h1. 标题</h1>
    <h2>h2. 标题</h2>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        //                console.log($(':lang(en)').addClass('highlight'))
        //                console.log($('p:not(#foo)').addClass('highlight'))
        //                console.log($(':root').addClass('highlight'))
        //                console.log($('p:target').addClass('highlight'))
        //        setTimeout(function () {
        //            // 在Chrome、Firefox等浏览器中,获取url hash会延迟一会儿,所以直接在document ready中获取会获取不到
        //            console.log($(':target').addClass('highlight'))
        //        }, 1000)

        //                console.log($(' :hidden').addClass('highlight'))
        //                console.log($(' :visible').addClass('highlight'))
        console.log($(' :header').addClass('highlight'));
    });
    </script>
</body>

</html>

:animated:选择正在执行动画的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animated</title>
    <style>
        div.box {
            background: yellow;
            border: 1px solid #aaa;
            width: 80px;
            height: 80px;
            margin: 0 5px;
            float: left;
        }

        div.colored {
            background: green;
        }
    </style>
</head>
<body>

<button id="run">Run</button>

<div class="box"></div>
<div id="mover" class="box"></div>
<div class="box"></div>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {

        $("#run").click(function () {
            $("div:animated").toggleClass("colored");
        });

        function animateIt() {
            $("#mover").slideToggle("slow", animateIt);
        }

        animateIt();
    });
</script>
</body>
</html>

1.jpg

2.jpg

⑥自定义选择器

四、jQuery选择器的性能优化

• 尽量使用CSS中有的选择器
• 避免过度约束
• 尽量以ID开头
• 让选择器的右边有更多特征
• 避免使用全局选择器
• 缓存选择器结果

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

<head>
    <meta charset="UTF-8">
    <title>selectorOptimization</title>
</head>

<body>
    <div>
        <ul id="list" class="list">
            <li>list-01</li>
            <li class="item2">list-02</li>
            <li>list-03</li>
            <li class="item4">list-04</li>
            <li>list-05</li>
            <li>list-06</li>
            <li>list-07</li>
            <li>list-08</li>
            <li>list-09</li>
            <li>list-10</li>
        </ul>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    function logTime(cb) {
        console.time('logTime');
        if (typeof cb === 'function') {
            for (var i = 0; i < 10000; i++) {
                cb();
            }
        }
        console.timeEnd('logTime');
    }

    $(function() {

        //        logTime(function () {
        //            $("ul li:even");// slow
        //        })
        //        logTime(function () {
        //            $("ul li:nth-child(odd)");// better
        //        })
        //        logTime(function () {
        //            document.querySelectorAll("ul li:nth-child(odd)"); // best
        //        })
        //        logTime(function () {
        //            $(document.querySelectorAll("ul li:nth-child(odd)")); // better
        //        })

        //------------------

        //        logTime(function () {
        //            $('div ul li.item2');// slow
        //        })
        //        logTime(function () {
        //            $('li.item2');// better
        //        })

        //------------------

        //        logTime(function () {
        //            $('.list li.item2'); // slow
        //        })
        //
        //        logTime(function () {
        //            $('#list li.item2'); // better
        //        })

        //------------------

        //        logTime(function () {
        //            $('ul.list .item2'); // slow
        //        })
        //
        //        logTime(function () {
        //            $('.list li.item2'); // better
        //        })

        //------------------

        //        logTime(function () {
        //            $('ul'); // slow
        //        })
        //
        //        logTime(function () {
        //            $('.list'); // better
        //        })

        //------------------

        logTime(function() { // slow
            $('#list .item2');
            $('#list .item4');
        });

        logTime(function() { // better
            var ul = $('#list');
            ul.find('.item2');
            ul.find('.item4');
        });

    });
    </script>
</body>

</html>
我可能是个假开发
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery时间选择器datepicker年月日时分秒选择
02-21
datepicker时间插件，多种选择方式，年月日，时分秒，区间范围，单个以及多个选择
jquery-minicolors：jQuery MiniColors插件
02-04
jQuery MiniColors：一个基于jQuery的微小颜色选择器 由Cory LaViska为A Beautiful Site，LLC开发 根据MIT许可获得许可： : 演示与文档 通过NPM安装 这是MiniColors的官方NPM版本： npm install --save @claviska/...
jquery 年月日时间选择器
zackboys的博客
10-18 4104
jquery年月日时间选择器
jQuery UI -- 日历选择器，高端web前端开发
最新发布
03-17 1127
2、关于JS的部分，将我们引入的js和。的大小是223KB，而和的大小一起是84KB。jQuery UI为了让日期选择器与我们的网站整体格调相似，我们先来看一下 datepicker() 样式的修改。核心手段就是定位要修改部位的class，然后在自己的css中修改样式即可覆盖。下面列举几个例子:更改jQuery UI主题的对话框header的背景按钮正常状态的背景日历UI的今天单元格样式color:#f60;日历UI的选定单元格样式color:#06f;
jQuery实现日期选择器
一个前端工作者的博客
03-31 1487
日期选择器
jquery 今天、明天、后天半小时选择器
Danchaofan_23的博客
09-09 1013
jquery 今天、明天、后天 半小时 时间选择器
jquery-1.12.4.js
10-02
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
jQuery-File-Upload-master
06-21
带有多个文件选择、拖放支持、进度条、验证和预览图像、jQuery 音频和视频的文件上传小部件。 支持跨域、分块和可恢复的文件上传和客户端图像大小调整。 适用于任何支持标准 HTML 表单文件上传的服务器端平台（PHP、...
jQuery中:nth-child选择器用法实例
10-24
主要介绍了jQuery中:nth-child选择器用法,实例分析了:nth-child选择器功能、定义及匹配子元素或奇偶元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery颜色选择器ColorPicker
04-26
ColorPicker基于强大的jQuery，使用方便、配置简单，同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中，兼容各大浏览器。
jQuery日期选择插件
01-20
简单实用蓝色jQuery日期选择插件。使用jquery进行日期事件
一个jQueryUI时间选择器
08-10
一个jQuery UI时间选择器
jQuery日期时间选择器
11-11
插件描述：基于Bootstrup 3的jQuery日期时间选择器. 参考示例：http://www.jq22.com/jquery-info4611
jquery双日期选择器
09-28
主要用于实现Javascript自定义日期时间选择的功能，以提高用户体验。 Javascript的日期选择器工具很多，jQuery插件Datepicker日期选择器功能强大，同时可自定义日期时间配置，调用非常方 便
jQuery日期时间选择器插件.zip
07-11
代码简介：jQuery日期时间选择器插件是一款高端漂亮的jQuery日期选择控件，可设置小时分钟。
jQuery UI 实例 - 日期选择器（Datepicker）
unber的博客
04-10 3281
从弹出框或内联日历选择一个日期。如需了解更多有关 datepicker 部件的细节，请查看 API 文档。
如何实现带Timepicker的jQuery Datepicker选择器
极客神殿
02-02 1465
您是否希望将日期时间选择器添加到您的应用程序中？通过添加带有日期的时间选择器，您的用户可以一起选择日期和时间。当您的应用程序需要存储日期和时间时，此功能很有用。在本文中，我们研究了如何在他们的网站上添加日期时间选择器。为了实现这个目标，我将介绍 2 个允许我们添加日期时间选择器的包。flatpickr我将为这两个包编写代码。您可以选择其中任何一个适合您的项目。
JQuery简单的时间选择器（picker）
hy3528的博客
11-25 4142
$("#my_Specific").picker({ title: "请选择日期", cols: [ { textAlign: 'center', values: ['2019', '2018', '2017', '2016', '2015', '2014', '2013', ...
jquery-ui.css
06-03
jQuery UI是一个基于jQuery的用户界面库，提供了各种UI组件和交互效果，如按钮、菜单、对话框、进度条、日期选择器等。它的主要目的是为开发人员提供一种快速构建Web应用程序界面的方法，同时提供了可定制的主题和UI...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值