Front-end workshop

jQuery is a fast, small JS library

a presentation by Julia Dizhak

May 02, 2018

jQuery library

It makes things like HTML document traversal and manipulation, event handling, animation, and that works across all browsers

Browser supports

What is DOM?

Find an element (selectors)

$('*') - find everyting

$('span') - by tag

$('#AB-test') - by id

$('.menu') - by class

$('div, span, p') - several elements

Philosophy: find element, do smth to it

$('#container').addClass('isCool)

$('p').removeClass('closed')

$('span').toggleClass('animation')

Show / hide an element

$('div').hide()

$('div, p').hide()

$('div').show() - show hidden element

Get and set the text to an element

$('#myDiv').text() - get the text

$('span').text('Hello Laura') - set the text

$('#myDiv').html() - get/set inner html

$('input').val() - used with inputs, get/set value

Styles

$('span').css({'color': 'blue'}) - styles

$('span, div').css({'font-size': '14px', 'color': 'green'})

Manipulation

$('span').wrap('...') - wrap an element

$('.inner').append('...') - insert inside

$('.inner').after('...') - insert outside

$('.container').remove()

Can chain most methods together

$('p').addClass('sophisticated)

.text('Hello Jquery')

.show()

Jquery intro