Scribd
Upload
14 views

Jquery Tutorials: Listening To User (Event Handling)

This document provides an overview of jQuery tutorials, including: 1) Using jQuery to select an element by ID and slide it up over 5 seconds. 2) Loading jQuery code only after the full page loads using $(document).ready. 3) Additional jQuery functions for hiding, showing, sliding, fading, and delaying elements. 4) Attaching click and mouseover handlers to toggle or hide elements. 5) Using classes and data attributes for multiple similar elements instead of duplicate IDs.

Uploaded by

Manish Bhattarai
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

Jquery Tutorials: Listening To User (Event Handling)

This document provides an overview of jQuery tutorials, including: 1) Using jQuery to select an element by ID and slide it up over 5 seconds. 2) Loading jQuery code only after the full page loads using $(document).ready. 3) Additional jQuery functions for hiding, showing, sliding, fading, and delaying elements. 4) Attaching click and mouseover handlers to toggle or hide elements. 5) Using classes and data attributes for multiple similar elements instead of duplicate IDs.

Uploaded by

Manish Bhattarai
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like