jQuery

Question 1

Incorporate jQuery

Answer 1

https://developers.google.com/speed/libraries#jquery

Here contains library that can be inserted at the end of the body right before the closing body tag.

Question 2

$.(‘ ‘)

Answer 2

This $ symbol means (document.querySelector || document.querySelectorAll )

Question 3

Common Commands

Answer 3

$(‘query’).css(‘css-property’ , ‘css-value’);

$(‘query’).addClass(‘class-name’);

$(‘query’).removeClass(‘class-name’);

$(‘query’).hasClass(‘class-name’)

$(‘query’).text(“Changes the text”) ———————-> Changes only text

$(‘query’).html(‘Changes the HTML’) ———————-> Changes the HTML as well

Question 4

Attribute method in jQuery

Answer 4

$(‘query’).attr(‘attribute’ , “change to the attribute”); ———–> Changes the attribute

$(‘query’).attr(‘attribute’); ————————-> Gets the attribute

Question 5

Click and Keypress Event Listener in jQuery

Answer 5

$(query).click(funtion ( ) { cond here } );

This will actually look through the whole document and attach event listener to the targeted query without needing to use for loop

$(query).keypress(funtion ( ) { cond here } ); ———–> Attach keypress event listener to targeted query.

$(query).keypress(funtion (event) { console.log(event.key); } ); —> Sends a console log about which key is pressed in the targeted query

Question 6

Jquery doesnt need FOR loops — Problem?

Answer 6

Its not a problem, but we need to wrap our head around the fact that it will select all the elements being targeted at once - so when trying to manipulate an element, we might unintentionally be trying to access multiple elements at once - may lead to unexpected behavior or error.

So better to try and target element in brwoser console first before going ahead in the program.

Question 7

General Event Listener?

Answer 7

$(query).on(‘event-type’ , function ( ) { code here } );

Here the event type can be any input from the here - https://developer.mozilla.org/en-US/docs/Web/Events

Question 8

$(query).before( ) [ || after( ) || prepend( ) || append( ) ]

Answer 8

Before(‘html element’) -> adds element before targeted element
after -> adds element after targeted element
prepend -> adds element before targeted element BUT just after the opening tag of target element
append -> similar to prepend but after element and before close tag.

Question 9

.remove( )

Answer 9

$(query).remove( ) —–> removes the element targeted.

Question 10

query.hide( ), toggle( ), fadeout( )

Answer 10

hide( ) hides an element targeted.
toggle( ) toggles between show and hiding an element.
fadeOut( ) fades out an element to hidden state
fadeIn( ) makes an element appear with a fade in effect
fadeToggle( ) will toggle between fade out and fade in.
slideUp( )
slideDown( )

Question 11

query.animate( )

Answer 11

Animate helps in animating numeric css.
Numeric CSS means CSS property with numeric values.
So something like color cant be animated.

But - margin, padding, opacity, height, width and so on can be changed.
Thing to note - if we want to input a percentage value like margin: 20% , the 20% is written as string.
Example - $(‘h1’).animate({margin: “20%””});
$(‘h1’).animate({font-size: 1.9rem});

Question 12

Chaining animation effect

Answer 12

$(query).fadeIn( ).fadeOut( ).animate({css-property:css-value});

dot notation can be used to chain animation effect in jQuery easily.