jQuery选择器源码解读(四):tokenize方法的Expr.preFilter

前端之家收集整理的这篇文章主要介绍了jQuery选择器源码解读(四):tokenize方法的Expr.preFilter前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Expr.preFilter是tokenize方法中对ATTR、CHILD、PSEUDO三种选择器进行预处理的方法。具体如下:

属性名称解码 * 2、属性值解码 * 3、若判断符为~=,则在属性值两边加上空格 * 4、返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(runescape,funescape):将属性名称中的十六进制数解码成 * 单字节unicode字符或双字节unicode字符(中文或其它需要两个字节表达的文字) * 正则表达式的详细说明,可以参看我的“详解jQuery选择器正则表达式”文章 */ match[1] = match[1].replace(runescape,funescape);
  1. /*
  2. * 将<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>值解码
  3. * match[4]:表示放在单引号或双引号内的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>值
  4. * match[5]: 表示不用引号括起来的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>值
  5. */
  6. match[3] = (match[4] || match[5] || "").replace(runescape,funescape);
  7. /*
  8. * ~=的意思是单词匹配,在W3C中对单词的定义是以空白为不同单词的分隔符
  9. * 故此处在match[3]两边<a href="/tag/jiashang/" target="_blank" class="keywords">加上</a>空格后,可以利用indexOf,正确识别出该单词是否存在
  10. */
  11. if (match[2] === "~=") {
  12. match[3] = " " + match[3] + " ";
  13. }
  14. /*
  15. * 返回有用的前四个元素结果
  16. */
  17. return match.slice(0,4);
  18. },"CHILD" : function(match) {
  19. /*
  20. * 完成如下几项任务:
  21. * 1、把命令中child和of-type之前的字符变成小写字符
  22. * 2、对于nth开头的选择器检查括号内的数据有效性
  23. * 3、match[4]和match[5]分别存放xn+b中的x和b,x和b允许是负数
  24. * 4、返回最终的match对象
  25. *
  26. * match[1]:(only|first|last|nth|nth-last)中的一个
  27. */
  28. match[1] = match[1].toLowerCase();
  29. /*
  30. * 对于nth-child、nth-of-type、nth-last-child、nth-last-of-type四种类型括号内需设置有效数据
  31. * 而其它则括号内不允许有任何数据
  32. */
  33. if (match[1].slice(0,3) === "nth") {
  34. /*
  35. * 若选择器括号内没有有效参数,则抛出异常
  36. * 举例:若选择器是nth或nth(abc)则属于非法选择器
  37. */
  38. if (!match[3]) {
  39. Sizzle.error(match[0]);
  40. }
  41. /*
  42. * 下面先以nth-child()为例介绍一下语法,以便更好的理解下面<a href="/tag/daima/" target="_blank" class="keywords">代码</a>的作用
  43. * nth-child允许的几种使用方式如下:
  44. * :nth-child(even)
  45. * :nth-child(odd)
  46. * :nth-child(3n)
  47. * :nth-child(+2n+1)
  48. * :nth-child(2n-1)
  49. * 下面<a href="/tag/daima/" target="_blank" class="keywords">代码</a>中赋值号左侧的match[4]、match[5]用于分别记录括号内n前及n后的数值,<a href="/tag/baokuo/" target="_blank" class="keywords">包括</a>正负号
  50. * 对于:nth-child(even)和:nth-child(odd)来说,match[4]为空,
  51. * 所以返回 2 * (match[3] === "even" || match[3] === "odd")的计算结果
  52. * 因为在js中true=1,false=0,所以(match[3] === "even" || match[3] === "odd")等于1
  53. * 因此,2 * (match[3] === "even" || match[3] === "odd")的计算结果为2
  54. *
  55. * 等号右侧的“+”的作用是强制类型转换,将之后的字符串转换成数值类型
  56. */
  57. match[4] = +(match[4] ? match[5] + (match[6] || 1)
  58. : 2 * (match[3] === "even" || match[3] === "odd"));
  59. match[5] = +((match[7] + match[8]) || match[3] === "odd");
  60. } else if (match[3]) {
  61. /*
  62. * 若非nth起头的其它CHILD类型选择器带有括号说明,则抛出异常
  63. * 这里jQuery并没有严格按照W3C的规则来判定,因为其允许:first-child()的这种形式存在
  64. * 也就是对于jQuery来说:first-child()等同于:first-child,是合法选择器
  65. */
  66. Sizzle.error(match[0]);
  67. }
  68. return match;
  69. },"PSEUDO" : function(match) {
  70. /*
  71. * 完成如下任务:
  72. * 1、<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>伪类中用引号括起来的值
  73. * 2、对于非引号括起来的值,若存在伪类嵌套,则进一步解析确定当前伪类实际结束位置,
  74. * <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>当前伪类的完整字符串和值
  75. * 3、返回match中的前三项的副本。
  76. *
  77. * unquoted表示括号内非引号括起来的值,
  78. * 以:eq(2)为例,unquoted=2
  79. */
  80. var excess,unquoted = !match[5] && match[2];
  81. /*
  82. * 因为pseudo与child的匹配正则表达式有交集,所以,需要把属于child的部分忽略掉
  83. */
  84. if (matchExpr["CHILD"].test(match[0])) {
  85. return null;
  86. }
  87. /*
  88. * 若括号内的值使用引号(match[3])括起来的,
  89. * 则将除引号外的值(match[4])赋给match[2]。
  90. * match[3]表示引号。
  91. */
  92. if (match[3] && match[4] !== undefined) {
  93. match[2] = match[4];
  94. } else if (unquoted
  95. /*
  96. * rpseudo.test(unquoted):用来测试unquoted是否包含伪类,
  97. * 若包含伪类,则说明有可能存在伪类嵌套的可能性,需要进一步对unquoted进行解析
  98. * 例如: :not(:eq(3))
  99. */
  100. && rpseudo.test(unquoted)
  101. &&
  102. /*
  103. * <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>unquoted中连续有效地选择器最后一个字符所在位置
  104. */
  105. (excess = tokenize(unquoted,true))
  106. &&
  107. /*
  108. * unquoted.indexOf(")",unquoted.length - excess)
  109. * 从之前获得的连续有效地选择器最后一个字符所在位置之后找到")"所在位置,
  110. * 通常就在当前位置之后。
  111. * 再减去unquoted.length,用来获得match[0]中的有效完整的伪类字符串最后位置,
  112. * 注意,此时excess是一个负值
  113. *
  114. */
  115. (excess = unquoted.indexOf(")",unquoted.length
  • excess)

  • unquoted.length)) {

    1. // <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>有效的完整伪类match[0]和伪类括号内的数据match[2]
    2. match[0] = match[0].slice(0,excess);
    3. match[2] = unquoted.slice(0,excess);
    4. }
    5. // 返回match前三个元素的副本
    6. return match.slice(0,3);

    }
    }

猜你在找的jQuery相关文章