jQuery

brief

jQuery is good... but heavy

jQuery is awesome!

Adding jQuery to Web Pages

jQuery via NODE.JS

npm install jquery

<script src="jquery-3.1.1.min.js"></script>

Link script to your project

Include jQuery via CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

Try out

jQuery versions

jQuery 1.x

Support most browsers

jQuery 2.x

Does not support old browsers, like IE<9. Smaller than 1.x

jQuery 3.1.1

jQuery Compat 3.0

Support only modern browsers

Support old browsers

latest:  1.14.1

latest:  2.2.3

http://code.jquery.com/jquery-latest.js

Selectors

Same as CSS...

$( "p" )

$( ".rolling" )

$( "form input" )

$( "input[name='newsletter']" )

$( "ul li:nth-child(3n)" )

$( "input:disabled" )

...with some extras

.eq( index ) / :gt( index ) / :lt( index ) 

$( "td:eq( 2 )" )

:header

$( ":header" )

:animated

$( "div:animated" )

:contains( text )

$( "div:contains('John')" )

:empty

:has( selector )

.parent

$( "td:empty" )

$( "div:has(p)" )

$( "td:parent" )

Visibility Filters

:visible

:hidden

$( "div:hidden" )

$( "div:visible" )

:input / :text / :password

:radio / :checkbox

:submit / :button

$( ":input:text" )

$( "form input:radio" )

$( ":submit" )

:image / :reset / :file 

$( ":image" )

Forms

I selected something,

so what?

Attributes

Attributes

Class

.hasClass( class ) //boolean

.addClass( class )

.removeClass( class )

.toggleClass( class )

$( "p:last" ).addClass( "selected" );

var rightString = $( "p:first" ).hasClass( "selected" );

$( "p:even" ).removeClass( "blue" );

$( "h2" ).toggleClass( "highlight" );

Let's add some posts!

Traversing

Filtering

.first( ) / .last( )

.eq( ) / .filter ( )

.has( )

.is( )

.not( )

.slice( )

$("li").eq(5)

$("p span").first()

$("li").has("ul")

$(event.target).is("li")

$("li").not(":even")

$("li").slice(2)

Tree traversing

.next( ) / .nextAll( ) / .nextUntil( ) 

.children( ) / .closest( ) / .find( )

.offsetParent( ) / .parent( ) / .parents( ) / .parentsUntil( )

.prev( ) / .prevAll( ) / .prevUntil( ) 

$("ul.level-2").children()

$("li.third-item").next()

$("li.item-a").parent()

$("li.third-item").prev()

.siblings( )

$("li.third-item").siblings()

Miscellaneous Traversing

.addBack( )

.add( )

.contents( )

.end( )

$("p").add("div")

$("div.after-addback").find("p").addBack()

$("#frameDemo").contents()

$( "ul.first" )
  .find( ".foo" )
    .css( "background-color", "red" )
  .end()
  .find( ".bar" )
    .css( "background-color", "green" );

DOM manipulation

DOM insertion, inside

.appendTo( )

.append( )

.prepend( )

.prependTo( )

$(".container").append($("h2"));

$("h2").appendTo($(".container"));

$( ".inner" ).prepend( "<p>Test</p>" );

$( "<p>Test</p>" ).prependTo( ".inner" );

DOM insertion, outside

.insertAfter( )

.after( )

.before( )

.insertBefore( )

$( ".container" ).after( $( "h2" ) );

$( "h2" ).insertAfter( $( ".container" ) );

$( ".inner" ).before( "<p>Test</p>" );

$( "<p>Test</p>" ).insertBefore( ".inner" );

DOM insertion, around

.wrap( )

.unwrap( )

.wrapAll( )

.wrapInner( )

$( "p" ).unwrap();

$( ".inner" ).wrap( "<div class='new'></div>" );

$( ".inner" ).wrapAll( "<div class='new'></div>");

$( ".inner" ).wrapInner( "<div class='new'></div>");

DOM replacement

.replaceWith( )

.replaceAll( )

$( "<h2>New heading</h2>" ).replaceAll( ".inner" );

$( "div.second" ).replaceWith( "<h2>New heading</h2>" );

DOM removal

.detach( )

.remove( )

.empty( )

$( ".hello" ).remove();

var p = $( "p" ).detach();

$( ".hello" ).empty();

Let's add some tabs!

CSS workaround

.css( )

let color = $( "h2" ).css( "background-color" );

.css( propertyName )

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

.css( propertyName, propertyValue )

Position

.offset( )

$element.html( "left: " + offset.left + ", top: " + offset.top );

Position

.position( )

$("elem:last").text("left: " + position.left + ", top: " + position.top);

Position

.scrollTop( ) .scrollLeft( )

$("p:last").text("scrollTop:" + p.scrollTop());

.width() and .height()

.outerWidth( )

.outerHeight( )

.innerWidth( )

.innerHeight( )

Try out

CSS workaround

Events

Browser events

$( window ).resize(function() {
  $( "#log" ).append( "<div>Handler for .resize() called.</div>" ); });

.resize( )

$( "#target" ).scroll(function() {
  $( "#log" ).append( "<div>Handler for .scroll() called.</div>" ); });

.scroll( )

The resize event is sent to the window element when the size of the browser window changes

This method is a shortcut for .on( "scroll", handler ) in the first and second variations, and .trigger( "scroll" ) in the third.

Document loading

$( document ).ready(function() {
  // Handler for .ready() called.
});

.ready( )

Specify a function to execute when the DOM is fully loaded.

.on( )

Attach an event handler function for one or more events to the selected elements.

$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

Trigger / remove handler

Execute all handlers and behaviors attached to the matched elements for the given event type.

$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );

.trigger( )

Remove an event handler.

$( "p" ).off();

.off( )

Mouse events

.contextmenu( )

.click( )

.dblclick( )

.hover( )

$( selector ).click( handler );

$( selector ).contextmenu( handler );

$( selector ).dblclick( handler );

$( selector ).hover( handlerIn, handlerOut );

.mouseenter( ) / .mouseleave( )

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Keyboard events

.keydown( )

.keypress( )

.keyup( )

$( "#target" ).keypress(function() {
  console.log( "Handler for .keypress() called." );
});

$( "#target" ).keydown(function() {
  alert( "Handler for .keydown() called." );
});

$( "#target" ).keyup(function() {
  alert( "Handler for .keyup() called." );
});

Effects

Basic effects

.show( )

.hide( )

.toggle( )

$( "p" ).hide();

$( "p" ).show( "slow" );

$( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });

Sliding

.slideUp( )

.slideDown( )

.slideToggle( )

$( "div" ).slideDown( "slow" );

$( "div" ).slideUp();

$( "#book" ).slideToggle( "slow", function() {
    // Animation complete.
  });

Some words about 'easing'

Fading

.fadeOut( )

.fadeIn( )

.fadeTo( )

.fadeToggle( )

$( "div:hidden:first" ).fadeIn( "slow" );

$( "#box1" ).fadeOut( 1600, "linear", complete );

$( "div.ghost" ).fadeTo( "slow", 0.33 );

$( "p:first" ).fadeToggle( "slow", "linear" );

Custom effects

Execute all handlers and behaviors attached to the matched elements for the given event type.

$( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });

.animate( )

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

.delay( ) / .finish( ) / .stop( )

Links

jQuery API Documentation

W3Schools

jQuery Russian Documentation

Free Online Course

car-360

Home Task

useful

Authors contacts

Darya Sabinina

Sergey Shaliapin

live:darya_sabinina

darya_sabinina@epam.com

ra_Levis

Siarhei_Shaliapin@epam.com