`
renzhen
  • 浏览: 250884 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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() 函数 (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本地文件管理器——界面截图,欢迎大家下载

    jquery点击图片放大插件——即插即用.zip

    jQuery插件是基于jQuery核心功能的扩展,它们封装了一些特定的功能,使得开发者能轻松地集成到自己的项目中。这个点击图片放大插件就是典型的jQuery插件,它利用jQuery提供的API和事件处理机制,实现了图片的动态...

    jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

    引入后,就可以在页面中使用`$`或`jQuery`函数来操作DOM。 3. **jQuery对象与DOM对象** - **jQuery对象**:使用`$()`函数选择的元素集合,可以执行jQuery特有的方法。 - **DOM对象**:原生JavaScript中的DOM元素...

    JS和JQUERY各种特效代码展示——清华教授精髓版

    JS和JQUERY各种特效代码展示——清华教授精髓版 包含了很多JS的特效 和JQUERY的特效 有菜单的特效 层的特效,还有对话框 ,拖拉元素,动态 ,美观的变化 ,很多的样式,代码全在,一看明了!不过有10MB请耐心下载!

    jQuery的一个插件——验证码插件

    总结起来,jQuery验证码插件是提高网站安全性的有效工具,通过简单的API调用即可实现动态验证码功能。开发者可以利用它提供的灵活性和易用性,快速在自己的项目中集成验证码验证,保护网站免受恶意攻击。

    jQuery自定义插件开发基础1——jQuery实用函数的实现

    在本文中,我们将深入探讨jQuery自定义插件的开发基础,特别是如何实现jQuery实用函数。首先,我们需要了解jQuery的核心理念,它是一个轻量级的JavaScript库,极大地简化了DOM操作、事件处理、动画效果和Ajax交互。...

    jQuery实现的Ajax函数(已测试)——ASP

    **jQuery实现的Ajax函数在ASP中的应用** Ajax(异步JavaScript和XML)技术允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容,显著提升了用户体验。jQuery库简化了JavaScript的Ajax操作,...

    JQuery EasyUi之界面设计——通用的JavaScript

    easyui是一个基于jquery的集成了各种用户界面的插件。 使用easyui你不需要写太多javascript代码,一般情况下你只需要使用一些html标记来定义用户接口。 easyui非常简单,但是功能非常强大。

    jquery引用文件——jquery.js

    jQuery拥有庞大的插件生态系统,如Bootstrap、jQuery UI等,它们扩展了jQuery的功能,覆盖了表单验证、日期选择器、轮播图等多种场景。通过简单地引入这些插件,可以快速实现复杂的功能。 总结,jQuery通过提供高效...

    学习jQuery中的Ajax——$.get()方法

    本篇文章将深入探讨jQuery中的Ajax方法之一——`$.get()`,以及如何通过它来实现异步数据交互。`$.get()`是jQuery提供的一个便捷的Ajax函数,用于发起GET类型的HTTP请求。 ### 一、$.get()的基本用法 `$.get()`...

    jquery插件——多级菜单

    在这个“jquery插件——多级菜单”项目中,我们可能看到以下关键技术点: 1. **CSS样式和布局**:多级菜单的呈现通常依赖于CSS来实现层次感。通过设置适当的`display`属性(如`none`和`block`),我们可以控制菜单...

    Jquery基础实例01——用户名校验

    **jQuery基础实例01——用户名校验** 在Web开发中,客户端验证是必不可少的一部分,它能够提高用户体验,减少无效请求...在后续的实例中,我们可以探索更多关于jQuery的功能,如Ajax异步通信、动画效果和插件使用等。

    jQuery:jQuery.extend函数详解

    `jQuery.extend`是jQuery库中一个非常实用且功能强大的函数,主要用于合并两个或多个对象的属性至一个新的对象中。这使得开发人员能够在编写插件或其他代码时方便地扩展jQuery的功能,或者简单地合并配置选项。 ###...

    一天搞定jQuery(一)——使用jQuery完成定时弹出广告

    在"一天搞定jQuery(一)——使用jQuery完成定时弹出广告"的主题中,我们将深入探讨如何利用jQuery来实现一个定时弹出的广告功能。 首先,我们需要了解jQuery的核心概念。jQuery通过选择器(Selectors)获取DOM元素,...

    一天搞定jQuery(二)——使用jQuery表格的隔行换色

    在本教程中,我们将深入探讨如何使用jQuery实现表格的隔行换色效果,这是一项常见的网页美化技术,可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库,提供了丰富的功能来简化DOM操作,让...

    jq22jqueryslider4678201807262215.zip

    jQuery Slider是一款广泛应用于网站设计中的轮播图插件,它基于JavaScript库jQuery进行开发,能够帮助开发者轻松实现图片、内容的动态展示效果,为用户带来流畅且美观的交互体验。本插件的核心在于其灵活性和易用性...

    一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果

    在本教程中,我们将深入探讨如何使用jQuery库来实现一种常见的网页交互功能——省市二级联动效果。这种效果常用于地址选择,用户在选择省份时,下拉框中的城市选项会根据所选省份动态更新。这既提高了用户体验,也...

    jquery基础实例002——可编辑的表格

    在本实例中,"jquery基础实例002——可编辑的表格"主要展示了如何使用jQuery库来实现一个基本的交互式、可编辑的表格功能。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...

    jquery 分页——jqueryPage.js

    在 JavaScript 部分,我们通过 `$("#pagination").jqueryPage()` 初始化分页组件,并传递一些关键参数,如总页数、当前页数、每页显示的条数以及点击页码后的回调函数。`clickCallback` 函数会在用户点击分页链接时...

    jQuery1.12.4+jQuery中文手册.rar

    在本压缩包中,我们有两个版本的jQuery核心库文件:`jquery-1.12.4.js` 和 `jquery-1.12.4.min.js`。前者是未压缩的源代码,适合开发调试使用,后者是经过压缩和优化的版本,适用于生产环境,体积更小,加载速度更快...

Global site tag (gtag.js) - Google Analytics