SKY外语计算机学习

标题: jquery选择器 [打印本页]
作者: rogan    时间: 2012-5-24 17:04
标题: jquery选择器
本帖最后由 rogan 于 2012-5-24 17:07 编辑
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[url=http://www.w3.org/TR/html4/strict.dtd]http://www.w3.org/TR/html4/strict.dtd[/url]">
  2. <html>
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf8">
  5.       <title>Untitled Document</title>
  6.       <script src="lib/jquery/jquery-1.4.2.js">
  7.       </script>
  8.       <script language="JavaScript">
  9. $(document).ready(function(){
  10.    //                $('#one').css("background", "#bbffaa");
  11.    //                $('.mini').css("background", "#bbffaa");
  12.    //                $('div').css("background", "#bbffaa");
  13.    //                $('*').css("background", "#bbffaa");
  14.    //                $('span, #two').css("background", "#bbffaa");
  15.    /*代码层次*/
  16. //  $('body div').css("background", "#bbffaa");
  17. //  $('body > div').css("background", "#bbffaa");
  18. //  $('.one + div').css("background", "#bbffaa");
  19. //  $('.one').next("div").css("background", "#bbffaa");
  20. //  $('#two ~ div').css("background", "#bbffaa");
  21. //  $('#two').nextAll("div").css("background", "#bbffaa");
  22. //$('.one').nextAll("div").css("background", "#bbffaa");
  23. //  $('.one').siblings("div").css("background", "#bbffaa");
  24. /*过滤选择*/
  25. //  $('div:first').css("background", "#bbffaa");
  26. //  $('div:last').css("background", "#bbffaa");
  27. //  $('div:not(.one)').css("background", "#bbffaa");
  28. //  $('div:even').css("background", "#bbffaa");
  29. //  $('div:eq(3)').css("background", "#bbffaa");
  30. //  $('div:gt(3)').css("background", "#bbffaa");
  31. //  $('div:lt(3)').css("background", "#bbffaa");
  32. //  $(':header').css("background", "#bbffaa");
  33. //  $(':animated').css("background", "#bbffaa");
  34.   $('div:visible').css("background", "#bbffaa");
  35. $('div:hidden').show(3000);
  36. });
  37.       </script>
  38.       <style type="text/css">
  39. div, span, p {
  40.    width: 140px;
  41.    height: 140px;
  42.    margin: 5px;
  43.    background: #aaa;
  44.    border: #000 1px solid;
  45.    float: left;
  46.    font-size: 17px;
  47.    font-family: Verdana;
  48. }
  49. div.mini {
  50.    width: 55px;
  51.    height: 55px;
  52.    background: #aaa;
  53.    font-size: 12px;
  54. }
  55. div.hide {
  56.    display: none;
  57. }
  58.       </style>
  59.     </head>
  60.     <body>
  61.       <div class="one" id="one">
  62. id=one,class=one 的div
  63. <div class="mini">
  64.    class = mini
  65. </div>
  66.       </div>
  67.       <div class="one" id="two" title="test">
  68. id = two,class = one,title = test 的div.
  69. <div class="mini" title="other">
  70.    class=mini title=other
  71. </div>
  72. <div class="mini" title="test">
  73.    class=mini,title=test
  74. </div>
  75.       </div>
  76.       <div class="one">
  77. <div class="mini">
  78.    class = mini
  79. </div>
  80. <div class="mini">
  81.    class = mini
  82. </div>
  83. <div class="mini">
  84.    class = mini
  85. </div>
  86. <div class="mini">
  87.    class = mini
  88. </div>
  89.       </div>
  90.       <div class="one">
  91. <div class="mini">
  92.    class = mini
  93. </div>
  94. <div class="mini">
  95.    class = mini
  96. </div>
  97. <div class="mini">
  98.    class = mini
  99. </div>
  100. <div class="mini" title="tesst">
  101.    class = mini,title=tesst
  102. </div>
  103.       </div>
  104.       <div style="display:none;" class="none">
  105. style的display=none的div
  106.       </div>
  107.       <div class="hide">
  108. class=hide的div
  109.       </div>
  110.       <div>
  111. 包含input的type=hidden的div<input type="hidden" size="8"/>
  112.       </div>
  113.       <span id="mover">正在执行动画的span元素。</span>
  114.     </body>
  115.   </html>
复制代码




欢迎光临 SKY外语计算机学习 (http://www.skywj.com/) Powered by Discuz! X2.5