JQuery
Introduction
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
$ is called dollar sign operator or bling
$('#id') shorthand for jquery('#id')
Don't find this javascript inside until the DOM is parsed by browser
$(document).ready(function() {
// js code
});
Or
$(function() {
// js code
});
three ways of targeting elements: by type: $("button"), by class: $(".btn"), and by id $("#target1").
Dev Tips
- Basic selectors
- Basic animations
- Index filters
- Relationship filters
- Attribute filters
- Attribute method
- Image swap
- Class methods
- Content methods
- Dom Traversals
- Event Binding
$(document).ready(function() {
// BASIC SELECTORS
// using tag and class
$('p').css('border', '4px solid red');
$('p.lead').css('border', '4px solid red');
$('body p.lead').css('border', '4px solid red');
// using id
$('#lesson-1').css('border', '4px solid red');
$('*').css('border', '4px solid red');
// BASIC ANIMATIONS
$('.box:first').hide(500).delay(300).show(800);
$('.box:nth-child(2)').slideUp(500).delay(800).slideDown(800);
$('.box:nth-child(3)').fadeOut(500).delay(800).fadeIn(800);
$('.box:nth-child(4)').animate({width: '200px'}, 300);
$('.box:nth-child(4)').animate({height: '200px'}, 300);
$('.box:nth-child(4)').animate({bottom: '200px'}, 300);
$('.box:nth-child(4)').animate({bottom: '200px', left: '200px'}, 800);
// INDEX FILTERS
$('p').css('border', '4px solid red');
$('p:first').css('border', '4px solid red');
$('p:last').css('border', '4px solid red');
$('p:gt(2)').css('border', '4px solid red');
$('p:lt(2)').css('border', '4px solid red');
$('p:eq(2)').css('border', '4px solid red');
// RELATIONSHIP FILTERS
$('h2:has(span)').css('border', '4px solid red');
$('.box:parent').css('border', '4px solid red');
$('.box:empty').css('border', '4px solid red');
// ATTRIBUTE FILTERS
$('p[class="lead"]').css('border', '4px solid red');
$('p[name="shorty"]').css('border', '4px solid red');
$('p[name^="sho"]').css('border', '4px solid red');
$('a[href$=".co.uk"]').css('border', '4px solid red');
// ATTRIBUTE METHOD
// can get class and set a different one
alert($('p:first').attr('class')); // get the class
$('p:first').attr('class', 'not-lead'); // set the class
// IMAGE SWAP
$('img').attr('src', 'img2.jpg');
$('img').delay(400).fadeOut(500, function() {
$(this).attr('src', 'img2.jpg').fadeIn(500);
});
CLASS METHODS
alert($('p:first').hasClass('lead'));
$('p:first').addClass('blue').removeClass('lead');
$('p').toggleClass('blue').removeClass('lead');
CONTENT METHODS
$('p:first').text('Hey you guuuuuuyyyyyyyysss!'); // change text
alert($('p:first').text()); // retreive text
$('p:first').text('hey there <em>buddy</em>');
$('p:first').html('hey there <em>buddy</em>');
$('p:first').html('<a href="google.com">link</a>');
alert($('input').val());
$('input').val('yo dude!');
DOM TRAVERSALS
$('h2:has(span)').children().css('border', '4px solid red');
$('h2:has(span)').parents().css('border', '4px solid red');
$('h2:has(span)').parents('section').css('border', '4px solid red'); // limit how far parent to select
$('h2:has(span)').siblings().css('border', '4px solid red');
$('h2:has(span)').siblings('p:first').css('border', '4px solid red');
$('h2:has(span)').siblings('p').first().css('border', '4px solid red');
$('h2:has(span)').siblings('p').last().css('border', '4px solid red');
$('h2:has(span)').parents('section').siblings().css('border', '4px solid red');
$('h2:has(span)').parents('section').siblings().children().css('border', '4px solid red');
EVENT BINDING
$('h2').bind('click', function() {
$(this).toggleClass('blue');
});
shortcut for the above click event binding
$('h2').click(function() {
$(this).toggleClass('blue');
})
$('h2').hover(function() {
$(this).toggleClass('blue');
})
$('html').keypress(function() {
$(this).toggleClass('blue');
})
});
Freecodecamp
.addClass()
.removeClass()
.css()
.prop() // change properties of an element, like making button disabled
// ex - $("#target-button").prop("disabled", "true");
.html()
.remove() // remove the html element completely
.appendTo("#left-well")
In addition to moving elements, you can also copy them from one place to another.
jQuery has a function called clone() that makes a copy of an element.
For example, if we wanted to copy target2 from our left-well to our right-well, we would use:
$("#target2").clone().appendTo("#right-well");
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()
.children()
.closest()
.target:nth-child(n)
.target:even
.target:odd
Ex - $(".class").addClass("button");
JSON APIs and AJAX
APIs - Application Programming Interface are tools that computers use to communicate with one another.
Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.
Convert JSON data to HTML
<script>
$(document).ready(function() {
$("#getMessage").on("click", function() {
$.getJSON("/json/cats.json", function(json) {
var html = "";
// Only change code below this line.
json.forEach(function(val) {
var keys = Object.keys(val);
html += "<div class = 'cat'>";
keys.forEach(function(key) {
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
});
html += "</div><br>";
});
// Only change code above this line.
$(".message").html(html);
});
});
});
</script>
Render image from Data Sources
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
Prefilter JSON
json = json.filter(function(val) {
return (val.id !== 1);
});
Get geolocation data
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
Random Quote Machine
- Precache random quotes
- Tweet and share to facebook
- Particle effect
Learned
// To disable a input field
$('#item').prop('disabled', true);
$('#item').prop('disabled', false);