/*   Effect Animations     */

//Methods :fadeOut, fadeIn, fadeTo, fadeToggle

//fadeOut adds property 'display: none'


$('elem').fadeTo(1000, 0.5);
// 0.5 will be the opacity.

//Will Toggle between fadeOut and fadeIn. If it's already Faded out, It will fadeIn and vice-versa ( It will remeber opacity mentioned in line 6 and will provide same opacity.

$('elem').fadeTo(1000, 0);
// Opacity will be zero, But element will be there (Blank Space )

// Methods : hide , show, toggle

// It will add prop "Display : none".

// It will add prop 'display : block'.

//It will switch between none/block.

// Methods slideUp, slideDown, slideToggle

//There will be cool animation, And it will add 'display:none'.

// It will reverse the slideUp or it will pop up the element by adding prop 'display:block'.

//It will switch between slideUp/slideDown.

//Animate ( Values have to be numerical )
    'margin-left' : '20px',
}, 1000 )
// 1st way, It will set the margins and override the defauls ones,

// 2nd way, This is better as it will add/remove margins to the current provided
    'margin-left' : '+=20px',
  'opacity' : '0'
}, 1000 )

//We can also do camel casing in properties.
    'margin-left' : '+=200px',
    'opacity' : '0.8',
    'height' : '50px',
     width : '50px',
    'margin-top' : '10px',
     borderRadius : '9px' 
}, 1000 )

//Delaying and Chaining Examples.
$('elem').delay( time ).method( property )

//slideToggle() will work after 2 seconds.

//Timing the functinos according to the Time ( As a call back functions )
$('div#content .red-box').slideUp( 2000, 0, function(){
    $('div#content .green-box').slideUp( 2000, 0 ,function(){
        $('div#content .blue-box').slideUp(2000, 0 )
           //All the call back functions are nested with each other.

// Or 1:  using Arrow functions.
$('div#content .red-box').slideUp( 2000, 0 , () => {
    $('div#content .green-box').slideUp( 2000, 0 , () => {
        $('div#content .blue-box').slideUp(2000 , 0)

// Or 2:  using Arrow functions + Chaining + using different methods in one program.
$('div#content .red-box').slideUp( 2000, 0 , () => {
    $('div#content .green-box').animate({
        marginTop : '20px',
        'opacity' : '0.6',
     }, 2000 , ()=>{

          /*  -----------------------XX ---------------------------- */

            /*               Selectors.         */


$('body').children().not('.one').css('border' , '2px solid red');
$('.parent').children().not('.one').css("border","30px solid blue");

$('ul').children('li.spec').slideUp(2000); //Direct children 'li.spec' of 'ul'

$('li').parents('ul').css('border', '2px solid red');
$('ul').children('ol').css('font-weight', 'bolder');
$('li').siblings('li').css('border', '2px solid red');

 $('h1').next().css('border', '2px solid red');
 $('h1').prev().css('border', '2px solid red');

 $('li').filter(":odd").css('border', '2px solid red');
 $('ul').find('li').filter(":even").css('border', '2px solid red');

$('ul').first().css('background-color', 'red');
$('ul').last().css('background-color', 'red')

$('li').eq( numberHere ).css('background-color', 'red');
$('li').eq( -numberHereFromBackToFront ).css('background-color', 'red');

   /*  -----------------------XX ----------------------*/  

                    /*  DOM  */
$('ol').append('<li> Will be last item on OL </li>');
$('<li> Seven </li>').appendTo(('ol'));

$('ol').prepend('<li> Will be Top Item on OL </li>');
$('<li> From Top Seven </li>').prependTo(('ol'));

$('').after("<div class='box bg-info m -4'> after </div>");
$('').before("<div class='box bg-secondary m -4'> before </div>")

  return "<div class='box bg-secondary m -4'> before </div>";
//We can do like this for all the above mentioned methods.

$('li:even').replaceWith('<li>  All the Even li will be replaced </li>');
  return 'Works same way, But we are returning using an function';
$('li:even').replaceAll('<li>  All the Even li will be replaced </li>');

//Removing elements

$('p').empty(); //Will only remove the content inside the 'p', Will not remove the 'p' element itself. ( it basically empty it)

//Manipulating attributes.

//It will change the value;

//It will work as "checked" works in HTML. ( by default it will be checked )

//To get an value from the element. ( eleme.value  ( vanilla script ))

            // classes
//Add class.
$('.select').addClass('classNameToBeAdd classNameToBeAdd2 classNameToBeAdd5'); //multiple classes.
$('div').addClass(function(index, currentClass){
  if(currentClass === 'dummy01'){
    return 'classNameOneToBeAdded'  //Example : To add class using index or checking if the class prexisted or not.

//Remove classe.
$('.select').removeClass('classNameToBeRemoved classNameToBeRemoved2 classNameToBeRemoved4 ');

$('.select').addClass('class1').removeClasss('class3').addClass('blah blah2...') //Chaining it.

    // data

let valuesArr = [10, 20, 30, 40, 50];

$('.element').data('keyHere', "valueHere");
console.log( $('.element').data('keyHere') );

$('.output').data('dataSet1', valuesArr);
$('.output').data('ds2', "Jaskaran");

console.log( $('.output').data('dataSet1')); //It will return the whole array('valuesArr')
console.log( $('.output').data('ds2') );

console.log($(".output").data()); //It will return all the data linked to the '.output' element.

$('.output').removeData("dataName"); // How to remove the data.

<p data-sampData1='Something to be stored'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio.  


      /*  -----------------------XX ---------------------------- */

             /*      Event Handlers      */ 
$('.elemt').methodName(function(){  });



//hover(handlerIn, handerOut);
$('elem').hover( function(){console.log('code written from handlerIn')}, function(){console.log('code written from handlerOut')}) // We can use 'mouseenter' and 'mouseleave', But just another way to code.

//Adding multiple handlers on single "element" using "ON" method.
$('.elem').on("click dblclick mouseenter",function(){ 
 console.log('Active : ')

               //Delegated events, 
//In case we add some dynamic elements( from js/external src). Events handlers are not added to the Dynamic content so we need to use 'Delegated events'.
$('.parent').on( "click", "p"  ,function(){
});//In this case we have added 'p' tag from JS, So in order to access/select, We need to use such syntax.

    <li data-item1='Item One Data Here...'>Write your own destiny</li>
    <li data-item2="item Two Data here">Fate is what choices you make</li>
       //{item1: "Item One Data Here..."}

       //Item One Data Here

//KeyDown && keyup


//Focus, Change and blur
 $(this).css('box-shadow',"2px 2px 14px grey");

 $(this).css('box-shadow',"2px 2px 14px grey");

 $(this).css('box-shadow',"2px 2px 14px grey");
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter