Finishing: jQuery

1. Start function
$ (document) .ready (function ( ) {

});

2. Selector + addClass () + removeClass ()
introduces the jQuery library and Animate.css library, so you can use both libraries directly in the editor, and then add the rebound bounce to animate elements with jQuery button .
$ (Document) .ready (function () {
　　$ ( "Button"). addClass ( "Animated Bounce");.
});

$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");
$("button").removeClass("btn-default");

3.css()
$("#target1").css("color", "blue");

4.prop () to adjust the properties of the element
$ ( "button") prop ( "disabled", true); -. Disable the button so it can not be selected, click

5.html () may be added to the HTML tags and text elements, and the contents of the previous contents of the element will be replaced off method.
text () can only change the text but can not modify the tag. In other words, this method will only pass incoming anything (including numerals) is displayed as text.
$ ( "h3") html ( "<em> jQuery Playground </ em>").;

6.remove () to remove HTML elements on the page
$ ( "# target4") remove ().;

7.appendTo () to the selected element to the other elements - Cut
$ ( "# target4") appendTo ( "# left-well");.

8.clone () Copy elements - Copy
$ ( "# target2") clone () appendTo ( "# right-well"); -.. To copy, cut and then - two elements have # target2

9.parent () to get the parent of the current element
$ ( "# left-well" ) parent () css ( "background-color", "blue")..;

10.children () Gets the child element of the current element
$ ( "# left-well" ) children () css ( "color", "blue")..;

11.nth-child (n) selected n th element (from start number 1)
$. ( "Target:. Child-Nth (. 3)"). AddClass ( "Animated Bounce"); a third element to a child element target Add bounce class

12. One interesting animation
$ ( "body") addClass ( "animated hinge").;

<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>

　　

  $(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");
  });