精华内容
下载资源
问答
  • jQuery 选择器按照功能主要分为"选择"和"过滤. 并且是配合使用的. 可以同时使用组合 成一个选择器字符串. 主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中 筛选, "过滤"选择器也可以单独使用, 表示从...
  • jQuery选择器按照功能主要分为"选择"和"过滤. 并且是配合使用的. 可以同时使用组合 成一个选择器字符串. 主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中 筛选, "过滤"选择器也可以单独使用, 表示从...
  • 12个很棒的jQuery选择器扩展(翻译)

    万次阅读 2012-03-14 15:51:59
    我最近开始编写自己的jQuery选择器,我越来越开始意识到这是一种不错而简洁的完成某些特定任务的方式,而以往我使用的是迭代器。 这些选择器中如果不是你一直在寻找的,你也许根本将不会碰到。所以我决定写下一个...

    我最近开始编写自己的jQuery选择器,我越来越开始意识到这是一种不错而简洁的完成某些特定任务的方式,而以往我使用的是迭代器。

    这些选择器中如果不是你一直在寻找的,你也许根本将不会碰到。所以我决定写下一个简单的教程来告知你用jQuery写出自己的选择器是一件相当轻松的事。

    下面是一个用jQuery编写选择器的模版文件,你需要的全都在这里:

    01 $.extend($.expr[':'],
    02 {
    03     selectorName: function(el, i, m)
    04     {
    05         return true/false;
    06     },
    07      
    08     selectorName2: function(el, i, m)
    09     {
    10         return true/false;
    11     }
    12 });

    下面是两种调用一个选择器的方法,一种带有一个参数而另一种则没有参数:

    1 $("#container :selectorName");
    2 $("#conainert :selectorName(#element)");
    3 $("#conainert :selectorName(>300)");

    i与m参数可以是缺省的,当传入一个集合,他们只是用来匹配一个参数的当前元素的索引。当你传入一个参数时,匹配器便开始工作了,这是一个正则表达式匹配器,返回类似如下信息:

    1 [":width(>100)""width"""">100"]

    你会经常使用到m[3]的值,至此,便由你决定如何处理传入的参数。下面给出了一系列的例子。

    我们可以与jQuery已有的选择器一起进行链式的调用,这是相当有意思的:

    1 $("#container :isBold:even");
    2 $("#container :leftOf(#element):width(>100):height(>100)");

    你可以在此下载该库和文档

    以下列出12个自定义的选择器实例,你可以在这些选择器中放入任何内容,只要你根据当前元素是否通过选择器测试返回true或者false值即可。

    1、:loaded

    选择所有加载完的图片:

    01 $.extend($.expr[':'],
    02 {
    03     loaded: function(el)
    04     {
    05         return $(el).data('loaded');
    06     }
    07 }
    08  
    09 $('img').load(function(){ $(this).data('loaded'true); });
    10 $('img:loaded');

    2、:width

    选择所有宽度大于或小于指定值的元素:

    01 $.extend($.expr[':'],
    02 {
    03     width: function(el, i, m)
    04     {
    05         if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;}
    06         return m[3].substr(0,1) === '>' ?
    07             $(el).width() > m[3].substr(1) : $(el).width() < m[3].substr(1);
    08     }
    09 }
    10  
    11 $('#container :width(>100)');

    3、:height

    选择所有高度大于或小于指定值的元素:

    01 $.extend($.expr[':'],
    02 {
    03     height: function(el, i, m)
    04     {
    05         if(!m[3]||!(/^(<|>)\d+$/).test(m[3])) {return false;}
    06         return m[3].substr(0,1) === '>' ?
    07             $(el).height() > m[3].substr(1) : $(el).height() < m[3].substr(1);
    08     }
    09 }
    10  
    11 $('#container :height(<100)');

    4、:leftOf

    选择在指定元素左边的所有元素

    01 $.extend($.expr[':'],
    02 {
    03     leftOf: function(el, i, m)
    04     {
    05         var oe = $(el).offset();
    06         var om = $(m[3]).offset();
    07  
    08         return oe.left + $(el).width() < om.left;
    09     }
    10 }
    11  
    12 $('#container :leftOf(#element)');

    5、:rightOf

    选择在指定元素右边的所有元素

    01 $.extend($.expr[':'],
    02 {
    03     rightOf: function(el, i, m)
    04     {
    05         var oe = $(el).offset();
    06         var om = $(m[3]).offset();
    07  
    08         return oe.left > om.left + $(m[3]).width();
    09     }
    10 }
    11  
    12 $('#container :rightOf(#element)');

    6、:external

    选择所有带外站链接的锚点标签

    01 $.extend($.expr[':'],
    02 {
    03     external: function(el)
    04     {
    05         if(!el.href) {return false;}
    06         return el.hostname && el.hostname !== window.location.hostname;
    07     }
    08 }
    09  
    10 $('#container :external');

    7、:target

    选择指定target属性的锚点标签

    01 $.extend($.expr[':'],
    02 {
    03     target: function(el, i, m)
    04     {
    05         if(!m[3]) {return false;}
    06         return (m[3] === '_self' && ($(el).attr('target') == '' || !el.target)) ||
    07             (m[3] === $(el).attr('target'));
    08     }
    09 }
    10  
    11 $('#container :target(_self)');

    8、:inView

    选取位于可视窗口内的所有元素

    01 $.extend($.expr[':'],
    02 {
    03     inView: function(el)
    04     {
    05         var offset = $(el).offset();
    06  
    07         return !(
    08             (offset.top > $(window).height() + $(document).scrollTop()) ||
    09             (offset.top + $(el).height() < $(document).scrollTop()) ||
    10             (offset.left > $(window).width() + $(document).scrollLeft()) ||
    11             (offset.left + $(el).width() < $(document).scrollLeft())