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. 自定义view-滑动开关

    介绍 前段时间,我看到了一篇关于可滑动开关Switch组件的文章,效果图如下: 思路也挺简单的:这个控件主要由田径场式背景和滑块组成.他将田径场式背景分为3部分,最左边的半圆,中间的两条直线部分和最右 ...

  2. [转]Spring.Net介绍

    转自:http://www.cnblogs.com/cilence/archive/2013/02/21/2920478.html Spring.NET下载地址:http://www.springfr ...

  3. [转]我在面试.NET/C#程序员时会提出的问题

    http://blog.zhaojie.me/2011/03/my-interview-questions-for-dotnet-programmers.html 说起来我也面试过相当数量的.NET( ...

  4. 第2篇 C#数据类型-值类型与引用类型

    一 C#内存分配 在应用程序与操作系统之间有一个"中间人"--公共语言运行时(Common Language Runtime,CLR).它为应用程序提供内`存管理,线程管理和远程处 ...

  5. ByteArrayInputStream&ByteArrayOutputStream源码分析

    #ByteArrayInputStream 源码 ｀｀｀ public synchronized int read(byte b[], int off, int len) { if (b == nul ...

  6. boot之mybatis

    特别注意,此种方法和starter不兼容,我用了两个方式混蛋,发现跑不起来! spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driv ...

  7. ASP.NET Core 认证与授权[6]:授权策略是怎么执行的？

    在上一章中,详细介绍了 ASP.NET Core 中的授权策略,在需要授权时,只需要在对应的Controler或者Action上面打上[Authorize]特性,并指定要执行的策略名称即可,但是,授权 ...

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

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

  9. jenkins学习之自动打包构建nodejs应用

    上一节记录了下jenkins在centos下的安装,这节继续,说下怎么使用jenkins和nodejs进行自动打包更新服务. 创建任务 创建任务比较简单,这里我们创建自由风格项目: General信息 ...

  10. work 2013-07-19

    今天,在现场进行了数据库的优化,将数据库的日志截断和压缩了 use 测试库backup log 测试库 with no_logdbcc shrinkfile (测试库_Data,1)dbcc shri ...