jquery provide functionality to control behaviour of user interface
of webpage as user action(mouse click on button, mouse over,mouse out
etc.) All these effect happens on client side.
Situation
We want to hide a paragraph if user click on a button.
Solution
- First identify source who generate event(above situation mouse click)
- Secon identify target on which we want to apply this effect.
- Use jquery showhide.js for implementing this task
Syntex
$("target_name").hide()
This syntex is used when we define control name.
$("#target_id").hide()
This syntex is used when we are using control with help of id.
$("target_name").hide()
This syntex is used when we define control name.
$("#target_id").hide()
This syntex is used when we are using control with help of id.
Example using control name
we have a paragraph or span and we want to hide then we can do on button click event. To do this we need to use jquery http://www.programmingduniya.com/common/jquery/showhide.js
Detailed programme
<html>
<head>
<style>
span { background-color:green;color:white;padding:10px;font-size:15px; }
</style>
<script src="http://www.programmingduniya.com/common/jquery/showhide.js">
</script>
</head>
<body>
<button>Click me</button>
<span>If you click this button i will become invisible</span>
<script>
$(document).ready(function(){
$("button").click(function () {
$("span").hide();});
});
</script>
</body>
</html>
<head>
<style>
span { background-color:green;color:white;padding:10px;font-size:15px; }
</style>
<script src="http://www.programmingduniya.com/common/jquery/showhide.js">
</script>
</head>
<body>
<button>Click me</button>
<span>If you click this button i will become invisible</span>
<script>
$(document).ready(function(){
$("button").click(function () {
$("span").hide();});
});
</script>
</body>
</html>
No comments:
Post a Comment