使用jQuery在对象中缓存选择器的简单方法

 更新时间:2015年06月30日 10:00:19   投稿:goldensun  
这篇文章主要介绍了使用jQuery在对象中缓存选择器的简单方法,jQuery是最知名的JavaScript库,需要的朋友可以参考下

 当使用像jQuery这样的库时,开发者通常会使用选择器来访问和操作DOM中的元素。当一个选择在页面上被反复的访问时,把它缓存起来以获得更好的性能是个不错的想法。

让我们看一个例子,
 

jQuery(document).ready(function() {
  jQuery('#some-selector').on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
 
  jQuery('#another-element').on('hover', function() {
    jQuery(this).slideUp();
  });
 
  jQuery('#some-selector').on('click', function() {
    alert('You have clicked a featured element');
  });
 
  jQuery('#another-element').on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

也许你已经注意到,ID ‘some-selector' 和 ‘another-element' 在上面的代码片段中被提到了两次。通过把这些选择器保存到变量里,可以使他们能被复用,并且避免了重复选择操作。


当你开始在你的jQuery代码里积攒出各种各样的选择器时,你就能领会到在对象中缓存选择器 – 以键值对的形式 – 是多么美好。这使得你更容易在脚本中的任何地方访问它们,并且维护这些选择器也是轻而易举的事。

缓存选择器后,改进过的代码会像这样,
 

var someNamespace_Dom = {
  someSelector : 'jQuery("#some-selector")',
  anotherElement: 'jQuery("#another-element")',
};
 
jQuery(document).ready(function() {
  someNamespace_Dom.someSelector.on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
  someNamespace_Dom.anotherElement.on('hover', function() {
    jQuery(this).slideUp();
  });
  someNamespace_Dom.someSelector.on('click', function() {
    alert('You have clicked a featured element');
  });
  someNamespace_Dom.anotherElement.on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

由于选择器已经被缓存到变量中,DOM 树不再需要被重复遍历来寻找被操作的元素。‘someNamespace_Dom' 对象可以被用来添加更多键值对,使得维护工作很轻松。

相关文章

  • jquery中实现时间戳与日期相互转换

    jquery中实现时间戳与日期相互转换

    本文主要利用jquery扩展写了一个myTime对象,并写了2个函数分别处理日期和时间戳之间的相互转换。
    2016-04-04
  • jQuery表格列宽可拖拽改变且兼容firfox

    jQuery表格列宽可拖拽改变且兼容firfox

    使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局,用法及示例如下,感兴趣的朋友不要错过
    2014-09-09
  • jQuery使用$.ajax进行即时验证实例详解

    jQuery使用$.ajax进行即时验证实例详解

    这篇文章主要介绍了jQuery使用$.ajax进行即时验证的方法,以完整实例形式较为详细的分析了jQuery前台控制ajax交互与后台asp.net响应处理的详细实现技巧,需要的朋友可以参考下
    2015-12-12
  • JQuery获取元素尺寸、位置及页面滚动事件应用示例

    JQuery获取元素尺寸、位置及页面滚动事件应用示例

    这篇文章主要介绍了JQuery获取元素尺寸、位置及页面滚动事件应用,结合实例形式分析了jQuery针对页面元素动态操作相关实现技巧,并给出了购物车动画效果案例进行总结,需要的朋友可以参考下
    2019-05-05
  • jquery实现的一个导航滚动效果具体代码

    jquery实现的一个导航滚动效果具体代码

    首页有一个导航页面要实现滚动效果,索性就仿造别人的效果自己做了一个,大体上还行,看起来还是比较流畅的,现滚动效果,脚本代码如下,感兴趣的朋友可以参考下
    2013-05-05
  • JQuery+EasyUI轻松实现步骤条效果

    JQuery+EasyUI轻松实现步骤条效果

    jQuery EasyUI 提供易于使用的组件,它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。通过本文给大家介绍JQuery+EasyUI轻松实现步骤条效果,需要的朋友参考下
    2016-02-02
  • jQuery侧边栏随窗口滚动实现方法

    jQuery侧边栏随窗口滚动实现方法

    jQuery侧边栏随窗口滚动实现方法,需要的朋友可以参考一下
    2013-03-03
  • jquery实现简单文字提示效果

    jquery实现简单文字提示效果

    这篇文章主要介绍了jquery实现简单文字提示效果的方法,以完整实例形式分析了jQuery插件jquery-1.2.6.pack.js实现文字提示效果的相关技巧,并提供了jquery-1.2.6.pack.js的本站下载地址,需要的朋友可以参考下
    2015-12-12
  • jquery实现省市select下拉框的替换(示例代码)

    jquery实现省市select下拉框的替换(示例代码)

    本篇文章主要是对jquery实现省市select下拉框的替换(示例代码)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JQuery中Ajax的操作完整例子

    JQuery中Ajax的操作完整例子

    这篇文章主要介绍了JQuery中Ajax的操作完整例子,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03

最新评论