#Jquery Fundamental

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

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

2)
$: 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.

$(‘tag’)

$(‘.class’)

$(‘#id’)

3)
Ajax

$.ajax({

    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’);

        p.text(value);

    });
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);

    }

        

    $(‘div’).each(countChars);

To add an element to DOM using vanilla JS

var div = document.createNode(‘div’);

div.innerHTML = ‘someContent’;

var container = document.querySelector('#container’);

container.appendChild(div);

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!

Jun