Writing code can become repetitive, it can also create bugs and insecurities in your system. A library is a ready-made collection of code created by experts that makes it simpler to write excellent code very quickly.
jQuery is a popular JavaScript library and is the inspiration if not the source of lots of interactivity that you see on the web, in particular where items are hidden and displayed either at the click of a button or in real-time.
One of the main advantages of using jQuery is the easy separation that it allows between code and content. This means there is less risk of confusion and that others can interpret your code more easily. This is because with jQuery we can dispose with "onclick", "onsubmit", "onchange" and the writing, and calling, of functions from inside HTML element tags.
And yes, the dollar sign is a required part of the jQuery way of identifying HTML elements.
This isn't a very well constructed piece of HTML, because I've got one paragraph inside a div and the other outside, but it is useful for this example.
Now I'm going to put in the jQuery at the bottom of the page:
There's one final thing that is necessary to make this work, we need to start with the second paragraph hidden, and we need a little bit of CSS to make this happen, so let's add this now:
Did you spot it? You'll find it where it belongs between the <style></style> tags in the head of the document. You are now ready to cut and paste the entire code into an HTML file (e.g. index.html).
First the id, class or element is identified, then the action is identified (in this instance a click), and inside the parentheses that follow the click we place a function (i.e. what we want to happen - see brief overview of JavaScript).
Inside the curly braces of the function we identify using jQuery the class, id or element that we want to change in some way and tell the script what we want it to do with this thing (in this case show and hide all elements with the class named "myclass").
I recommend you now try it out and work through the logic of what is being hidden and shown.
jQuery is a popular JavaScript library and is the inspiration if not the source of lots of interactivity that you see on the web, in particular where items are hidden and displayed either at the click of a button or in real-time.
One of the main advantages of using jQuery is the easy separation that it allows between code and content. This means there is less risk of confusion and that others can interpret your code more easily. This is because with jQuery we can dispose with "onclick", "onsubmit", "onchange" and the writing, and calling, of functions from inside HTML element tags.
First step
Our first step is to wire our page up to the jQuery code. For now we'll not download the library itself but assume that you are online when you are trying this out.
We wire up our code in the head section of our HTML document in a similar way to external CSS and like any other piece of external JavaScript, using the following between the document's <head></head> tags:
We wire up our code in the head section of our HTML document in a similar way to external CSS and like any other piece of external JavaScript, using the following between the document's <head></head> tags:
<script src="http://code.jquery.com/jquery-latest.js"></script>
Structuring our document
One of the main things we'll need to do in order to make use of jQuery is to use id and class identifications in the HTML, as discussed in the brief overview of CSS.
Similar to CSS, jQuery uses the hash and the dot to identify id and class respectively, while a standard HTML element such as a div, h1, p, etc. is identified by its name alone.
An HTML element is identified like this:
$('p')
An id like this:
$('#anyid')
A class like this:
$('.anyclass')
And yes, the dollar sign is a required part of the jQuery way of identifying HTML elements.
Time for a working example
So let's create a document to make use of this stuff:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="show">Show</button>
<button id="hide">Hide</button>
<p class="myclass">Here is a little bit of information.</p>
<div class="myclass"><p>Here is a lot of information that might confuse some people but that others will need easy access to.</p></div>
</body>
</html>
<html>
<head>
<style>
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="show">Show</button>
<button id="hide">Hide</button>
<p class="myclass">Here is a little bit of information.</p>
<div class="myclass"><p>Here is a lot of information that might confuse some people but that others will need easy access to.</p></div>
</body>
</html>
This isn't a very well constructed piece of HTML, because I've got one paragraph inside a div and the other outside, but it is useful for this example.
Now I'm going to put in the jQuery at the bottom of the page:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="show">Show</button>
<button id="hide">Hide</button>
<p class="myclass">Here is a little bit of information.</p>
<div class="myclass"><p>Here is a lot of information that might confuse some people but that others will need easy access to.</p></div>
<script>
$("#show").click(function () {
$(".myclass").show("slow");
});
$("#hide").click(function () {
$(".myclass").hide("fast");
});
</script>
</body>
</html>
<html>
<head>
<style>
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="show">Show</button>
<button id="hide">Hide</button>
<p class="myclass">Here is a little bit of information.</p>
<div class="myclass"><p>Here is a lot of information that might confuse some people but that others will need easy access to.</p></div>
<script>
$("#show").click(function () {
$(".myclass").show("slow");
});
$("#hide").click(function () {
$(".myclass").hide("fast");
});
</script>
</body>
</html>
There's one final thing that is necessary to make this work, we need to start with the second paragraph hidden, and we need a little bit of CSS to make this happen, so let's add this now:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display:none;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="show">Show</button>
<button id="hide">Hide</button>
<p class="myclass">Here is a little bit of information.</p>
<div class="myclass"><p>Here is a lot of information that might confuse some people but that others will need easy access to.</p></div>
<script>
$("#show").click(function () {
$(".myclass").show("slow");
});
$("#hide").click(function () {
$(".myclass").hide("fast");
});
</script>
</body>
</html>
<html>
<head>
<style>
div {
display:none;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="show">Show</button>
<button id="hide">Hide</button>
<p class="myclass">Here is a little bit of information.</p>
<div class="myclass"><p>Here is a lot of information that might confuse some people but that others will need easy access to.</p></div>
<script>
$("#show").click(function () {
$(".myclass").show("slow");
});
$("#hide").click(function () {
$(".myclass").hide("fast");
});
</script>
</body>
</html>
Did you spot it? You'll find it where it belongs between the <style></style> tags in the head of the document. You are now ready to cut and paste the entire code into an HTML file (e.g. index.html).
What on earth's going on here then?
jQuery has its own language, so instead of onclick it uses click, in addition to which it has special abilities like show and hide. The rest is as I explained above identifying the id, class and HTML elements.
First the id, class or element is identified, then the action is identified (in this instance a click), and inside the parentheses that follow the click we place a function (i.e. what we want to happen - see brief overview of JavaScript).
Inside the curly braces of the function we identify using jQuery the class, id or element that we want to change in some way and tell the script what we want it to do with this thing (in this case show and hide all elements with the class named "myclass").
I recommend you now try it out and work through the logic of what is being hidden and shown.
What else should I know?
First, you can mix and match JavaScript and jQuery as much as you like, second you'll find the documentation for jQuery here, and third it is unfortunately the case that jQuery doesn't work particularly well with mobile devices. However, there is a version of jQuery for mobile, which can be found here.
Comments
Post a Comment