zoukankan      html  css  js  c++  java
  • 【代码片段】jQuery测试内容过滤选择器

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>第2章示例4</title>
     6 <style type="text/css">
     7     body { width:760px; }
     8     div,p,h3,h1 { border:4px solid black; background-color:green; color:white; margin:6px; padding:5px; font:bold 14px/1 Arial,Helvetica,sans-serif; width:220px; float:left; }
     9     div p { width:205px; border-width:2px; margin:5px 0; float:none; }
    10     h1 { margin:6px 256px; }  h3 { position:relative; margin-right:500px; }
    11     div.top { height:65px; }
    12     .clear { clear:both; }
    13     div.hide { display:none; }  p.hide { visibility:hidden; }
    14     .highlight { background-color:gold; color:black; }
    15     form { clear:both; }
    16     button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px; cursor:pointer; width:240px; }
    17 </style>
    18 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    19 <script type="text/javascript">
    20     $(document).ready(function(){
    21         $("button").click(function(){$("*").removeClass("highlight");});
    22         $("#btn1").click(function(){$("div:contains('hello')").addClass("highlight");});    
    23         $("#btn2").click(function(){$("div:has(p)").addClass("highlight");});    
    24         $("#btn3").click(function(){$("div:parent").addClass("highlight");});
    25         $("#btn4").click(function(){$("div:empty").addClass("highlight");});
    26         function swing() {
    27             $("h3").animate({left:"500"},7000)
    28                     .animate({left:"0"},7000, swing);
    29         }
    30         swing();                            
    31     });
    32 </script>
    33 </head>
    34 <body>
    35     <h1>&lt;h1&gt; &lt;/h1&gt;</h1>    
    36     <div class="clear top">
    37         &lt;div class="clear top"&gt;
    38         <p>&lt;p&gt;hello&lt;/p&gt;</p>
    39         &lt;/div&gt;
    40     </div>
    41     <div class="top" id="core">
    42         &lt;div class="top" id="core"&gt;
    43         <p>&lt;p&gt; &lt;/p&gt;</p>
    44         &lt;/div&gt;
    45     </div>
    46     <div class="top">
    47         &lt;div class="top"&gt;<br/>
    48         hello, John<br/>
    49         &lt;/div&gt;
    50     </div>        
    51     <p class="clear">&lt;p class="clear"&gt; &lt;/p&gt;</p>
    52     <p>&lt;p &gt; &lt;/p&gt;</p>
    53     <p>&lt;p &gt; &lt;/p&gt;</p>    
    54     <h3 class="clear">&lt;h3 class="clear"&gt; &lt;/h3&gt;</h3>    
    55     <p class="clear">&lt;p class="clear"&gt; &lt;/p&gt;</p>
    56     <p>&lt;p &gt; &lt;/p&gt;</p>
    57     <p class="hide">&lt;p class="hide"&gt; &lt;/p&gt;</p>
    58     <div class="clear bottom">
    59         &lt;div class="clear bottom"&gt;
    60         <p>&lt;p&gt; &lt;/p&gt;</p>
    61         <p>&lt;p&gt; &lt;/p&gt;</p>
    62         <p>&lt;p&gt; &lt;/p&gt;</p>
    63         &lt;/div&gt;
    64     </div>
    65     <div class="bottom">
    66         &lt;div class="bottom"&gt;
    67         <p>&lt;p&gt; &lt;/p&gt;</p>
    68         <p>&lt;p&gt; &lt;/p&gt;</p>
    69         <p>&lt;p&gt; &lt;/p&gt;</p>        
    70         &lt;/div&gt;
    71     </div>
    72     <div class="hide bottom">
    73         &lt;div class="hide bottom"&gt;
    74         <p>&lt;p&gt; &lt;/p&gt;</p>
    75         <p>&lt;p&gt; &lt;/p&gt;</p>
    76         <p>&lt;p&gt; &lt;/p&gt;</p>        
    77         &lt;/div&gt;
    78     </div>
    79     <form>
    80         <button type="button" id="btn1">$("div:contains('hello')")</button>
    81         <button type="button" id="btn2">$("div:has(p)")</button>
    82         <button type="button" id="btn3">$("div:parent")</button>    
    83         <button type="button" id="btn4">$("div:empty")</button>
    84     </form>
    85 </body>
    86 </html>

     

  • 相关阅读:
    如何安装unidac 6.2.8 到delphi 7
    Sqoop
    Spark-PySpark sql各种内置函数
    Spark译文(三)
    Spark译文(二)
    Spark译文(一)
    YARN详解
    Spark2.X管理与开发
    Hadoop2.X管理与开发
    离线综合案例
  • 原文地址:https://www.cnblogs.com/kojya/p/2943555.html
Copyright © 2011-2022 走看看