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>

时间： 2024-10-10 23:16:00

jquery 自定义选择器的相关文章

jQuery Custom Selector JQuery自定义选择器

什么是JQuery的选择器呢,详见JQuery中的Selector: http://docs.jquery.com/Selectors 比如 $("div:contains('John')").css("text-decoration", "underline");的contains选择器等等 JQuery自定义选择器的基本语法: $.expr[':'].test = function(obj, index, meta, stack){ /* o

jQuery自定义漂亮的下拉框插件8种效果

jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览实例代码 <body class="demo-1"> <div class="container"> <header class="codrops-header"> <h1> 自定义选择元素</h1> <nav class="codrops-demos&quo

jQuery自定义插件--banner图滚动

前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率.我们知道, jQuery库是为了加快JavaScript的开发速度而设计的,通过简化编写JavaScript的方式,减少代码量.所以,今天就带大家了解一下jQuery自定义插件以及自定义插件案例---banner图滚动. 一.自定义插件自定义插件一般有两种类型:全局插件和局

你的专属定制——JQuery自定义插件

前言絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 那么这次,我就和大家来分享一下JQuery中的一个强大的功能--自

jQuery 语法-选择器-事件(基础知识)

jQuery 语法 jQuery 语法是通过选取 HTML 元素的,并对元素执行某些操作基础语法: $(selector).action() 美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() -

深入学习jQuery自定义插件

原文地址:jQuery自定义插件学习 1.定义插件的方法对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(options); 定义的方式: $.fn.extend({ "函数名":function(自定义参数){ //这里写插件代码 } }); //或者是 $.fn.函数名 = function(options){ //这里写插件代码 } 类级别的方法,就是扩展jQuery类本身的方法,为它增加

使用自定义选择器

jQuery允许我们在css选择器的基础上定义自定义选择器来让我们的代码更简洁: 下面是使用方法和参数说明: 1 $.expr[':'].mycustomselector= function(element, index, meta, stack){ 2 // element- DOM元素 3 // index - 堆栈中当前遍历的索引值 4 // meta - 关于你的选择器的数据元 5 // stack - 用于遍历所有元素的堆栈 6 7 // 包含当前元素则返回true 8 // 不包含当

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

谜一样的jquery之$选择器

jquery是一个强大的js类库,提供了很多便利的操作方法并兼容不同的浏览器,一旦使用便欲罢不能,根本停不下来,今天我们就来解读一下这个神秘的jquery源代码. 前几天思考再三,自己尝试着封装了一下jquery的$选择器,然而并不完善,我只对id,class,和标签选择器进行了封装,发现其实如果实现浅层的封装那么我们很容易就能够实现,但是一旦我们尝试着选择器的层次嵌套就会出来很多大大小小的坑! 下面我们先来看一下我个人封装的jquery的选择器部分. window.$ = function (