jquery 的冷知识，自定义选择器。

代码如下：

//  HTML 代码

<body>

<div id="divid1" class="divclass">白色</div>

<div id="divid2" class="divclass">白色</div>

<div id="divid3" class="divclass">白色</div>

<div id="divid4" class="divclass">白色</div>

<p style="width:500px;">

<input type="button" value="按钮[绿色]" id="but1" />

<input type="button" value="按钮[红色]" id="but2" />

<input type="button" value="按钮[蓝色]" id="but3" />

<input type="button" value="按钮[黄色]" id="but4" />

</p>

<script type="text/javascript">

//  初始化自定义选择器

$(function () {

$.expr[":"].greenbg = function (obj) {

if (obj.style.backgroundColor === "green")

return $(obj).css("background-color", "white"), $(obj).text("白色");

return $(obj).css("background-color", "green"), $(obj).text("绿色");

};

$.expr[":"].redbg = function (obj) {

if (obj.style.backgroundColor == "red")

return $(obj).css("background-color", "white"), $(obj).text("白色");

return $(obj).css("background-color", "red"), $(obj).text("红色");

};

$.expr[":"].blackbg = function (obj) {

if (obj.style.backgroundColor == "blue")

return $(obj).css("background-color", "white"), $(obj).text("白色");

return $(obj).css("background-color", "blue"), $(obj).text("红色");

};

$.expr[":"].yellowbg = function (obj) {

if (obj.style.backgroundColor == "yellow")

return $(obj).css("background-color", "white"), $(obj).text("白色");

return $(obj).css("background-color", "yellow"), $(obj).text("黄色");

};

});

// 使用自定义选择器

$("#but1").click(function () {

$("#divid1:greenbg");

});

$("#but2").click(function () {

$("#divid2:redbg");

});

$("#but3").click(function () {

$("#divid3:blackbg");

});

$("#but4").click(function () {

$("#divid4:yellowbg");

});

</script>

jquery 自定义选择器的更多相关文章

  1. jQuery Custom Selector JQuery自定义选择器

    什么是JQuery的选择器呢,详见JQuery中的Selector: http://docs.jquery.com/Selectors 比如 $("div:contains('John')& ...

  2. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  3. jQuery自定义漂亮的下拉框插件8种效果

    jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 实例代码 <body class="demo-1"> ...

  4. jQuery自定义插件

    jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件,   ( ...

  5. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  6. 你的专属定制——JQuery自定义插件

        前  言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...

  7. jQuery自定义插件--banner图滚动

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

  8. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  9. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

随机推荐

  1. 机器学习数学|微积分梯度jensen不等式

    机器学习中的数学 觉得有用的话,欢迎一起讨论相互学习~Follow Me 原创文章,如需转载请保留出处 本博客为七月在线邹博老师机器学习数学课程学习笔记 索引 微积分,梯度和Jensen不等式 Tay ...

  2. C#定时任务采用线程和队列实现

    构思:写一个全局的Queue ,  然后开一个线程去循环. 不善言语,直接看代码吧! );    }}

  3. C#移位运算(左移和右移)

    C#是用<<(左移) 和 >>(右移) 运算符是用来执行移位运算. 左移 (<<) 将第一个操作数向左移动第二个操作数指定的位数,空出的位置补0.  左移相当于乘. ...

  4. C#对话框的使用

    [函数] <整型> MessageBox(<字符串> Text, <字符串> Title, <整型> nType,MessageBoxIcon);[函数 ...

  5. python 实用案例 supervisord管理进程详解

    Supervisor是由python语言编写,基于linux操作系统的一款服务器管理工具,用以监控服务器的运行,发现问题能立即自动预警及自动重启等功能.Supervisor类似于monit,monit ...

  6. JavaScript数据可视化编程学习（二）Flotr2，雷达图

    一.雷达图 使用雷达图显示多维数据. 如果你有多维的数据要展示,那么雷达图就是一种非常有效的可视化方法. 由于雷达图不常用,比较陌生,所以向用户解释的时候有一些难度.注意使用雷达图会增加用户认知负担. ...

  7. 关于SQLServer数据库中字段值为NULL,取出来该字段放在DataTable中，判断datatable中该字段值是否为NULL的三种方法

    1. DataTable dt;                               //假设字段为name, dt已经保存了数据dt.rows[0]["name"] == ...

  8. 分享一篇vue项目规范

    最近 Vue 用的比较多,而且因为公司里有实习生,当几个人写一个项目的时候,会出现很多问题,最麻烦的就是规范不统一,之前我有一篇文章是说, vue 是比较有规范的一种框架了,但是也会出现很多问题,所以 ...

  9. 关于Springboot整合mybatis启动的问题

    由于是刚pull下来的项目整体也不熟悉,然后项目无法正常启动,爆出的异常为: Invalid bound statement (not found) 这是由于创建的新模块mapper与扫描mapper ...

  10. SQL---存储过程---sp_addextendedproperty表字段加描述

    相信很多朋友对利用SQL创建表已经很熟悉了,但我们发现在创建表的同时不能像添加默认值或者主键一样为列加上说明信息,所以我们经常是创建表后再到表的可视化设计器中为列加上说明,这样操作起来就相当麻烦了,本 ...