zoukankan      html  css  js  c++  java
  • jquery 自定义选择器

    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="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>
  • 相关阅读:
    Apache JMeter 入门教程
    nacos 配置中心 & 服务发现 使用
    Apache Flink能用来做什么?
    使用etcd watch做服务发现
    服务的注册与发现(Consul、zookeeper、etcd、eureka、Nacos)
    四层、七层负载均衡的区别
    Apollo核心概念之“Namespace”
    Charles的原理、作用
    GIN框架中间件 C.NEXT() C.ABORT() C.SET() C.GET 跨中间件取值 GIN中间件中使用GOROUTINE
    gin内置验证器使用
  • 原文地址:https://www.cnblogs.com/lwqstyle/p/4672717.html
Copyright © 2011-2022 走看看