前段时间在网站看到一篇jquery的文章:
12款强大的jQuery选择器,顿时被jquery的强大的扩展吸引,而jquery也同时支持css、val等操作的扩展,虽然网上介绍jquery插件开发的文章多如牛毛,但是完整介绍jquery中这部分扩展实现的却不多,于是想整理这一块的内容,今天在一篇国外blog找到这一块资料,讲的很详细,原文地址:
http://blog.rodneyrehm.de/archives/11-jQuery-Hooks.html。下面是我对这篇文章重点做一个整理。
jquery中如下函数有钩子函数,可以对函数属性进行自定义操作。它们分别是
attr(), prop(), val() 和css(),同时还可以
对selector的伪类实现自定义。
1. attr() 和 prop() 函数 (jquery 1.6以上)
$.attrHooks 和 $.propHooks
$.propHooks.open = {
get: function(elem) {
if (elem.nodeName.toLowerCase() !== 'details') {
// abort for non-<detail> elements
return undefined;
}
// return the open-state as a boolean
// (.prop() is supposed to return a boolean)
return !!$(elem).details('is-open');
},
set: function(elem, value) {
if (elem.nodeName.toLowerCase() !== 'details') {
// abort for non-<detail> elements
return undefined;
}
// convert value to a boolean and pass it to the plugin
return $(elem).details(!!value);
}
};
$.attrHooks.open = {
get: function(elem) {
if (elem.nodeName.toLowerCase() !== 'details') {
// abort for non-<detail> elements
return undefined;
}
// convert the plugin's boolean to the string "open" or empty-string
// (.attr() is supposed to return the actual value of the attribute)
return $(elem).details('is-open') ? 'open' : '';
},
set: $.propHooks.open.set
};
2.val()函数 (jquery 1.6以上)
$.valHooks
$.valHooks.div = {
get: function(elem) {
return $(elem).data('foobar');
},
set: function(elem, value) {
$(elem).data('foobar', value);
}
};
3.css()函数 (jquery 1.4.3以上)
$.cssHooks
$.cssHooks.boxSizing = {
set: function(elem, value) {
if (value === 'border-box' && $('html').is('.ie6, .ie7')) {
// fix <IE8
elem.style.behavior = 'url(/scripts/boxsizing.htc)';
}
elem.style.boxSizing = value;
}
};
4.自定义selector 伪类 (jquery 1.3以上)
$.expr.filters 或者 $.expr[':'] 都可以 ,貌似是用$.expr[':']更常用
$.expr.filters.local = function(elem, i, match, array) {
if (elem.nodeName.toLowerCase() !== 'a') {
// abort for non-<a>
return false;
}
// use jQuery's URL denormalization
var href = $(elem).attr('href');
if (!href || href.substring(0, 1) === '#') {
// skip anchors
return false;
}
if (href.substring(0, 1) === '/') {
// authority-relative URL
return true;
}
// matching host?
var host = ('//' + location.host + '/')
.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1'));
return !!href.match(new RegExp(host, 'i'));
}
$.extend($.expr[':'],
{
loaded: function(el)
{
return $(el).data('loaded');
}
}
最后,原文作者还提到一些是用这些扩展的注意事项,具体内容可以查看原文。其中特别提一下对自定义selector伪类的使用有一个陷阱。
引用
一旦在selector中使用自定义的伪类,那么jquery就不能使用系统原生的querySelector() 函数来优化执行这个selector,而且伪类会对所有元素进行筛选,使用时最好去掉不必要的元素,比如:(a:foo 要好于 :foo)
分享到:
相关推荐
JQuery本地文件管理器——界面截图,欢迎大家下载
jQuery的一个插件——验证码插件 @example: $.idcode.setCode();
jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结
jquery经验总结——页面加载事件ready(fun)
JS和JQUERY各种特效代码展示——清华教授精髓版 包含了很多JS的特效 和JQUERY的特效 有菜单的特效 层的特效,还有对话框 ,拖拉元素,动态 ,美观的变化 ,很多的样式,代码全在,一看明了!不过有10MB请耐心下载!
收集来的东西,用过几次,很好用,使用起来很简单,使用后,点击图片图片会居中放大,再次点击,图片回归原样
jquery图片加载动画——queryloader2 兼容所有浏览器
一天搞定jQuery(二)——使用jQuery表格的隔行换色
一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择
easyui是一个基于jquery的集成了各种用户界面的插件。 使用easyui你不需要写太多javascript代码,一般情况下你只需要使用一些html标记来定义用户接口。 easyui非常简单,但是功能非常强大。
jquery 分页——jqueryPage.js
js JQuery验证电子邮箱的函数
一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果
总结了一些jQuery常用的函数,并附有实例
JQuery各Ajax函数说明。jQuery提供了AJAX全局函数的定义,以满足特殊的需求。下面是jQuery提供的所有函数(按照触发顺序排列如下)
jQuery实例讲解——通过一些小实例讲解jQuery的应用
jQuery.extend 函数详解 Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
资源名称:Extending.jQuery—扩展jQuery 内容简介:《扩展jQuery》分为4部分,共14章,讲解了为jQuery库创建自定义扩展的方法,从最大可重用性的角度来设计和编写插件的方法,以及为jQuery UI编写小部件和特效的...
一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选