jQuery + Events

Standard JS Events can be used with jQuery selections.

Syntax is SELECTOR.EVENT(FUNCTION{})

Executes CSS function upon click:

$("#btn1").click(function(){
$("#textZone").css("color", "blue");
});

Multiple events can be bound to a single function, executing it whenever either of the events occurs:

$("#btn3").bind("mouseover focus", function(){
$("#textZone").css({"color":"green", "font-weight":"bold"});
});

A hiding menu dependent on mouse positioning can be implemented with related concepts, in either of two ways:

An event that hides the menu on .mouseenter and hides it once .mouseleaves:

$("#listWrap").mouseenter(function(){
$(".list1").css({"display":"block"});
});

$("#listWrap").mouseleave(function(){
$(".list1").css({"display":"none"});
});

Or an event+function that uses the hover method, executing functions on ==true and ==false:

$(".hover").hover(function(){
//mouse is hovering
$(".hover").css("display","block");
}, function(){
//mouse is not hovering
$(".hover").css("display","none");
});

jQuery + Effects

Most importantly, this concept introduces arrow functions:

Function syntax accepts any {} as a function.

$SELECTION => {}

Effects can be chained with jQuery selections as well:

Hide and Show Effects:

$("#btn1").click(function(){
$(".box1").hide("slow");
});
$("#btn2").click(function(){
$(".box1").show("slow");
});

Simple Hide/Show Toggle:

$("#btn3").click(function(){
$(".box2").toggle();
});

Slide Up Hide and Slide Down Show Effects:

$("#btn4").click(function(){
$("#btn4").parent().next().slideUp();
});
$("#btn5").click(function(){
$("#btn4").parent().next().slideDown();
});

Fade In and Out Effects:

$("#btn8").click(function(){
$("#btn8").parent().next().fadeIn();
});
$("#btn7").click(function(){
$("#btn7").parent().next().fadeOut();
});

Fade Toggle Effect:

$("#btn9").click(function(){
$("#btn9").parent().siblings().fadeToggle();
});;

FadeTo Effect:

$("#btn11").click(function(){
$("#box3").fadeTo("SPEED", "OPACITY");
});

-gonkgonk

Intro to jQuery

Introduction to JS ES6