Sergey Shalyapin
Front-End Developer
jQuery is good... but heavy
jQuery is awesome!
jQuery via NODE.JS
npm install -S 'jquery@>=2.1'
npm install -S 'jsdom@3.1.2'
<script src="jquery-1.12.3.min.js"></script>
Link script to your project
Include jQuery via CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
jQuery 1.x
Support most browsers
jQuery 2.x
Does not support old browsers, like IE<9. Smaller than 1.x
jQuery 3.0
jQuery Compat 3.0
Support only modern browsers
Support old browsers
latest: 1.12.3
latest: 2.2.3
http://code.jquery.com/jquery-latest.js
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've selected something,
so what?
getter | setter |
---|---|
.attr('name') | .attr('name', value/function) |
.html() | .html(value) |
.text() | .text(value) |
.val() | .val(value) |
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!
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 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 iphones!
let color = $( "h2" ).css( "background-color" );
$( "div.example" ).css( "width", function( index ) {
return index * 50;
});
var p = $( "p:last" );
var offset = p.offset();
p.html( "left: " + offset.left +
", top: " + offset.top );
var p = $( "p:first" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left +
", top: " + position.top );
var p = $( "p:first" );
$( "p:last" ).text( "scrollTop:" + p.scrollTop() );
Width and Height
.height( ) / .outerHeight( ) / .innerHeight( )
.width( ) / .outerWidth( ) / .innerWidth( )
var modWidth = 50;
$( "div" ).one( "click", function() {
$( this ).width( modWidth ).addClass( "mod" );
modWidth -= 8;
});
$( "div" ).on( "click", function() {
$( this ).height( 30 ).css({
cursor: "auto",
backgroundColor: "green"
});
});
Try out
CSS workaround
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( )
Document loading
$( document ).ready(function() {
// Handler for .ready() called.
});
.ready( )
.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." );
});
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.
});
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( )
live:darya_sabinina
darya_sabinina@epam.com
ra_Levis
Siarhei_Shaliapin@epam.com
By Sergey Shalyapin