/* Effect Animations */
//Methods :fadeOut, fadeIn, fadeTo, fadeToggle
$('elem').fadeOut(1000);
//fadeOut adds property 'display: none'
$('elem').fadeIn(1000)
$('elem').fadeTo(1000, 0.5);
// 0.5 will be the opacity.
$('elem').fadeToggle();
//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
$('elem').hide();
// It will add prop "Display : none".
$('elem').hide(2000);
$('elem').show();
// It will add prop 'display : block'.
$('elem').show(2000);
$('elem').toggle();
//It will switch between none/block.
// Methods slideUp, slideDown, slideToggle
$('elem').slideUp();
$('elem').slideUp(2000);
//There will be cool animation, And it will add 'display:none'.
$('elem').slideUp();
$('elem').slideDown(3000);
// It will reverse the slideUp or it will pop up the element by adding prop 'display:block'.
$('elem').slideToggle(2000);
//It will switch between slideUp/slideDown.
//Animate ( Values have to be numerical )
$('div.blue-box').animate({
'margin-left' : '20px',
'margin-top':'18px'
}, 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
$('div.blue-box').animate({
'margin-left' : '+=20px',
'margin-top':'-=18px',
'opacity' : '0'
}, 1000 )
//We can also do camel casing in properties.
$('div.blue-box').animate({
'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 )
$('p').delay(2000).slideToggle();
$('.box').delay(2000).fadeOut(1000,0.5).fadeOut().fadeIn();
//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 , ()=>{
$('.blue-box').hide();
})
})
/* -----------------------XX ---------------------------- */
/* Selectors. */
$('.elem:first');
$('.elem:last');
$('.elem:even');
$('.elem:odd');
$('input:text,input:email');
$('input:checked');
$('input:selected');
$('body').children().not('.one').css('border' , '2px solid red');
$('.parent').children().not('.one').css("border","30px solid blue");
$('div.content').find('h1').css('text-align','center');
//or
$('ul').find('li').slideUp(2000);
//or
$('ul').children('li.spec').slideUp(2000); //Direct children 'li.spec' of 'ul'
//or
$('ul').find('li.spec').slideUp(2000);
$('ul').parent('body').css('color','red');
$('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 */
//Adding
$('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'));
$('div.one').after("<div class='box bg-info m -4'> after </div>");
$('div.one').before("<div class='box bg-secondary m -4'> before </div>")
$('div.one').before(()=>{
return "<div class='box bg-secondary m -4'> before </div>";
})
//We can do like this for all the above mentioned methods.
//replacing
$('li:even').replaceWith('<li> All the Even li will be replaced </li>');
$('li:even').replaceWith(()=>{
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
$('li').remove();
$('p').empty(); //Will only remove the content inside the 'p', Will not remove the 'p' element itself. ( it basically empty it)
//Manipulating attributes.
$('a').attr('href');
$('img').attr('src');
$('div').attr('height');
//It will change the value;
$('a').attr('href','https://www.youtube.ca/');
//It will work as "checked" works in HTML. ( by default it will be checked )
$('input:checkbox').prop('checked');
//To get an value from the element. ( eleme.value ( vanilla script ))
$('eleme').val();
// classes
//Add class.
$('.select').addClass('classNameToBeAdd');
$('.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');
$('.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.
</p>
<script>
$('p').data();
//or
$('p').data('sampData1');
</script>
-----------------------------------------
//content
.text();
.html();
/* -----------------------XX ---------------------------- */
/* Event Handlers */
//Syntax
$('.elemt').methodName(function(){ });
$('eleme').click();
$('eleme').dblclick();
$('eleme').mouseenter();
$('eleme').mouseleave();
//hover(handlerIn, handerOut);
$('.elem').hover();
$('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(){
$(this).slideUp();
});//In this case we have added 'p' tag from JS, So in order to access/select, We need to use such syntax.
//Data
<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>
console.log($('li:first').data());
//{item1: "Item One Data Here..."}
console.log($('li:first').data('item1'));
//Item One Data Here
//KeyDown && keyup
$('elem').keydown(()=>{});
$('elem').keyup(()=>{});
$('elem').keydown((e)=>{console.log(e.which)});
//Focus, Change and blur
$('input').focus(function(){
$(this).css('box-shadow',"2px 2px 14px grey");
});
$('input').change(function(){
$(this).css('box-shadow',"2px 2px 14px grey");
})
$('input').blur(function(){
$(this).css('box-shadow',"2px 2px 14px grey");
})