jQuery itself is JavaScript library which give developer facility to select and or modify part of html page using a kind of css selector. So learning jQuery is learning to use it selector. Previously my method in learning jQuery is by writing one html file and write my jQuery code inside one script tag and inside jQuery ready method as follow:
The jQuery ready method is very useful. Since jQuery aim is to process document structure of html then we have to make sure all html document object already loaded before jQuery script processing. We have to remember JavaScript which jQuery run for is interpreter language, it is processed from top to down. jQuery ready method fulfil that requirement.
Putting my learning code inside that block is not wrong in learning process. After writing our script we can refresh the page and see the result. Later we can edit our jQuery script inside that html file, save and refresh again. But there are other way to learn faster. We can learn more effective by using Google Chrome javascript console or Firebug in Firefox (other browser also have similar tools we can just use that as well). Buy using this tool we only need to load one html file for learning and playing the jQuery script inside the console. We can try various selector and manipulate document object model (dom). We don't need to go through type, save, refresh cycle anymore. We only need to edit html if we want to add more html structure for experiment. Otherwise we only need to interact with JavaScript console.
Let's go to practice by copy paste following html script into one file:
<html>
<head>
<title>Learn jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
// jQuery script here
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">This is Intro</p>
<p>This is paragraph</p>
<p>Another Paragraph</p>
Some list:
<ul id="choose">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div>Inside some div</div>
</body>
</html>
<html>
<head>
<title>Learn jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
// jQuery script here
});
</script>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">This is Intro</p>
<p>This is paragraph</p>
<p>Another Paragraph</p>
Some list:
<ul id="choose">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div>Inside some div</div>
</body>
</html>
After saving file just open it using google chrome or firefox with firebug installed. This post will consider using google chrome only. If you are using other browser please adjust accordingly. Following is rendered page from above html script.
To open JavaScript console in Google chrome, we can go to wrench menu --> Tools --> JavaScript Console. Or we can just hit Ctrl + Shift + J. It will open following console at bottom browser:
From that console we can start play with jQuery. Just type "jQuery" to make sure jQuery setup properly. If showing like this than it already setup properly.
By the way this post assume that you have internet connection because jQuery library referenced in html is loaded from CDN on internet. If you don't have internet connection make sure you download jQuery js file and referenced accordingly in src script attribute correctly.
Let start to use id selector type
jQuery('#choose') in console. It will show the result below the script we type.
If jQuery cannot find the tree it will show empty bracket [] since selector found empty element.
Let's try to select element directly using
jQuery('li') . This will select all three elements of li tags.
Next let's play little bit with filter and start to play with manipulation. Type this inside the console jQuery('li:first').css('color','red'). This script will select first li in document and set it css property color to red. Final result can be seen below:
Ok that's all for now. We can see more complete capability of jQuery by reading its API at http://api.jquery.com . Using jQuery is the matter of getting used to know its selector. By using javascript console we can learn faster.
