jquery问题求解释在线等


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(".left").click(function(){
  if ( $("div").hasClass("protected") )
    $(this).animate({ left: -10});
}); 
</script>
<style type="text/css">
.protected {font-style:italic;}
</style>
</head>
<body>
<div class="protected">ddddd</div><div></div> 
<button id="left">«</button> <button id="right">»</button></body>
</html>
问下问什么我的div没有变化求解释刚接触jquery

解决方案 »

  1.   

    你都没有调用
    $(document).ready(function(){});
      

  2.   

    应该用$("#left")，如果用的是id的话前面用#，类似这样$("#控件id")，如果是css名就要用.类似这样$(".控件的class")。   $(this).animate({ left: -10});你这语句是修改的button的样式，不是修改的div的，修改div的代码为$(“.protected”).animate({ left: -10});
      

  3.   

    你可以参考下这个:
    http://www.w3school.com.cn/tiy/t.asp?f=jquery_animation
      

  4.   

    jquery的$(".left").click(function（）{}）这种 触发元素的click事件，要在页面元素加载完后才能执行，而且根据id获取元素是用  #left，  .left 是根据类样式获取元素
      

  5.   

    主要想看这句话是不是起作用的if ( $("div").hasClass("protected") )代码改了有错请指出：
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){
      $("div").click(function(){
      if ( $(this).hasClass("protected") )  $(this).animate({height:300},"slow");
      .animate({width:300},"slow");
      .animate({height:100},"slow");
      .animate({width:100},"slow");
      });
    });
    </script> 
    <style type="text/css">
    .protected {background:#98bf21;height:100px;width:100px;position:relative}
    </style></head>
     
    <body>
    <div id="box" class="protected">
    </div><div>dddd</div>
     
    </body>
    </html>
    谢谢
      

  6.   

    $(document).ready(function(){
      $("div").click(function(){
      if ( $(this).hasClass("protected") )  $(this).animate({height:300},"slow");
      .animate({width:300},"slow");
      .animate({height:100},"slow");
      .animate({width:100},"slow");
      });
    });
    你这写的什么啊。。
      

  7.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">  
    $(document).ready(function(){
      $("div").click(function(){
      if($(this).hasClass("protected"))
      {
          $(this).animate({ height: 300 }, "slow").animate({ width: 300 }, "slow").animate({height:100},"slow").animate({ width: 100 }, "slow");
      }
      });
    });
        </script>
        <style type="text/css">
            .protected
            {
                background: #98bf21;
                height: 100px;
                width: 100px;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id="box" class="protected">
        </div>
        <div>dddd</div>
    </body>
    </html>