jquery学习笔记

jquery是一个很强大的库。。

 看看它能干什么吧。。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
    $("#left-well").children().css("color", "green");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:even").addClass("animated shake");
    $("body").addClass("animated hinge");

  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

可以通过css选择器、id选择器甚至是元素选择器直接对body包括body里面的东西进行修改。使用的时候引入jQuery库和Animate.css库。我上面的代码是在一个学习网站上的在线代码，，所以没有库，，也没有bootstrap库。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");      

      为id为target1添加红色样式

    $("#target1").prop("disabled", true);

    使按钮变成不可按。

    $("#target4").remove();

   清除按钮4

    $("#target2").appendTo("#right-well");

    将按钮2移动到右边

    $("#target5").clone().appendTo("#left-well");

   克隆按钮5到左边

    $("#target1").parent().css("background-color", "red");

   为按钮1的父亲添加背景红色

    $("#right-well").children().css("color", "orange");

   为右边的孩子添加橘色

    $("#left-well").children().css("color", "green");

为左边的孩子添加绿色

    $(".target:nth-child(2)").addClass("animated bounce");

    css选择器为各自两边的第二个元素设置一个晃动效果

    $(".target:even").addClass("animated shake");

      让下标为偶数的（从0开始计数）的按钮有一个震动效果

    $("body").addClass("animated hinge");；

     很酷炫的一个效果。

  });
</script>

最后是图