# Basic jQuery
> [TOC]

## What is jQuery
* library write by javascript
* simplify the operation between HTML and javascript
> Bootstrap 3/4's all plugins depend on jQuery

## `script` tags
* browser will run any javascript in `script` element
* code in `$(document).ready();` will run after html be rendered
* if code is not inside, it may cause bugs

    $(document).ready(
        function(){

        }
     );

## selector
* all jQuery functions start with `$`

    <!-- already included both the jQuery library and the Animate.css library -->
    <!-- https://daneden.github.io/animate.css/ -->
    <script>
      $(document).ready(function() {
        $("button").addClass("animated bounce"); 
      });    
    </script>

* type
* `$("type")`
* `$("button").addClass("animated bounce"); `
* class
* `$(".class")`
* `$(".well").addClass("animated shake");`
* id
* `$("#id")`
* `$("#target3").addClass("animated fadeOut");`
* `target`
* `:nth-child(n)`
* select all the nth elements with the target class or element type
* `$(".target:nth-child(3)").addClass("animated bounce");`
* `:odd`, `:even`
> **even** refers to the position of elements with a zero-based system in mind
* `$(".target:odd").addClass("animated shake");`
* `body`
* `$("body").addClass("animated hinge");`

## Some functions
* `.removeClass()`
* remove class from an element
* `$("#target2").removeClass("btn-default");`
* `.css()`
* change the element's CSS
* `$("#target1").css("color", "blue");`
* `.prop()`
* adjust the property of the element`
* `$("button").prop("disabled", true);`
* `.html()`
* add HTML tags and text within an element
* `$("h3").html("<em>jQuery Playground</em>");`
* `.text()`
* only alters text without adding tags
* `.remove()`
* remove an HTML tag entirely
* `$("#target4").remove();`
* `.appendTo()`
* select HTML elements and append them to another elements
* `$("#target4").appendTo("#left-well");`
* `.clone()`
* clone the elements
* `$("#target2").clone().appendTo("#right-well");`
* `parent()`
* acess parent
* `$("#left-well").parent().css("background-color", "blue")`
* `children()`
* acess child
* `$("#left-well").children().css("color", "blue")`

## Resource
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
* for more jQuery functions
* https://api.jquery.com/

## Reference
* freecodecamp.org

---
###### tags: `Web`