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. canvas画布实现手写签名效果

    最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...

  2. Java8一：Lambda表达式教程

    1. 什么是λ表达式 λ表达式本质上是一个匿名方法.让我们来看下面这个例子: public int add(int x, int y) {         return x + y;     } 转成 ...

  3. Vue.js优雅的实现列表清单

        一.Vue.js简要说明 Vue.js (读音 /vjuː/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时 ...

  4. 利用Pycharm本地调试spark-streaming（包含kafka和zookeeper等操作）

    环境准备就不说了! 第一步:打开Pycharm,在File->Setting->Project Structure中点击Add Content Root 添加本地python调用java和 ...

  5. linux平台搭建postfix邮件服务器

    一,搭建邮件服务器前准备如下: Centos 7.2 64位Postfix-2.8.12.tar.gz Postfix MTA(邮件传输代理)Dovecot-2.1.8.tar.gz IMAP 和 P ...

  6. phpcms v9 sql注入脚本

    phpcms v9 SQL注入脚本 用法:python phpcms.py http://www.baidu.com import requests,sys,urllib url = sys.argv ...

  7. javascript面向对象编程（OOP）——汇总

    目录 一.JS的解析与执行过程 预处理阶段 执行阶段 二.作用域 块作用域 函数作用域 动态作用域 词法作用域 三.闭包 什么是闭包 闭包的好处 四.类与对象 对象 类 原型(prototype) t ...

  8. JS获取URL参数的值

    function getQueryValue (key) { const reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', ' ...

  9. 十一、Hadoop学习笔记————数据库与数据仓库

    数据仓库是集成的面向主题的数据库的集合 面向主题主要是宏观上解决某一类问题,集合性指数据集 数据库主要处理用于事务处理,数据仓库用于分析处理,数据库适用于操作型数据,便于增删改查, 数据仓库则用于挖掘 ...

  10. 计算出前N项的数据

    #include<iostream> #include<algorithm> #include<numeric> using namespace std; ; in ...