Have you all noticed how crazy working with javascript can get sometimes.. Well the same thing happened to me..Recently while working on a web page, I had to deal with Jquery and Javascript.Lookng back in the code for the same , it felt like a nightmare.luckily my collegue helped me as it was completely new to me.
The most fun part being a Developer is to keep learning along the way. Everyday is like a first day for us. Everyday a new beginning . So as usual I took out my contact lenses and wore my glasses on as I begin to dig into google .. J
First I went on w3schools.com.. That website really rocks if you are a beginner . So having checked some things out there let me give a short summary about what I learn of Jquery
Jquery is a Javascript Library which helps create amazing interactive website, where one has t o write less code and accomplish great results.
Lets get into a small code snippet and let me explain each line here
Consider a HTML Page as follows
<html>
<head>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Welcome to pritianddevelopmentblogs.com</h2>
<p>Keep Learning buddy .</p>
<button>Click me</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Welcome to pritianddevelopmentblogs.com</h2>
<p>Keep Learning buddy .</p>
<button>Click me</button>
</body>
</html>
Step 1. Make sure you grab the latest Jquery from
www.jquery.com.. The download link is http://docs.jquery.com/Downloading_jQuery#Download_jQuery
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).
Include the jquery in your page as <script type="text/javascript" src="jquery.js"></script>
Step 2. Document.ready function
This part is really important while working on jquery. The purpose for this part of snippet make sures that the script will only be in action once the page or document is totally loaded and ready for manipulation.
$(document).ready(function(){
// all functions comes here
});
Here $ sign indicates Jquery.. so instead of writing jquery(document).ready,one can ignore writing jquery and instead use a dollar symbol
Step3. Functions
$("p").hide();
Here p stand for the paragraph html element .This line of code basically hides all <p> elements in the html document.
So you see the basic syntax will be
$(selector).action()—so jquery selects the element and performs an action on the same.
Few examples
Consider
$("#current").hide()—Here current is an ID of a html element
$(".past").hide()---Here past is class of an Html element
$(this).hide()---means the current HTML Element
$("p.intro")--- selects all <p> elements with class="intro".
$("p#demo")----selects all <p> elements with id="demo".
These were some of the examples which can get one started, but there is more to it ..So have fun digging J
No comments:
Post a Comment