JQuery Tutorials

<script>
$(document).ready(function(){
$("#panel1").slideUp(5000);
});
</script>

-This is used to select the id called panel1 and use the jquery function to slide up in 5000msec.

$(document).ready(function(){ }):

-This function tells the browser to load the jquery only when the whole page is loaded.

-There are many function that can be used along with the id like
hide(duration),show(duration),slideup(),slidedown(),delay(),fadetoggle(),fadeIn(),fadeout().

-Applying css with the selectors

$("#panel1").css({color:'red',fontWeight: 'bold'});

-Applying HTML with the selectors

$(document).ready(function(){
$("#btn1").html('Changing the button text')//rewriting within the html
element
});
</script>

Listening to user (Event handling)

<script>
$('#btn1').on('click',function(){
$('#panel1').hide(200);
});
</script>
This is function hides the panel1 on the button #btn1 click event.

$('#btn1').on('mouseover',function(){
$('#panel1').hide(200);
});
Hiding the panel1 on the mouse over #btn1
Writing smarter Jquery
<script>
$('#btn1').on('click',function(){
$('#panel1').toggle();
});
$('#btn2').on('click',function(){
$('#panel2').toggle();
});
$('#btn3').on('click',function(){
$('#panel3').toggle();
});
$('#btn4').on('click',function(){
$('#panel4').toggle();
});

</script>
Instead of writing the codes as above

<div class="jumbotron">
<h1>Let's Have Fun!</h1>
<button class="panel-buttons" data-panelid="panel1">#btn1</button>
<button class="panel-buttons" data-panelid="panel2">#btn2</button>
<button class="panel-buttons" data-panelid="panel3">#btn3</button>
<button class="panel-buttons" data-panelid="panel4">#btn4</button>
</div>

We use class instead of the Id as the Id cannot be same and use data- for naming the panel
-Inorder to know which button is clicked use alert

$('.panel-buttons').on('click',function(){
var panelId=$(this).attr('data-panelid');
alert(panelId);
});

Similarly we can do many operation with the panel id

$('.panel-buttons').on('click',function(){
var panelId=$(this).attr('data-panelid');
$('#'+panelId).toggle();
});
DOM Traversal with jQuery