Skip to content

jQuery-Codes.md

Latest commit

 

History

History
143 lines (125 loc) · 5.34 KB

jQuery-Codes.md

File metadata and controls

143 lines (125 loc) · 5.34 KB
Raw

Jquery Code Samples

It must be located at the top of the page, just below the <head> tag.

All samples gained from freecodecamp's jQuery tutorial. here is the link. I definetly recommend FreeCodeCamp. There are tons of different tut's both related back-en and front-end.

<script>
  $(document).ready(function() {                // work after all page installed
    $("button").addClass("animated bounce");    // add css class "animated" and "bounce" to "button" type element
    $(".well").addClass("animated shake");      // add css class "animated" and "shake" to the elements which have ".well" class
    $("#target3").addClass("animated fadeOut"); // add css class "animated" and "fadeOut" to the elements which are have "#target3"
  });
</script>

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").removeClass("btn-default");    // removed selected class
    $("#target1").css("color", "red");         // edit css ".color" class' "red" color.
  });
</script>

.prop()

You can change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.

When you disable a button, it will become grayed-out and can no longer be clicked.

jQuery has a function called .prop() that allows you to adjust the properties of elements.

<script>
  $(document).ready(function() {
    $("#target1").prop("disabled", true);
  });
</script>

.html( ) and .text( )

Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.

jQuery has a function called .html() that lets you add HTML tags and text within an element.

Any content previously within the element will be completely replaced with the content you provide using this function.

<script>
  $(document).ready(function() {
    $("#target4").html("<em>#target4</em>"); // change html in the element that has an id o "#target4"
  });
</script>

jQuery also has a similar function called .text() that only alters text without adding tags.

In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.

<script>
  $(document).ready(function (){
    $("#target4").text("use this code instead of everything; <html></html") // it will write, exactly the same thing int he quotes even the " <html></html> part
  });
</script>

.remove()

Let's remove an HTML element from your page using jQuery.

jQuery has a function called .remove() that will remove an HTML element entirely

<script>
  $(document).ready(function (){
    $("#target4").remove(); // removes element that has "#target4" id.
  });
</script>

<script>
  $(document).ready(function(){
    $("div").remove(".but-primary"); remove elements in divs that have ".but-primary" class
  });
</script>

.appendTo( )

jQuery has a function called appendTo() that allows you to select HTML elements and append them to another element.

<script>
  $(document).ready(function() {
    $("#target2").appendTo("#right-well"); // "#target2" element append to "#right-well" id'ed div. 
  });
</script>

.clone( ) and function chaining

jQuery has a function called clone() that makes a copy of an element.

<script>
  $(document).ready(function() {
    $("#target5").clone().appendTo("#left-well"); //Clone your target5 element and append it to your left-well.
  });
</script>

Did you notice this involves sticking two jQuery functions together? This is called function chaining and it's a convenient way to get things done with jQuery.

.parent( )

Every HTML element has a parent element from which it inherits properties.

For example, your jQuery Playground h3 element has the parent element of

, which itself has the parent body.

jQuery has a function called parent() that allows you to access the parent of whichever element you've selected.

<script>
  $(document).ready(function() {
    $("#target1").parent().css("background-color", "red"); //Give the parent of the #target1 element a background-color of red.
  });
</script>

.children( )

jQuery has a function called children() that allows you to access the children of whichever element you've selected.

<script>
  $(document).ready(function() {
    $("#right-well").children().css("color", "orange"); // Give all the children of your right-well element the color orange.
  });
</script>

.target:nth-child( )

jQuery uses CSS Selectors to target elements. The target:nth-child(n) CSS selector allows you to select all the nth elements with the target class or element type.

<script>
  $(document).ready(function() {
    $(".target:nth-child(2)").addClass("animated bounce"); //Make the second child in each of your well elements bounce. You must select the elements' children with the target class.
  });
</script>

target full body

We're done playing with our jQuery playground. Let's tear it down!

jQuery can target the body element as well.

<script>
  $(document).ready(function() {
    $("body").addClass("animated hinge"); //Add the classes animated and hinge to your body element.
  });
</script>