#Jquery Fundamental

jQuery Homepage
jQuery Homepage

I have learnt fundamental about jQuery via this Udacity course. I will provide you a summary of what's covered. Note that content is taken from the lesson.
JQuery tutorial on w3school is pretty good to learn fundamental about JQuery as well.

Lesson 1: Intro

You can include jQuery by including a script pointing to a CDN source. You can get these scripts here.

<script   src="http://code.jquery.com/jquery-3.2.1.slim.min.js"  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="  crossorigin="anonymous"></script>

You can also have a local copy and have a script tag that points to it in a local directory.

<script src=‘js/jquery.min.js’></script>

$: jQuery Object
If you inspect a webpage and don't see undefined but function when you type in $ in the console, there is jQuery script being imported on this page.
we can select tags, classes and ids.


    type: “PUT”,
    url: “/api/parking/“ + driver._id,
    dataType: “json”,
    data: data
}).done(function(res) {
    if (res) {
        console.log('there is res');
    } else {
        console.log('err: ' + res);

Lesson 2: DOM Manipulation

over here, I just gonna list a list of functions that were mentioned in the course. You can see the complete list of jQuery API.

  1. parents() : return the ancestor elements of some elements
  2. toggleClass : toggle some elements' class
  3. next : return the immediate sibling of some elements
    // your code goes here!
    item1 = $('.highlighted');
    item2 = item1.next();
    item1.toggleClass('highlighted', false);
    item2.toggleClass('highlighted', true);
  4. attr: return the value of an element's attribute
    <input id='chk1' type=‘checkbox' checked=‘checked'>

    var input = $(‘#check’)
    var checked = input.attr(‘checked’)
  5. find:  return the matched descendents by selector
  6. css: get or set css of some elements
    var dummy;

    dummy = $('#first'); 
    dummy.css('font-size', '20px')
  7. html: return the html content of some elements
  8. text: return the text content of some elements
  9. events: register a behaviour when a certain event is fired
  10. val: get or set the value of elements
    $(‘input’).on(‘change’, function() {
        var val, h1;
        value = $(‘input’).val();
        p = $(‘#item’).children(‘p’);
  11. remove: remove matched elements
  12. append: insert content to the end of some elements
  13. prepend: insert content to the front of some elements
  14. insertBefore: insert content before a target element
  15. insertAfter: insert content after a target element
  16. each: iterates over a jQuery collection and execute some functions on each element
    function countChars() {
        var text, numOfChars;
        text = $(this).text();
        numOfChars = text.length;
        console.log('numOfChars is: ' + numOfChars);

To add an element to DOM using vanilla JS
var div = document.createNode(‘div’);
div.innerHTML = ‘someContent’;
var container = document.querySelector('#container’);

DOM can only be manipulated safely when it is ready. Refer to jQuery doc for more info. 
We can use the following function to ensure that DOM document is ready.

$(document).ready(function() {
    console.log(‘it is ready’);

$(function() {
   console.log(‘it is ready’);

Thank you for reading!