Author : Prakash Pradeep Gopu
In this post am going to explain about How to hide the paragraph text using Jquery when a button is clicked :
After clicking the button all the paragraph text will be hidden.
In this post am going to explain about How to hide the paragraph text using Jquery when a button is clicked :
jQuery is a JavaScript Library. jQuery is a lightweight "write less, do more" JavaScript library. The jQuery library contains the following features:
- HTML element manipulation
- CSS manipulation
- HTML event functions
- JavaScript Effects and animations
jQuery Syntax
Basic syntax is: $(selector).action()
- A dollar sign to define jQuery
- A (selector) to "query (or find)" HTML elements
- A jQuery action() to be performed on the element(s)
Examples:
· $(this).hide() - hides current element
· $("p").hide() - hides all paragraphs
· $("p.test").hide() - hides all paragraphs with class="test"
$("#test").hide() - hides the element with id="test"The Document Ready Function
$(document).ready(function(){ // jQuery functions go here...});
Document.ready() is to prevent any jQuery code from running before the document is finished loading (is ready)
The following code will demonstrate the hiding the button when we click the button (Just simply copy and paste the this code in the Aspx page):
<html>
<head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Prakash</h2>
<p>Pradeep</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
If your using VS 2010 Then you will get the Jquery files automatically in Script folder and just drag and drop in your page
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
If your using the before versions of VS use the following link and down load the Jquery files: jquery.com
$("button").click(function () – Jquery fires when the element button is clicked .
$("p").hide(); --- all paragraph test we are hiding.
Output :
when the page loads the following output it will give :
After clicking the button all the paragraph text will be hidden.
No comments:
Post a Comment