The DOM manipulation library.
Download it and link it locally.
<script type="text/javascript" src="jquery.js"></script>
Link to a CDN (hosted copy).
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
jQuery preview:
$('#trigger').click(function() {
$('body').css('background', 'coral');
$('img').fadeOut(3000, function() {
$(this).remove();
});
});
$('selectorGoesHere');
//
$('#id');
$('.class');
$('p');
$('p > a');
Modify the styling of an element.
$(selector).css(property, value);
//
$('h2').css('color', 'teal');
//
var styles = {
background: 'coral',
color: 'teal'
};
$('body').css(styles);
Get/Set the combined text content of every matched element.
$(selector).text(); // gets value
$(selector).text('New string!'); // Sets value "New string!"
Get/Set the combined HTML content of every matched element.
$(selector).html(); // Get HTML value
$(selector).html('<div>Hello!</div>'); // Sets new HTML
Get/Set the value from an element that has values (input, select).
$(selector).val();
//
$('select.foo').val(); // Extracts value of select.foo el
$('input').val(''); // Clears input
Get/Set the value of an attribute of the first matched element.
$(selector).attr(attribute);
$('input').attr('type'); // "text"
$('img').attr('alt', 'This is an image!');
Adds a class to an element or a collection of els.
$(selector).addClass('new-class');
Removes a class from an element or a collection of els.
$(selector).removeClass('new-class');
Toggles the class of an element or a collection of els.
$(selector).toggleClass('active');
Add a click listener to a single element or a collection of els that currently exist on the page.
$(selector).click(cb);
//
$('button').click(function() {
// Use the JQ version of `this`
$(this).css('color', 'coral');
});
Add a keypress listener to a single element or a collection of els.
$(selector).keypress(cb);
//
$('input').keypress(function(e) {
if(e.which === 13) {
console.log('Yeah! Enter!');
}
});
Add a listener to a single element or a collection of els and all future elements.
$(selector).on(event, cb);
//
$('button').on('mouseenter', function() {
$(this).css('font-weight', '900');
});
$('button').on('mouseleave', function() {
$(this).css('font-weight', 'normal');
});
Add a fade-in / fade-out effect to a single element or a collection of els.
$(selector).fadeOut(duration, cb);
//
$('div').fadeOut(3000, function() {
$(this).remove();
});