Solution for Exercises on JQuery

  1. Create a div tag and it should display Welcome message (by using JQuery )
  2. Create two div tags and assign yellow as background colour to both of them by using JQuery.
  3. Display and hide message shown in the div tag on click of the buttons. You can use Jquery show hide.
  4. Display and hide message by using a single button . You can use Jquery toggle().
  5. Create a div tag and on click of a button it should display your name.
Solution:
<div id=display1></div>


<script>
$(document).ready(function() {
 $("#display1").html('Welcome to plus2net.com');
})
</script>
2. Create two div tags and assign yellow as background colour to both of them by using JQuery.

First Div with id=display2
Second Div with id=display3
<div id=display2> First Div with id=display2</div>
<div id=display3> Second Div with id=display3</div>

<script>
$(document).ready(function() {
 $("#display2,#display3").css("background-color", "yellow");
})
</script>
3.Display and hide message shown in the div tag on click of buttons. You can use Jquery show hide.
Welcome to plus2net
HTML
<button type='button'  id=my_b1>Show</button>
<button type='button'  id=my_b2>Hide</button>
<div id=display4> Welcome to plus2net </div>
JQuery
<script>
$(document).ready(function() {

$("#my_b1").click(function(){
$("#display4").show();
})

$("#my_b2").click(function(){
$("#display4").hide();
})

})
</script>
4.Display and hide message by using a single button . You can use Jquery toggle().
Welcome to plus2net
HTML
<button type='button'  id=my_b3>Show & Hide</button>  
<div id=display5> Welcome to plus2net </div>
JQuery
<script>
$(document).ready(function() {
$("#my_b3").click(function(){
 $("#display5").toggle();
})
})
</script>
5.Create a div tag and on click of a button it should display your name.
HTML
<button type='button' id=my_b6>Your Name?</button>  
<div id=display6></div>
JQuery
<script>
$(document).ready(function() {
$("#my_b6").click(function(){
$("#display6").html('plus2net.com');
})
})
</script>


Subscribe

* indicates required
Subscribe to plus2net

    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-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer