jquery Sizzle系列之filters

最新推荐文章于 2025-09-26 09:20:51 发布

原创最新推荐文章于 2025-09-26 09:20:51 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #Sizzle #ViewUI

jQuery源码浅析专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了Sizzle选择器中的各种过滤器，包括元素状态检查（如禁用、选中等）、类型匹配（如文本框、按钮等）及结构判断（如是否为空或含有子节点）。这些选择器用于高效地筛选DOM元素。

本代码来自1.7.1版本。

jQuery.expr = Sizzle.selectors;
jQuery.expr[":"] = jQuery.expr.filters;

//4227行
Sizzle.selectors = {

      //4483---返回的都是Boolean
      filters:{
            /*
             * @name enabled 
             * @info 加了一个限制：不能为隐藏域
            */
            enabled:function(elem){
                   return elem.disabled  === false && elem.type !== "hidden";
            },

            /*
             * @name disabled 
             * @info 匹配是否disabled
            */
            disabled:function(elem){
                   return elem.disabled === true;
            },

            /*
             * @name checked
             * @info 匹配是否选中
            */
            checked:function(){
                   return elem.checked === true;
            },

             /*
             * @name selected
             * @info 
            */
            selected:function(){
                  if(elem.parentNode){
                       elem.parentNode.selectedIndex;
                  }

                  return elem.selected === true;
            },

             /*
             * @name parent
             * @info 匹配是否含有子节点的，直接看有没有firstChild
            */
            parent:function(elem){
                  return !!elem.firstChild;
            },

            /*
             * @name empty
             * @info 匹配不含子节点的，直接看有没有firstChild
            */
            empty:function(elem){
                  return !elem.firstChild;
            },

            /*
             * @name has
             * @info 
            */
            has:function(elem,i,match){
                  return !!Sizzle(match[3],elem).length;
            },

             /*
             * @name header
             * @info 匹配是否是h1,h2,h3,h4,h5,h6
            */
            header:function(elem){
                  return (/h\d/i).test(elem.nodeName);
            },

            /*
             * @name text
             * @info 
            */
            text:function(elem){
                  var attr = elem.getAttribute("type"),
                        type = elem.type;

                  return elem.nodeName.toLowerCase() === "input" && 
                            "text" === type && (attr === type || attr === null);
            },

            /*
             * @name radio
             * @info 匹配是否是radio
            */
            radio:function(elem){
                  return elem.nodeName.toLowerCase() === "input" && "radio" === elem.type;
            },

            /*
             * @name checkbox
             * @info 匹配是否是checkbox
            */
            checkbox:function(elem){
                  return elem.nodeName.toLowerCase() === "input" && "checkbox" === elem.type;
            },

            /*
             * @name file
             * @info 匹配是否是文件输入域
            */
            file:function(elem){
                  return elem.nodeName.toLowerCase() === "input" && "file" === elem.type;
            },

           /*
             * @name password
             * @info 匹配是否是密码输入域
            */
           password:function(elem){
                  return elem.nodeName.toLowerCase() === "input" && elem.type === "password"
           },

           /*
             * @name submit
             * @info 
            */
           submit:function(elem){
                  var name = elem.nodeName.toLowerCase();
                  return (name === "input" || name === "button") && "submit" === elem.type;
           },

            /*
             * @name image
             * @info 匹配是否是图像
            */
            image:function(elem){
                  return elem.nodeName.toLowerCase() === "input" && "image" === elem.type;
            },

             
            /*
             * @name reset
             * @info 匹配是否reset
            */
            reset:function(elem){
                  var name = elem.nodeName.toLowerCase();
                  return (name === "input" || name === "button") && "reset" === elem.type;
            },

            /*
             * @name button
             * @info 
            */
            button:function(elem){
                  var name = elem.nodeName.toLowerCase();
                  return name === "input" && "button" === elem.type &&
                             name === "button";
            },

             /*
             * @name input
             * @info 
            */
            input:function(elem){
                  return (/input|select|textarea|button/i).test(elem.nodeName);
            },

            /*
             * @name focus
             * @info 
            */
            focus:function(elem){
                  return elem === elem.ownerDocument.activeElement;
            }

      }
}