jquery中钩子函数总结——jquery的另类扩展

前段时间在网站看到一篇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()函数（jquery1.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()函数（jquery1.6以上）

$.valHooks

$.valHooks.div = {
  get: function(elem) {
    return $(elem).data('foobar');
  },
  set: function(elem, value) {
    $(elem).data('foobar', value);
  }
};

3.css()函数（jquery1.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伪类（jquery1.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伪类的使用有一个陷阱。