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. C#去掉字符串头尾指定字符

    private void button2_Click(object sender, EventArgs e)        {//去掉字符串头尾指定字符            string MyInf ...

  2. asp.net web api客户端调用

    服务接口 接口1: //Post:http://127.0.0.1/HY_WebApi/api/V2/Key/FunctionTest1 [HttpPost] public HttpResponseM ...

  3. IDEA热部署（二）---jetty插件启动maven项目

    jetty插件的配置 我们使用jetty插件来进行启动我们的maven项目,在pom.xml中进行配置: <plugins> <plugin> <groupId>o ...

  4. AI 新技术革命将如何重塑就业和全球化格局？深度解读 UN 报告（上篇）

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 张钦坤 腾讯研究院秘书长蔡雄山 腾讯研究院法律研究中心副主任祝林华 腾讯研究院法律研究中心助理研究员曹建峰 腾讯研究院法律研究中心高级研究员 ...

  5. Linux系列教程（二十三）——Linux的服务管理

    前面我们讲解Linux软件包管理之源码包.脚本安装包时,我们介绍了rpm包和源码包由于安装位置的不同,会对服务的启动造成影响,具体是什么,本篇博客我们来详细介绍. 1.Linux服务管理总览 我们可以 ...

  6. vue 组件中数组的更新

    今天写项目时遇到的问题,瞬间就卡在那了 来还原一下: parent.vue: <template> <div> <button @click="change&q ...

  7. SparseArray,SparseBooleanArray和SparseIntArray

    package android.util; import com.android.internal.util.ArrayUtils; /** * SparseArrays 利用integer去管理ob ...

  8. 《java.util.concurrent 包源码阅读》25 Fork/Join框架之Fork与Work-Stealing（重写23，24）

    在写前面两篇文章23和24的时候自己有很多细节搞得不是很明白,这篇文章把Fork和Work-Stealing相关的源代码重新梳理一下. 首先来看一些线程池定义的成员变量: 关于scanGuard: v ...

  9. 《java.util.concurrent 包源码阅读》05 BlockingQueue

    想必大家都很熟悉生产者-消费者队列,生产者负责添加元素到队列,如果队列已满则会进入阻塞状态直到有消费者拿走元素.相反,消费者负责从队列中拿走元素,如果队列为空则会进入阻塞状态直到有生产者添加元素到队列 ...

  10. [flask/python/web] 解析flask web开发(Miguel著)一书第11章主页不显示博文表单的问题

    ---------------------------------------------以下内容2017.7.14更新---------------------------------------- ...