JQuery 노트 6: JQuery 필터 선택기

JQuery는 앞에 있는 선택기 외에 필터 선택기도 있습니다.기본 필터 선택기: (1):first에서 첫 번째 요소를 선택합니다.$("div:first") 첫 번째(2):last에서 마지막 요소를 선택합니다.$("div:last") 마지막 선택 (3): not(선택기) "선택기"조건에 맞지 않는 요소를 선택합니다: $("input: not(.myClass)") 스타일 이름이 myClass가 아닌 것을 선택합니다 (4): 이벤트,:odd, 색인을 선택하면 홀수, 짝수의 요소입니다: $("input:even") 색인을 선택하면 홀수입니다 (5): eq(색인 번호),:gt(색인 번호),: lt (인덱스 번호) 인덱스가 인덱스 번호보다 크고 작은 요소를 선택하십시오: $("input: lt (5)")) 인덱스가 5보다 작은 것을 선택하십시오 (6) $(": 헤더") 모든 h1... h6 요소 (아주 적음) (7) $("div: animated)))) 애니메이션을 실행하고 있는 요소를 선택하십시오.(드물게) 사례: 성적표: 첫 번째 줄은 표두이기 때문에 큰 글씨체(fontSize=30)를 표시하고 마지막 줄은 총집합이기 때문에 빨간색 글씨체를 표시합니다.본문의 앞 세 줄은 앞 세 줄이기 때문에 큰 글꼴(28) 표를 표시하는 홀수 줄은 노란색 배경이다.



    
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"/>
    <script type="text/javascript">
        $(function () {
            //id table1           tr      
            $("#table1 tr:first").css("fontSize", "40");  //       ，       （ fontSize=30 ）
            $("#table1 tr:last").css("color", "red"); //       ，        
             //  ，      ，              。
             //gt(0)              。lt(3)  Tom          ，  jim（    ）      ，      ：Tom,hengheng,miemie
            $("#table1 tr:gt(0):lt(3)").css("fontSize", "28"); //     ：     0 ，   3 （gt(0):lt(3)）  28   。
            $("#table1 tr:gt(0):even").css("color", "Yellow"); //  0    ，    
        });
      
    </script>


   <table id="table1">
   <tr><td>  </td><td>  </td></tr>
   <tr><td>Tom</td><td>100</td></tr>
   <tr><td>hengheng</td><td>100</td></tr>
   <tr><td>miemie</td><td>100</td></tr>
   <tr><td>jim</td><td>96</td></tr>
   <tr><td>haha</td><td>92</td></tr>
   <tr><td>   </td><td>96</td></tr>
   </table>

</code></pre> 
  <br/> 
  <br/> 
  <p>    ：                 ，         ，<br/></p> 
  <p>    $()        ，            .  $("ul", $(this)).css("background", "red");<br/></p> 
  <pre><code>

    <title/>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"/>
    <script type="text/javascript">
        $(function () {
            $("#div1").click(function () {
                $("ul", $(this)).css("background", "red")//         JQuery  ，               
            });
        });
      
    </script>


    <div id="div1">
        <ul>
            <li>         </li>
            <li>     </li>
            <li>  </li>
        </ul>
    </div>
    <div>
        <ul>
            <li>    </li>
            <li>       </li>
            <li>     </li>
        </ul>
    </div>

</code></pre> 
  <p><br/></p> 
  <p>      ：         td     <br/></p> 
  <pre><code>

    <title/>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"/>
    <script type="text/javascript">
        $(function () {
            $("#t1 tr").click(function () { $("td", $(this)).css("background","red"); });
        });
    </script>


<table id="t1">
<tr><td>dd</td><td>dd</td></tr>
<tr><td>dd</td><td>dd</td></tr>
<tr><td>dd</td><td>dd</td></tr>
</table>


</code></pre> 
  <br/> 
  <br/> 
  <br/>        ： 
  <br/> （1） $("div[id]")     id     <div> 
  <br/> （2）$("div[title=test]")    title     “ test ”   <div> ，   getElementsByName 。 JQuery     getElementsByName     ，  $("input[name=abc]") 
  <br/> （3） $("div[title!=test]")    title      “ test ”   <div> 
  <br/> 
  <p>（4）        、  、   ，       。（ * ）<br/><br/></p> 
  <pre><code>

    <title/>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"/>
    <script type="text/javascript">
        $(function () {
            $("input[value=     ]").click(function () {
                alert($("input:checked").val());
            });
        });
    </script>

<input id="Checkbox4" type="checkbox" value="  "/>  <br/>
<input id="Checkbox3" type="checkbox" value="  "/>  <br/>
<input id="Checkbox2" type="checkbox" value="  "/>  <br/>
<input id="Checkbox1" type="checkbox" value="  "/>  <br/>
<input type="button" value="     "/>



</code></pre> 
  <br/> 
  <br/> 
  <br/> 
  <br/> 
           （   ）： 
  <br/> （1） $("#form1:enabled")    id   form1             
  <br/> （2） $("#form1:disabled")    id   form1             
  <br/> （3） $("input:checked")          （ Radio 、 CheckBox ） 
  <br/> （4） $("select:selected")            （    ） 
  <br/> 
   �   ：        
  <br/> �   ：      
  <br/> 
   
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                     
                    <script type="text/javascript" src="/views/front/js/chanyan.js"/>
                    <!--    -         -->
                     
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!--    -  1       -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                        <!--    -  2       -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                        <!--    -  3       -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">       </h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                                <li><a href="#!/article/81.htm" title="java              " rel="nofollow">java              </a>
                                    <span class="text-muted">3213213333332132</span>
<a class="tag" taget="_blank" href="#!/search/java%E5%9F%BA%E7%A1%80/1.htm" rel="nofollow">java  </a>
                                </li>
                                <li><a href="#!/article/208.htm" title="Java          " rel="nofollow">Java          </a>
                                    <span class="text-muted">  _</span>
<a class="tag" taget="_blank" href="#!/search/java/1.htm" rel="nofollow">java</a><a class="tag" taget="_blank" href="#!/search/exception/1.htm" rel="nofollow">exception</a>
                                </li>
                                <li><a href="#!/article/335.htm" title="utf-8 utf-8( BOM)   " rel="nofollow">utf-8 utf-8( BOM)   </a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="#!/search/PHP/1.htm" rel="nofollow">PHP</a>
                                </li>
                                <li><a href="#!/article/462.htm" title="JAVA Annotation    " rel="nofollow">JAVA Annotation    </a>
                                    <span class="text-muted">   </span>
<a class="tag" taget="_blank" href="#!/search/java/1.htm" rel="nofollow">java</a><a class="tag" taget="_blank" href="#!/search/%E6%B3%A8%E8%A7%A3/1.htm" rel="nofollow">  </a><a class="tag" taget="_blank" href="#!/search/annotation/1.htm" rel="nofollow">annotation</a><a class="tag" taget="_blank" href="#!/search/%E5%85%A5%E9%97%A8/1.htm" rel="nofollow">  </a><a class="tag" taget="_blank" href="#!/search/%E6%B3%A8%E9%87%8A/1.htm" rel="nofollow">  </a>
                                </li>
                                <li><a href="#!/article/589.htm" title="tomcat    、      " rel="nofollow">tomcat    、      </a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="#!/search/tomcat/1.htm" rel="nofollow">tomcat</a>
                                </li>
                                <li><a href="#!/article/716.htm" title="Linux SSH     （Capistrano  cap      Permission ）" rel="nofollow">Linux SSH     （Capistrano  cap      Permission ）</a>
                                    <span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="#!/search/linux/1.htm" rel="nofollow">linux</a><a class="tag" taget="_blank" href="#!/search/capistrano/1.htm" rel="nofollow">capistrano</a>
                                </li>
                                <li><a href="#!/article/843.htm" title="log4j   " rel="nofollow">log4j   </a>
                                    <span class="text-muted">Harry642</span>
<a class="tag" taget="_blank" href="#!/search/java/1.htm" rel="nofollow">java</a><a class="tag" taget="_blank" href="#!/search/log4j/1.htm" rel="nofollow">log4j</a>
                                </li>
                                <li><a href="#!/article/970.htm" title="mysql、sqlserver、oracle  ，java        " rel="nofollow">mysql、sqlserver、oracle  ，java        </a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="#!/search/oracle/1.htm" rel="nofollow">oracle</a><a class="tag" taget="_blank" href="#!/search/jave/1.htm" rel="nofollow">jave</a>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>     ：</strong>
            <a href="#!/tags/A/1.htm" rel="nofollow">A</a><a href="#!/tags/B/1.htm" rel="nofollow">B</a><a href="#!/tags/C/1.htm" rel="nofollow">C</a><a href="#!/tags/D/1.htm" rel="nofollow">D</a><a href="#!/tags/E/1.htm" rel="nofollow">E</a><a href="#!/tags/F/1.htm" rel="nofollow">F</a><a href="#!/tags/G/1.htm" rel="nofollow">G</a><a href="#!/tags/H/1.htm" rel="nofollow">H</a><a href="#!/tags/I/1.htm" rel="nofollow">I</a><a href="#!/tags/J/1.htm" rel="nofollow">J</a><a href="#!/tags/K/1.htm" rel="nofollow">K</a><a href="#!/tags/L/1.htm" rel="nofollow">L</a><a href="#!/tags/M/1.htm" rel="nofollow">M</a><a href="#!/tags/N/1.htm" rel="nofollow">N</a><a href="#!/tags/O/1.htm" rel="nofollow">O</a><a href="#!/tags/P/1.htm" rel="nofollow">P</a><a href="#!/tags/Q/1.htm" rel="nofollow">Q</a><a href="#!/tags/R/1.htm" rel="nofollow">R</a><a href="#!/tags/S/1.htm" rel="nofollow">S</a><a href="#!/tags/T/1.htm" rel="nofollow">T</a><a href="#!/tags/U/1.htm" rel="nofollow">U</a><a href="#!/tags/V/1.htm" rel="nofollow">V</a><a href="#!/tags/W/1.htm" rel="nofollow">W</a><a href="#!/tags/X/1.htm" rel="nofollow">X</a><a href="#!/tags/Y/1.htm" rel="nofollow">Y</a><a href="#!/tags/Z/1.htm" rel="nofollow">Z</a><a href="#!/tags/0/1.htm" rel="nofollow">  </a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a href="#!/" rel="nofollow">  </a> -
            <a href="#!/custom/about.htm" rel="nofollow">    </a> -
            <a href="#!/search/Java/1.htm" rel="nofollow">    </a> -
            <a href="#!/sitemap.xml" rel="nofollow">Sitemap</a> -
            <a href="#!/custom/delete.htm" rel="nofollow">    </a>
        </div>
        <div class="copyright">     IT    CopyRight © 2000-2050 IT    IT610.com , All Rights Reserved.
            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank"> ICP 09083238 </a><br/>
        </div>
    </div>
</footer>
<!--      -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"/>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"/>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"/>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"/>





</div>

JQuery 노트 6: JQuery 필터 선택기

좋은 웹페이지 즐겨찾기