`

jQuery自定义选择器示例

阅读更多
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>插件4,between</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--   引入jQuery -->
        <script src="../../scripts/jquery-1.3.1.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            ;
            (function($){
                $.extend($.expr[":"], {
                    between: function(a, i, m){
                        var tmp = m[3].split(",");
                        return tmp[0]-0<i && i<tmp[1]-0;
						//tmp[0],eg为2,i>2的时候,并且i<5,另外一个边界,条件成立,根据索引值i,保留其所对应的Dom元素.
                    }
                })
            })(jQuery);
            
            //插件应用
            $(function(){
                alert("执行前");
                $("div:between(2,5)").css("background","white");
                alert("执行后");
            })
        </script>
    </head>
    <body>
        <div style="background:red">
            0
        </div>
        <div style="background:blue">
            1
        </div>
        <div style="background:green">
            2
        </div>
        <div style="background:yellow">
            3
        </div>
        <div style="background:gray">
            4
        </div>
        <div style="background:orange">
            5
        </div>
    </body>
</html>

分享到:
评论

相关推荐

    基于jquery的H5移动端选择器,日期选择器,自定义级联选择器,自定义html选择器

    基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器,它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...

    cool的JQuery自定义select

    在网页开发中,选择器(Select)是HTML中常见的元素,用于创建下拉列表供用户选择。然而,原生的HTML select元素样式通常比较单调,不符合现代网页设计的美观要求。"cool的JQuery自定义select"就是为了解决这个问题...

    jquery自定义滚动条插件示例分享共8页.pdf.zip

    2. **初始化插件**:在jQuery的$(document).ready()函数内,通过选择器选取需要自定义滚动条的元素,并调用插件的初始化方法。例如,对于malihu custom scrollbar插件,可以这样写: ```javascript $(document)....

    jQuery自定义日历事项查看代码.zip

    此外,理解CSS选择器和样式规则也是必不可少的,因为这将有助于自定义日历的外观。在实际应用中,可能还需要结合服务器端语言(如PHP、Python或Node.js)来处理数据存储和同步,以实现完整的日历功能。 总结来说,...

    JQuery 自定义 radio与checkbox

    1. jQuery的选择器、属性操作(如`.attr()`)、事件处理(如`.click()`和`.change()`)、样式操作(如`.addClass()`和`.removeClass()`)。 2. HTML的radio和checkbox元素及其属性,如`name`属性用于分组radio按钮。...

    jQuery时间选择器点击选择小时分钟代码

    以下是一个简单的jQuery时间选择器的实现示例: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery时间选择器 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; .time-select { display: ...

    JQuery 自定义 Table

    在IT行业中,jQuery是一款非常流行的JavaScript库,它简化了HTML文档遍历、...在提供的`Tab`文件中,可能包含了具体的示例代码或模板,进一步学习和实践这些技术,将有助于你更好地掌握jQuery自定义Table的构建技巧。

    jquery自定义鼠标滚动条样式

    首先,我们要明白jQuery的核心是通过选择器选中DOM元素,然后对这些元素进行操作。在自定义滚动条样式时,我们需要借助特定的jQuery插件,如`Perfect Scrollbar`或`SimpleBar`。这些插件允许我们轻松地改变滚动条的...

    jquery日期选择器

    2. **自定义配置**:开发者可以通过设置参数调整日期选择器的样式、语言、日期格式等,使其符合项目需求。 3. **兼容性**:良好的浏览器兼容性,支持多种主流浏览器,如Chrome、Firefox、Safari、Edge和IE8+。 4. **...

    jquery双向选择器代码

    虽然jQuery本身并不直接支持MVVM,但通过自定义事件和选择器,可以模拟实现简单的双向绑定。 在压缩包文件"jiaoben181437"中,可能包含了实现这些功能的示例代码、教程或项目文件。为了进一步学习和理解,你可以...

    jquery自定义下拉列表示例

    jQuery自定义下拉列表示例的知识点可以围绕以下几个主要部分进行详细解读: 1. **自定义下拉列表的基本概念和应用场景**: 自定义下拉列表指的是开发者根据特定需求,通过编程方式构建的下拉选择框。这种下拉列表...

    jquery 颜色选择器,使用简单

    jQuery,一个流行的JavaScript库,提供了许多插件来简化开发人员的工作,其中包括颜色选择器。本篇文章将深入探讨如何利用jQuery轻松实现颜色选择功能,以提高用户界面的交互性。 一、jQuery颜色选择器简介 jQuery...

    jQuery颜色选择器

    6. **使用示例**:在HTML中,你只需要创建一个`&lt;div&gt;`或其他元素作为颜色选择器的触发器,并通过jQuery选择器和`.colpick()`方法初始化插件。例如: ```javascript $('#colorPicker').colpick({ layout: 'hex', ...

    jquery时间选择器

    同时,开发者还可以自定义选择器的显示样式、可选范围以及其他特性,以满足特定需求。 6. **数据绑定**:时间选择器的值通常会绑定到页面上的某个输入字段,例如`&lt;input type="text"&gt;`,当用户选择完时间后,该字段...

    jquery自定义表单控件.rar

    1. **jQuery选择器**:jQuery的选择器类似于CSS,用于定位DOM元素。例如,`$("#id")`选取ID为指定值的元素,`$(".class")`选取所有类名为指定值的元素,`$("input[type='text']")`选取所有文本输入框。 2. **事件...

    带图标的jQuery自定义下拉框插件

    例如,在一个多语言选择器中,每个语言选项旁边可以配以相应的国家国旗图标,或者在功能设置中,每个功能项可以配备与其功能相关的图形图标。 插件的核心功能可能包括以下几点: 1. **动态渲染**:插件允许开发者...

    jQuery自定义添加删除标签代码.zip

    例如,我们可以使用`$()`选择器选取DOM元素,然后通过`.on()`方法绑定事件监听器。在添加标签时,可能有一个按钮或者按下回车键的事件触发函数,该函数获取输入框中的值,并将其转化为新的标签元素插入到页面上。...

    jquery颜色选择器

    它可能包含了颜色选择器的HTML结构以及如何通过jQuery进行初始化的代码示例。 - **css**:这个文件夹包含了颜色选择器的CSS样式文件,用于定义颜色选择器的外观和布局,包括颜色面板、滑块、预览区域等元素的样式。 ...

    jquery日历选择器

    1. 自定义配置:jQuery日历选择器支持丰富的自定义选项,如日期格式、起始日期、结束日期、禁用日期、星期首日设定等,满足不同场景需求。 2. 多语言支持:通过内置的语言文件,可以轻松实现多语言切换,提升用户...

    jQuery自定义select下拉菜单

    要创建一个jQuery自定义下拉菜单,我们需要以下步骤: 1. **基础HTML结构**:创建一个包含`&lt;option&gt;`元素的`&lt;select&gt;`标签。每个`&lt;option&gt;`代表一个可选项目。例如: ```html 选项1 选项2 选项3 ``` 2. *...

Global site tag (gtag.js) - Google Analytics