 |
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.
- parents() : return the ancestor elements of some elements
- toggleClass : toggle some elements' class
- 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);
- attr: return the value of an element's attribute
<input id='chk1' type=‘checkbox' checked=‘checked'>
var input = $(‘#check’)
var checked = input.attr(‘checked’)
- find: return the matched descendents by selector
- css: get or set css of some elements
var dummy;
dummy = $('#first');
dummy.css('font-size', '20px')
- html: return the html content of some elements
- text: return the text content of some elements
- events: register a behaviour when a certain event is fired
- 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);
});
- remove: remove matched elements
- append: insert content to the end of some elements
- prepend: insert content to the front of some elements
- insertBefore: insert content before a target element
- insertAfter: insert content after a target element
- 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
Comments
Post a Comment