用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - html代码库

jquery选择器demo

2013-03-12 作者: 小蜜锋举报

[html]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>2-4</title><!--   引入jQuery -->
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript">
</script>
  <script src="../scripts/assist.js" type="text/javascript">
</script>
  <link rel="stylesheet" type="text/css" href="../css/style.css" />
  <script type="text/javascript">
//<![CDATA[
  $(document).ready(function(){
         //选择 id为 one 的元素
      $('#btn1').click(function(){
                  $('#one').css("background","#bfa");
          });
          //选择 class 为 mini 的所有元素
          $('#btn2').click(function(){
                  $('.mini').css("background","#bfa");
          });
          //选择 元素名是 div 的所有元素
          $('#btn3').click(function(){
                  $('div').css("background","#bfa");
          });
          //选择 所有的元素
          $('#btn4').click(function(){
                  $('*').css("background","#bfa");
          });
          //选择 所有的span元素和id为two的div元素
          $('#btn5').click(function(){
                  $('span,#two').css("background","#bfa");
          });   


  });
  //]]>
  </script>
</head>

<body>
  <button id="reset">手动重置页面元素</button>

  <form>
    <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br />
    <br />
  </form>

  <h3>基本选择器.</h3><!-- 控制按钮 -->

  <form>
    <input type="button" value="选择 id为 one 的元素." id="btn1" /> <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" /> <input type="button" value="选择 元素名是 div 的所有元素." id="btn3" /> <input type="button" value="选择 所有的元素." id="btn4" /> <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" /><br />
    <br />
    <!-- 测试的元素 -->
  </form>

  <div class="one" id="one">
    id为one,class为one的div

    <div class="mini">
      class为mini
    </div>
  </div>

  <div class="one" id="two" title="test">
    id为two,class为one,title为test的div.

    <div class="mini" title="other">
      class为mini,title为other
    </div>

    <div class="mini" title="test">
      class为mini,title为test
    </div>
  </div>

  <div class="one">
    <div class="mini">
      class为mini
    </div>

    <div class="mini">
      class为mini
    </div>

    <div class="mini">
      class为mini
    </div>

    <div class="mini"></div>
  </div>

  <div class="one">
    <div class="mini">
      class为mini
    </div>

    <div class="mini">
      class为mini
    </div>

    <div class="mini">
      class为mini
    </div>

    <div class="mini" title="tesst">
      class为mini,title为tesst
    </div>
  </div>

  <div style="display:none;" class="none">
    style的display为"none"的div
  </div>

  <div class="hide">
    class为"hide"的div
  </div>

  <div>
    包含input的type为"hidden"的div<input type="hidden" size="8" />
  </div><span id="mover">正在执行动画的span元素.</span>
</body>
</html>


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...