js 与 jQuery 控制div显示与隐藏,给div赋内容 的简单测试。和css的简单写法

<!DOCTYPE html>
<html>
<head>
  <style>

      #div_id_1{color:red};
      .div_class_1{color:yellow}
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
  $(document).ready(function(){
//  下面几种方法都可以给div赋内容
//  $("div").html("111111111111");
//  $("div").text("222222222222");

//     $("#div_id").html("3333333333");
//  $("#div_id").text("4444444444");

//  $(".div_class").html("5555555555");
//    $(".div_class").text("6666666666");

//  alert($("#div_id_1").html());
//    alert($(".div_class_1").text());
  });


   function views(){
   $("#div_id_1").show();
//     document.getElementById("div_id_1").style.display="";
   }

   function blanks(){
     $("#div_id_1").hide();
//     document.getElementById("div_id_1").style.display="none";
   }
  </script>
</head>
<body>

<div id="div_id" class="div_class"></div>

<div id="div_id_1" class="div_class_1" style="display:none">success forever</div><br>
<input type="button" value="显示" onclick="views();">&nbsp;&nbsp;&nbsp;
<input type="button" value="隐藏" onclick="blanks();"><br>
</body>
</html>

相关推荐