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. 【Kafka源码】broker被选为controller之后的连锁反应

    [TOC] 今天我们主要分析下broker被选为controller之后,主要干了什么.门面代码先列出来: def onControllerFailover() { if (isRunning) { ...

  2. 机器学习，安装python的支持包

    windows10,64位: 以下命令行安装均在python目录下,对应的whl文件也被我拷贝到python目录下: http://www.lfd.uci.edu/~gohlke/pythonlibs ...

  3. 后端自动化版本管理，再也不用改URL了！

    每次升级接口版本时,后端.前端.客户端都是痛苦的: 后端:要兼容旧版客户端,以前的接口不能动啊,又得写新接口.新文档了,唉! 前端:还好,就是版本号到处都是,改起来比较烦. Android:快点啊产品 ...

  4. PHP设计模式之工厂模式

    工厂模式(Factory pattern)和单例模式一样,是另外一种创建型模式. 和单例模式不同的是,单例模式会创建和管理一个单独的类型的单一对象,工厂模式则是用于创建多种不同类型的类的多个对象. 工 ...

  5. key-value数据库-Redis

    1.简介 Redis是完全开源的ANSI C语言编写.遵守BSD协议,高性能的key-value数据库. 1.1特点 Redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载 ...

  6. 使用numpy实现批量梯度下降的感知机模型

    生成多维高斯分布随机样本 生成多维高斯分布所需要的均值向量和方差矩阵 这里使用numpy中的多变量正太分布随机样本生成函数,按照要求设置均值向量和协方差矩阵.以下设置两个辅助函数,用于指定随机变量维度 ...

  7. 11. 配置ZooKeeper ensemble

    一个ZooKeeper集群或复制的ZooKeeper服务器集群应该优化配置,以避免出现脑裂(split-brain)等情况. 由于网络分割,同一ensemble的两个不同服务器可能构成领导者不一致,因 ...

  8. JAVAFX-3 开发应用

    理解布局 布局容器(Layoutcontainer)或面板(Pane)允许对JavaFX应用程序场景图中的UI控件进行灵活.动态的排布.JavaFX Layout API包括下列容器类: ● Bord ...

  9. 编写带对话框界面的OCX

    编写带对话框界面的OCX步骤: 1.添加Dialog资源,切换到资源视图,将对话框的Style设置为Child,在对话框界面右击添加类,输入类名MyDlg,使得其继承与CDialogEx.(继承CDi ...

  10. 「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏

    回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ...