Today I am going to write about JQUERY. I recently used Jquery while editing a wordpress plugin. I never used Jquery before. So, those who are total beginner of Jquery might find this helpful.
The output of this will be
The output of this is
There are lots of other events and actions that you can use. I hope I will get on to that on a later post.
This will be all for now. I will explain more of Jquery on a later day. I hope this will help those who has started the journey of Jquery. You should also look at the Jquery API Documentation. You can also look at the Jquery tutorial from W3schools.com
What is JQUERY
Jquery is a javascript library. It's pretty easy to use and you can do a lot of things with simple command.
To use Jquery, you need to download Jquery library and include it in the page with that you want to wish. In the time of this writing, Jquery 1.8 has been released. You can download it from JQUERY WEBSITE. After downloading save it to a text file with .js extension.
To use Jquery, you need to download Jquery library and include it in the page with that you want to wish. In the time of this writing, Jquery 1.8 has been released. You can download it from JQUERY WEBSITE. After downloading save it to a text file with .js extension.
Basic Syntax
The basic format of writing jquery is $(selector).action() . The selector is used to select HTML element and action is the your preferred action that you want to perform on that element. You can access any HTML element with selector.
Using Selector
- To select HTML tags, you use it like $("HTML TAG").action
For selecting all <p> elements, you need to use $("p").action()
For selecting all <a> elements, you need to use $("a").action()
- To select class elements, you need to use $(".CLASS_NAME").action() and to select id elements, you need to use $("#ID_NAME").action()
For selection all element with <div class="class1">, the selector is $(".class1").action()
For selecting all element with <div id="id1">, the selector is $("#id1").action()
- Now let's say, you want to select all the <p class="class1">, but not those <p> which does not have that class attribute. In this case the format is
$("p.class1").action()
This will be same for id element, except that you have to use "#" instead of "."
Details About Action and Event
Jquery action is something that you want to perform on your selected element. You might need to hide or show a certain element. You need to specify the action you want to perform. Before going details about action, you need to understand what is an event. An event is something that happens to an element. Like, users click a button, or taking the mouse over an element. You can trigger an action whenever an event occurs.
$(document).ready( function() { });
You will always see that jquery code is inside this document ready function. It helps to ensure that no jquery function acts before the page is finished loading.
Examples
Now that you have seen the basic of jquery, it's best to try some examples. I can never understand something completely without seeing some example and doing it myself.
- The first example is the simplest. We will hide/show an <p> element when an button click occurs. Let's say our webpage consists of following code
<html>
<head>
<title>Hide/Show element</title>
<script src="jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('button.hide_the_text').click(function() {
$('#the_text').hide();
});
$('button.show_the_text').click(function() {
$('#the_text').show();
});
});
</script>
</head>
<body>
<div id="the_text">This is the text that you want to hide or show</div>
<button class="hide_the_text">Hide the text</button>
<button class="show_the_text">Show the text</button>
</body>
</html>
The output of this will be
This is the text that you want to hide or show
Here, when you click any of the button, a click event occurs and the function inside that event functions. In this case, either hide or show will work which are the action that will take place. Try this example yourself. It is pretty much self explanatory.
- The second example is how to remove an element. To remove an element you can use .remove() action. Let's see how it works.
<html>
<head>
<title>Remove Element</title>
<script src="jquery.js" type="text/javascript">
</script>
</head>
<body>
On click <a href="" class="anchr_text">This link</a>will be removed.
<button class="rmv_anchr">Remove link</button>
<script type="text/javascript">
$(document).ready(function() {
$('button.rmv_anchr').click(function() {
$('a.anchr_text').remove();
});
});
</script>
</body>
The output of this is
On click This link will be removed.
There are lots of other events and actions that you can use. I hope I will get on to that on a later post.
This will be all for now. I will explain more of Jquery on a later day. I hope this will help those who has started the journey of Jquery. You should also look at the Jquery API Documentation. You can also look at the Jquery tutorial from W3schools.com
