jquery 自定义选择器

最新推荐文章于 2025-08-06 14:36:16 发布

weixin_30715523

最新推荐文章于 2025-08-06 14:36:16 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lwqstyle/p/4672717.html

本文介绍如何使用jQuery自定义选择器来改变元素背景颜色，并通过按钮点击触发不同颜色的切换。涉及HTML结构设置及JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>