Filed under: Tutorials, Websites | Tags: 1.4, actions, add, automatic, basics, Cascading Style Sheets, class, css, delay, do, dynamics, fade, forms, Fred101597, functions, hide, html, java, javascript, jQuery, Languages, less, library, more, programming, relaod, showing, sliding, stylesheets, submitting, write
jQuery Basics
Since jQuery 1.4 has just been released I thought i might be a good time to go through some basic jQuery functions and how they can easily be used to enhance a website, keeps users entertained and cut pages. The jQuery library is simple just a large chunk of code that allows you to quickly and simply write JavaScript and AJAX functions.
This makes it a very useful tool as a developer making long and laborious tasks such as writing AJAX functions into code as short as a line. It can also be used with PHP and other server-side scripts to make truly interactive sites that allow you to send forms without reloading, add dynamics to your site and change the style of an object in a flash. For this tutorial you will need a basic understanding of HTML and how to find objects with ids and classes.
To run jQuery you need to connect to the jQuery library at the start of each page. This is simply done by downloading the jQuery library and incorporating it like any other JS script you might run on your site.
Download the jQuery library here.
You can include the library simply by editing the code below.
<script type="text/javascript" src="loaction of your jQuery libary"></script> </script>
When you start your jQuery function you will need to start by telling the browser that it is a jQuery function so the first bit of code you will need is
$(function() {
Or
$(document).ready(function() {
Depending on whether you want it to work immediately or when the document is ready. You will then have to close it with.
});
This will close off both the open brackets (this need to go at the end of your code so all your jQuery functions will go in-between this). Right thats all the boring bit, well least interesting bit done now you can get on with the interesting bit making things happen.
Starting an action, as simple as pressing a button
Nice and simple just edit the code below and you away.
$("id or class of the button.").click(function () {
Whatever you want to happen
});
You can alternatively change .click to other functions such as, you should recognize some of these if you’ve used JavaScript before.
– .focus – Useful for fields, the action is performs when an there is a selected item.
– .blur – Performs the opposite of .focus.
– .hover – Runs when you hover over an item.
Hiding objects
To hide objects there is a nice short bit of code (Same as the rest of jQuery really short and simple). So you just need to edit this bit of code.
$("id/class of object").hide();
Alternatively you can replace .hide with .fadeOut which will well, fade out!
Showing object
Sliding objects
Similar to showing and hiding but with a bit more pizzazz. Again you are changing .hide but now it will not just emerge it will flow down. You will need to change .hide to .slideDown, .slideup or .slideToggle depending on how you want you site to work again for .slideDown you will need to hide the object.
Adding some style (such an overused pun)
You may have noticed some similarity between these, well CSS and styles are no different. With jQuery you can either add a new CSS attribute or apply a new style to items. Both of these are simple but I suppose adding a new attribute is possible more complicated. So to attach a new style to an object it’s another case of changing the code above. This time you will need .addClass.
$("id/class of object").addClass('your class');
To add a new attribute you will need .css
$("id/class of object").css("attribute","value");
Confused well let me give you an example.
$("id/class of object").css("height","180px");
There you go.
Submitting forms
Right so we will now move on to something a tad more complicated. This is one of the more practical sides of jQuery, do you get irritated when you have to refresh the page after submitting a form. No, well anyway its a nice thing to sort out, you can also add all kinds of thing to submitting a form such as loading bars, success messages and much more so it is also a useful thing to do. To do this you will need to have the code that usually deals with the form submission in a separate document, for instance submit.php
$.post("URL of PHP submit.php", {
post variable name: $("Id/class of the field").val()
}, function(data) {
});
I said it was a little more complicated. To carry out this you will just need to change the post variable name, the id of the object with the data and where you keep external PHP or other script. You can also change .post to .get if you need a get form. As well as that you can run functions to do with the outcome of your submission (if you don’t need this just remove }, function(data) { from the code). After }, function(data) { you can use the results to do any thing you want, for instance places the returned data in a .
Changing the filling.
If you want to change what is inside an item you can do it by using the function .html. I will now show this with the span tags below.
<span id="output"></span>
If you wanted to put the correct term ‘macs are best’ between these two span tags you would use
$("#output").html("Macs are best");
This would give you
<span id="output">Macs are best</span>
Simple!
Just one more thing
If you want to run more than one of these effects on one element you can connect them into one function, this is simply achieved by writing then one after each other without finishing the script. Heres a quick demonstration.
$("#item").hide().html("Hi").delay(20).show();
You may notice that there is a function that i haven’t explained yet, thats because .delay is only really useful if you’re combining multiple function.
Conclusion
So there you go! You have now learnt some simple but useful jQuery function, if you want to learn some more there are some great resources on the internet, but i personally think one of the best is the tutorial section of the jQuery’s site which has a list of the all the functions and a page explaining what each of them do and how to use them.
I hope this helps you on your quest for jQuery mastery!
Any questions just leave a comment.
Thank you for reading
Fred101597
Leave a Comment so far
Leave a comment
The Cutting Edge Tech Blog 