jQuery 自定义选择器及应用

最新推荐文章于 2023-12-10 18:34:25 发布

萧逸才

最新推荐文章于 2023-12-10 18:34:25 发布

阅读量853

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 前端文章标签： jquery

本文链接：https://blog.youkuaiyun.com/xyc_csdn/article/details/68962692

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

jquery

12 篇文章

订阅专栏

本文介绍了一个自定义的jQuery选择器插件，该插件能够通过输入框的内容来筛选显示的列表项。文章详细解释了如何使用jQuery扩展选择器功能，并实现了基于文本内容的动态筛选效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<input type="text">
<ul>
    <ol>0</ol>
    <ol>01</ol>
    <ol>012</ol>
    <ol>0123</ol>
    <ol>01234</ol>
    <ol>012345</ol>
    <ol>0123456</ol>
    <ol>01234567</ol>
    <ol>012345678</ol>
    <ol>0123456789</ol>
    <ol>0123456789</ol>
</ul>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script>
    $.expr[':'].haveText = function (obj, index, meta, stack) {
        /* obj   - is a current DOM element 当前DOM元素
         index - the current loop index in stack 当前元素在stack中的索引，
         meta  - meta data about your selector !!! 用来存参数值，详见带参数的自定义选择器。
         stack - stack of all elements to loop 选择器所选中的元素集。

         Return true to include current element 返回 true 就包含当前元素
         Return false to explude current element 返回 false 就抛弃当前元素
         */
        return (obj.textContent || obj.innerText || "").toUpperCase().indexOf(meta[3].toUpperCase()) >= 0;
    };
    $(function () {
        $("input").change(function () {
            var val = $(this).val();
            if (!val) {
                $("ol").slideDown();
                return;
            }
            var $showOl = $("ol:haveText(" + val + ")")
            $("ol").not($showOl).slideUp();
            $showOl.slideDown();
        }).keyup(function () {
            $(this).change();
        });
    });
</script>
</body>
</html>