I’m writing this article just to give a little boost for who are interested in web development. Basically most of us have the knowledge on HTML, JavaScript and CSS. No bothers for others, it is easy to learn those.
HTML- A markup language to describe web documents using
markup tags to describe different document contents.
CSS- Defines how HTML elements are displayed adding styles.
JavaScript- An Object
Oriented programming language adds client side behavior to the HTML page.
What is jQuery?
jQuery is a JavaScript library. Simply calling a method will
deduct many lines of codes.
It has following features:
1) HTML/DOM manipulation2) CSS manipulation
3) HTML event methods
4) Effects and animations
5) AJAX
6) Utilities
Some other JavaScript libraries are Angular.js , Ember , React , Ace , Reveal.js , Three.js
But the best thing about jQuery is it works for almost all
the browsers and also many big web companies use jQuery, such as Google,
Microsoft, IBM, Netflix.
Let’s start..
So I hope now you are with a little idea about this jQuery.
Let’s give it a simple start,
First download a copy of jQuery from Download jQuery. Never mind if it is
which version. Rename the jQuery file to jquery.js(Not
recommended.Just use your jQuery file name instead of jquery.js in next steps) and place it in where your html file is(if
not you have to set the path) .
Next link the jQuery file. No doubt now you know where we
should do this. It is inside script tags.
<script src="jquery.js"></script>
Where should we place the script tag?
The old approach is to put it before the </body> tag. Because scripts block parallel downloads, while a script is downloading browser won’t start any other downloads. But this also affects for the performance with large scripts and stylesheets. Today browsers support async and defer attributes inside script tags. They tell the browser parsing the document is safe and do not block the browser. So can be placed inside the head tag.
<script src="jquery.js" async></script> or <script src="jquery.js" defer></script>
Basic syntax is: $(selector).action()
Mostly the jQuery methods are inside a document ready event.
Both these implies the same action.
<script>
$(document).ready(function(){
// jQuery methods go here...
});
</script>
<script>
$(function(){
// jQuery methods go here...
});
</script>
This is a simple complete example to understand the functionality of jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divID").html("This is Hello World by JQuery");
$('#changeStyle').click(function (){
$('#changeStyle').css({
'padding':'7px',
'background-color':'darkcyan',
'font-size':'18px',
'color':'white',
'border-radius':'10px'
})
})
$("#alertBtn").click(function (){
alert('Hello jQuery');
})
});
</script>
</head>
<body>
This is Hello World by HTML
<div id="divID">
</div><br>
<input type="button" id="changeStyle" value="Click to Change"><br>
<input type="button" id="alertBtn" value="Alert">
</body>
</html>
A
class selector is a name preceded by a full stop (“.”) and an ID selector is a name
preceded by a hash character (“#”).
Hope
you enjoyed this article. I have provided some links below to follow by jQuery
beginners. Find more, add colors to your
web page!
Chathurika Senani
CIS
2012/2013
LinkedIn
Great work.. :D
ReplyDeleteThanks :)
Delete