/doc/node/fn.filter.html

https://github.com/RubyLouvre/mass-Framework · HTML · 149 lines · 140 code · 9 blank · 0 comment · 0 complexity · c88d3861068582878d2000f03652e8ae MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.     
    4. 

  4.     <head>
    5. 

  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    6. 

  6.         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    7. 

  7.         <title>$.fn.filter</title>
    8. 

  8.         <script>
    9. 

  9.             window.$$path = location.protocol + "//" + location.host;
    10. 

  10.             document.write('<script src="' + $$path + '/mass_merge.js"><\/script>')
    11. 

  11.             document.write('<script src="' + $$path + '/doc/scripts/common.js"><\/script>')
    12. 

  12.         </script>
    13. 

  13.     </head>
    14. 

  14.     
    15. 

  15.     <body>
    16. 

  16.         <article>
    17. 

  17.             <h3>$.fn.filter( expr )</h3>
    18. 

  18.             <p>
    19. 

  19.                 <span class="stress">描述：</span>
    20. 

  20.             </p>
    21. 

  21.             <p>取得当前匹配节点的所有匹配expr的节点，组成新mass实例返回。</p>
    22. 

  22.             <p>
    23. 

  23.                 <span class="stress">参数：</span>
    24. 

  24.             </p>
    25. 

  25.             <dl>
    26. 

  26.                 <dt>expr</dt>
    27. 

  27.                 <dd>必需。String|Function。CSS表达式，或者是一个回调函数。</dd>
    28. 

  28.             </dl>
    29. 

  29.             <p>
    30. 

  30.                 <span class="stress">返回值：</span>
    31. 

  31.             </p>
    32. 

  32.             <p>新的mass实例</p>
    33. 

  33.             <fieldset>
    34. 

  34.                 <legend>例子</legend>
    35. 

  35.                 <p>取得.sample1所有索引值为偶数的LI元素，这经常用于商场或新闻中隔行变色效果。</p>
    36. 

  36.                 <div class="sample1">
    37. 

  37.                     <ul>
    38. 

  38.                         <li>list item 1</li>
    39. 

  39.                         <li>list item 2</li>
    40. 

  40.                         <li>list item 3</li>
    41. 

  41.                         <li>list item 4</li>
    42. 

  42.                         <li>list item 5</li>
    43. 

  43.                         <li>list item 6</li>
    44. 

  44.                     </ul>
    45. 

  45.                 </div>
    46. 

  46.                 <pre class="brush:xml;gutter:false;toolbar:false">
    47. 

  47. 

  48.     <div class="sample1">
    49. 

  49.         <ul>
    50. 

  50.             <li>list item 1</li>
    51. 

  51.             <li>list item 2</li>
    52. 

  52.             <li>list item 3</li>
    53. 

  53.             <li>list item 4</li>
    54. 

  54.             <li>list item 5</li>
    55. 

  55.             <li>list item 6</li>
    56. 

  56.         </ul>
    57. 

  57.     </div>
    58. 

  58.     
    59. 

  59. </pre>
    60. 

  60.                 <pre class="brush:javascript;gutter:false;toolbar:false">
    61. 

  61. $.require("ready,css", function() {
    62. 

  62.     $(".sample1 li").filter(":nth-child(even)").css("color", "red")
    63. 

  63. });
    64. 

  64. </pre>
    65. 

  65.                 <button class="doc_btn" type="button">点我，执行代码</button>
    66. 

  66.             </fieldset>
    67. 

  67.             <fieldset>
    68. 

  68.                 <legend>例子</legend>
    69. 

  69.                 <p>使用过滤函数取得只包含一个strong元素的LI元素。</p>
    70. 

  70.                 <div class="sample2">
    71. 

  71.                     <ul>
    72. 

  72.                         <li>
    73. 

  73.                             <strong>list</strong>item 1 - one strong tag</li>
    74. 

  74.                         <li>
    75. 

  75.                             <strong>list</strong>item
    76. 

  76.                             <strong>2</strong>- two
    77. 

  77.                             <span>strong tags</span>
    78. 

  78.                         </li>
    79. 

  79.                         <li>list item 3</li>
    80. 

  80.                         <li>list item 4</li>
    81. 

  81.                         <li>list item 5</li>
    82. 

  82.                         <li>list item 6</li>
    83. 

  83.                     </ul>
    84. 

  84.                 </div>
    85. 

  85.                 <pre class="brush:xml;gutter:false;toolbar:false">
    86. 

  86. 

  87.     <div class="sample2">
    88. 

  88.         <ul>
    89. 

  89.             <li><strong>list</strong> item 1 - one strong tag</li>
    90. 

  90.             <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
    91. 

  91.             <li>list item 3</li>
    92. 

  92.             <li>list item 4</li>
    93. 

  93.             <li>list item 5</li>
    94. 

  94.             <li>list item 6</li>
    95. 

  95.         </ul>
    96. 

  96.     </div>
    97. 

  97.     
    98. 

  98. </pre>
    99. 

  99.                 <pre class="brush:javascript;gutter:false;toolbar:false">
    100. 

  100. $.require("ready,css", function() {
    101. 

  101.     $(".sample2 li").filter(function(el, i) {
    102. 

  102.         return $("strong", el).length == 1
    103. 

  103.     }).css("color", "red")
    104. 

  104. });
    105. 

  105. </pre>
    106. 

  106.                 <p>使用过滤函数，this是当时正在操作的DOM元素。参数有两个,el与this一样，i为el在mass实例的索引值。</P>
    107. 

  107.                 <button class="doc_btn"
    108. 

  108.                 type="button">点我，执行代码</button>
    109. 

  109.             </fieldset>
    110. 

  110.             <fieldset>
    111. 

  111.                 <legend>例子</legend>
    112. 

  112.                 <p>为中间四个加上红框。</p>
    113. 

  113.                 <style>
    114. 

  114.                     .sample3 div { width:60px; height:60px; margin:5px; float:left;  border:2px white solid;}
    115. 

  115.                     .sample3{
    116. 

  116.                         height: 70px;
    117. 

  117.                     }
    118. 

  118.                 </style>
    119. 

  119.                 <div class="sample3">
    120. 

  120.                     <div></div>
    121. 

  121.                     <div class="middle"></div>
    122. 

  122.                     <div class="middle"></div>
    123. 

  123.                     <div class="middle"></div>
    124. 

  124.                     <div class="middle"></div>
    125. 

  125.                     <div></div>
    126. 

  126.                 </div>
    127. 

  127.                 <pre class="brush:xml;gutter:false;toolbar:false">
    128. 

  128. 

  129.     <div class="sample3">
    130. 

  130.         <div></div>
    131. 

  131.         <div class="middle"></div>
    132. 

  132.         <div class="middle"></div>
    133. 

  133.         <div class="middle"></div>
    134. 

  134.         <div class="middle"></div>
    135. 

  135.         <div></div>
    136. 

  136.     </div>
    137. 

  137.     
    138. 

  138. </pre>
    139. 

  139.                 <pre class="brush:javascript;gutter:false;toolbar:false">
    140. 

  140. $.require("ready,css", function() {
    141. 

  141.     $(".sample3 div").css("background", "#c8ebcc").filter(".middle").css("border-color", "red");
    142. 

  142. });
    143. 

  143. </pre>
    144. 

  144.                 <button class="doc_btn" type="button">点我，执行代码</button>
    145. 

  145.             </fieldset>
    146. 

  146.         </article>
    147. 

  147.     </body>
    148. 

  148. 

  149. </html>
    150.