Table of Contents
is a method that searches through the descendants(child) in the DOM tree and gets all child elements. Will move through multiple levels of children.
Check elements inside & use a selector expression to filter descendents.
Selector expression example:
'body', '#my-id', '.my-class'
HTML:
<button><p></p></button>jQuery:
// Selector example
$('button').find('p')
// Element/jQuery object example
const $pTags = $('p')
const $allThePTagsInTheButton = $('button').find($pTags)Hides an HTML element
<p id="my-paragraph"></p>// Ends up setting css `display` to `none`
// replace with example without callback function
$('#my-paragraph').hide()
// replace with example with callback function
$('#my-paragraph').hide(1000, function () { console.log('goodbye') })Shows an HTML element
<p id="my-paragraph"></p>// Sets css `display` to `block` or back to what it was before it was hidden
// replace with example without callback function
$('#my-paragraph').show()
// replace with example with callback function
$('#my-paragraph').show(1000, function () { console.log('hello') })Get the HTML contents of the first element selected OR set the HTML contents of every element selected
Finding the first selected element & return the HTML contents of that element as a string
<body>
<p>Words</p>
</body>// replace with GETTER example
const myBodyHtml = $('body').html()
console.log(myBodyHtml) // '<p>Words</p>'Sets the child elements of the selected element
<body>
</body>// replace with SETTER example
$('body').html('<p>Here's a paragraph</p>')
// Function example:
$('body').html(function(index, oldHtml) {
return '<p>New paragraph</p>'
})Gets or sets the text inside matched elements
<p>Some text</p>// replace with GETTER example
$('p').text() // return 'Some text'
// replace with SETTER example
$('p').text('New text') // sets the paragraph text to 'New text'Get the current value of the first element in the set of matched elements or set the value of every matched element.
A string of text, a number, or an array of strings corresponding to the value of each matched element to set as selected/checked.
.val() method is primarily used to get the values of form elements such as input, select and textarea. When called on an empty collection, it returns undefined.
<!-- Inputs have values instead of text -->
<input id="name" type="text" value="Starting value" placeholder="Starter content">// getter example
$('input:text').val()
// replace with SETTER example
$('input:text').val('name')adds content to the end of the selected DOM element, so this will end up being the
last childelement
We can send just one item to be appended or multiple (the optional content param).
<p id="prefilled">Text</p>
<p id="empty"></p>// Use .append to add the string of " add to end" to the end of the p element with an id of "prefilled"
$('#prefilled').append(' add to end')
// Use .append to add some text to the empty p element with the id of "empty"
$('#empty').append('some text')Output HTML:
<p id="prefilled">Text add to end</p>
<p id="empty">some text</p>same as append, but it does it to the beginning od the selected DOM element rather than the end.
We can send just one item to be prepended or multiple (the optional content param).
<p id="prefilled">Some text</p>
<p id="empty"></p>// Use .prepend to add some text to the beginning of the p element with an id of "prefilled"
$('#prefilled').prepend('add to beginning')
// Use .prepend to add some text to the empty p element with an id "empty"
$('#empty').prepend('some text')Output HTML:
<p id="prefilled">add to beginningSome text</p>
<p id="empty">some text</p>Gets the CSS properties for the first selected element, or sets the CSS properties for all selected elements.
p {
color: green;
}<p></p>$('p').css('color') // returns 'green'<p style="color: green"></p>$('p').css('color', 'yellow') // sets p tag color to yellowGet the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
Get the value of an attribute for the first element in the set of matched elements
set one or more attributes for every matched element.
<p id="paragraph"></p>// replace with GETTER example for getting the attribute of "test"
$('p').attr( 'id' )
// replace with SETTER example for setter a new id attribute of "a-new-value"
$('p').attr( 'class', 'newClass' )
// $('a').attr('href', 'www.google.com')
// $('img').attr('alt', 'src')
// $('link').attr('src')
// $('button').attr('type')Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
<p data-thing="some stuff"></p>// replace with GETTER example for getting the data attribute of "thing"
$('p').data('thing')
// replace with SETTER example for setting the value of the data attribute "thing" to a new value
$( 'p' ).data( 'thing', 'ourData' )
// New data:
$('p').data('someNewKey', 'some new data')Attach a function to the page that will be run on a certain event. The
.onis the "listener" that will run our "handler" (callback function) when the event occurs.
Good practice: Only set up event listeners when the page first loads. Otherwise, we risk adding multiple event listeners to single elements.
events - Name of event(s) to listen for.
[, selector] - Targeted element inside the selected element.
[, data] - Optional data to be passed to handler.
handler - A function to execute when the event is triggered. ALWAYS GETS EVENT OBJECT AS PARAM!!!
<p id="clickable"></p>
<!-- Pretend element that doesn't exist when the page loads -->
<p id="shows-up-later"></p>// replace with example for an event listener .on that will 'listen' for a click on the p element with an
// id of 'clickable' and console.log the string of 'we clicked the p tag!'
$('#clickable').on('click', function (event) {
// This function will automagically (via jQuery) get
// an argument passed to it which is an object
// representing the event that occurred
console.log('We clicked it!')
// event.target will be the element the event ocurred on
// Best practice: use `event.target` instead of `this` to be more accurate
$(event.target).text('Clicked')
// vs not as good:
// $(this).text('clicked')
})
$('body').on('click', '#shows-up-later', function (event) {
// This function will only run if an element in the body
// with an ID of `shows-up-later` is clicked on
// This supports this element not being on the page
// when this listener (`.on`) runs.
console.log('We clicked it!')
})Opposite of
.on- removes event handlers
<p id="clickable"></p>// replace with example for an event listener .off that will 'listen' for a click on the p element with an
// id of 'clickable' and console.log the string of 'we STOPPED the click on the p tag!'
const myEventHandler = function () { console.log('Clicked') }
$('#clickable').on('click', myEventHandler)
// $('#clickable').off()
// $('#clickable').off('click')
// If you're using `.off` make sure to reference the EXACT SAME handler function
// NOT a new anonymous function
$('#clickable').off('click', myEventHandler)NOTE: For .on if you use an anonymous function for the handler, .off will not know what to turn off!
Instead, use named functions :)
each goes through a jquery object and applies a function to each element
<div>foo</div>
<div>bar</div>
<div>baz</div>// changes the color of each div to `'blue'`
$('div').each( function ( index, element ) {
// vanilla js:
// this.style.color = 'blue'
// jQuery:
// $(this).css('color', 'blue')
$(element).css('color', 'blue')
})