Solution for Exercises on JQuery

  1. On click of a button, welcome message should display.
  2. There are three input textboxes. On click of the input box , the background colour should change to yellow. ( Hint : use this )
  3. Remove and add different style to the element by using JQuery. Create two style properties and by default apply first one to one element. On click of a button change the elements associated property to other style.
  4. Toggle the style properties of the element on click
  5. Create one button and a textbox. On click of the button the text written in text box should display on the button.
Solution:

Code is here
<button type='button'  id=my_b>Click Me</button>
<span id=display1></span>
Jquery
<script>
$(document).ready(function() {

$("#my_b").click(function(){
$("#display1").html('Welcome to plus2net.com');
})

})
</script>
2. There are three input textboxes. On click of the input box , the background colour should change to yellow. ( Hint : use this )

HTML
<input type='text' class='t_input' id='t2'> 
<input type='text' class='t_input' id='t4'>
<input type='text' class='t_input' id='t4'>
JQuery
<script>
$(document).ready(function() {

$(".t_input").click(function(){
$(this).css("background-color", "yellow");
})

})
</script>
3. Remove and add different style to the element by using JQuery. Create two style properties and by default apply first one to one element. On click of a button change the elements associated property to other style.

This is with class=my_p, click here to change color



Keep the style inside head tag of the page
<style>
.my_p{
	background-color:yellow;
}
.my_p2{
	background-color:aqua;
}
</style>
HTML
<p class=my_p>This is with class=my_p, click here to change color</p>
JQuery
<script>
$(document).ready(function() {

$(".my_p").click(function(){
$('.my_p').removeClass('my_p').addClass('my_p2');
})

})
</script>
Toggle the style properties of the element on click

This is with id=display7, click here to change color

HTML
<p  id=display7>This is with id=display7, click here to change color</p>
JQuery
<script>
$(document).ready(function() {

$('#display7').addClass('my_p')

$("#display7").click(function(){
var presentClassName = $('#display7').attr('class');	

if(presentClassName=='my_p'){
	newClassName='my_p2'
}else{
	newClassName='my_p'
}

$('#display7').removeClass(presentClassName).addClass(newClassName);
})

})
</script>
Create one button and a textbox. On click of the button the text written in text box should display on the button.
How to read textbox value ?
HTML
<input type=text name=t1 id=t1>  
<button type='button'  id=my_b6>Click Me</button>
JQuery
<script>
$(document).ready(function() {

$("#my_b6").click(function(){
var my_str=$('#t1').val();
$('#my_b6').html(my_str);
})

})
</script>
You can keep some default value for the variable my_str if noting is entered in the textbox.


plus2net.com



Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element


JQuery Video Tutorials




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer