September 01, 2009 01:13 pm
A few people now have asked me whether using JQuery for a JFB modification code would be a good idea; my answer to this will always be
yes however not many people do use it. Reasons vary but largely it's either because they don't know why they should use JQuery or simply don't know the language. So I thought I would write this little article-esque introduction tutorial, which I might add to with more project specific tutorials as and when I find the time.
Why should you use JQuery?After all, it's just Javascript, right? No, not really. There are many benefits to JQuery over Javascript, first and foremost it's a whole lot easier to understand and write. It's also more light-weight so loads faster and is cross browser compatible so you don't have to worry about Internet Explorer all the time! It's great for animations, meaning Flash is relegated to the "last resort" pile as it should always have been, and there is a wealth of tutorials out there (like this one) as well as great documentation, unlike traditional javascript.
As far as Jcink Forum Boards are concerned though, the main reason to use JQuery is because of its selectors. Whereas in Javascript it's a struggle to select something based on class rather than ID and even harder then to filter them down (say you only want the first element with class of "maintitle" on a page) with JQuery it's a breeze and an awful lot faster to load as a result!
Do I need to know javascript first?No, you really, really don't. All you should understand is that javascript is a client side script; it renders within the browser, normally after or whilst the HTML and CSS is rendering and it never touches the server. So you can't use JQuery (or javascript) to modify anything stored server side i.e. the PHP, MySQL, database entries etc. However anything client side - HTML, CSS, javacript itself - that can all be messed around with
An IntroductionOK so you're interested in learning JQuery, where do you start? Well this topic is good for the basics but here's a list of much better written, more detailed or just plain awesome JQuery tutorials:
JQuery Docs - the official Documentation and site, full of really great information!
Learning JQuery - a great store of tutorials with some very clever techniques (how I learned
) In particular check out
This article.
JQuery Tutorials (Official) - the official tutorials posted on the JQuery site.
Web Designer Wall - just generally worth a look, full of great tips, tricks and workshops.
If you have any more suggestions feel free to post below and I'll link them if I fell they're good enough
The Set UpFirst of all you need to install JQuery to your development environment. I would use this link:
| CODE |
| http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js |
And pop it into some <script> tags. I won't go into that level of detail, so if you don't know how to call an external .js file...well I would go look at any of the large codes for JFB
The reason for that link is simple: it's hosted by Google, it isn't going anywhere, it's the latest version (as of the time of writing) of JQuery and because of all this it may already be cached by your viewers browser (big sites like Dell and even Google themselves link to this file) so further increasing page load times
If you really want piece of mind feel free to upload the actual source file from JQuery.com and uploading it to your hosting or use IrisSC to link in JQuery that way
The BasicsNow we have our environment setup we can start coding. Anything made using JQuery is Javascript, so you need to wrap it in the correct tags. To start, let's tell the browser we're using Javascript:
| CODE |
<script type="text/javascript">
</script> |
OK well that's fine, the browser now knows that any code between those tags is Javascript and will render it accordingly. But how do we differentiate between regular vanilla Javascript and the new JQuery? Well, we use the dollar ($) symbol, like this:
| CODE |
<script type="text/javascript">
$(document).ready(function(){
});
</script> |
At this point we need to explain what that all means. The <script> tags start Javascript rendering, the $ sign informs the browser to start JQuery rendering and the rest of the line simply tells the script to only execute once the whole page has loaded fully.
But before we look at that statement in more detail, it's best to understand that JQuery will nearly always take the form of the above being broken down like this:
| QUOTE |
| $(document).ready(function(){ |
So that the
blue is always a $ sign showing the start of a line of JQuery;
the
red then tells the script what element is being manipulated. So here we're targeting the whole "document" i.e. everything in the web page made from HTML and CSS. You could just as easily target only <div> tags by using
("div"). Notice the "" quotation marks? You'll nearly always use them as they tell the script your targeting an HTML or CSS element i.e. a tag (div, td, span, a etc.) or a class/ID (.maintitle, .navbar, #submenu etc.). If you want to target a Javascript element, such as a variable or document, you don't need the "" quotation marks
;
the
green is the process you want to apply to the
red element. Here we check to see if the document is fully loaded i.e. ready, but you could give the element a class with
.addClass() or make it disappear with
.hide(). Normally, as you can see, the
green part will end with a closing bracket;
the
purple part is always contained within these brackets following the
green function because it is setting the attributes of the
green part. For example, with
.addClass() you can specify what that class is to be by doing this
.addClass("maintitle"). This will now add the class of
maintitle to whatever HTML/CSS element you have chosen
Note as well that because we're setting a CSS property (class) the attribute is wrapped in "" quotation marks
Hopefully that makes some sense. Here however the
purple attribute is simply
function(){ which allows us to build a script that will only execute when the page is loaded
Help 
Search 
Members 
Calendar 
Shop 
Reps 
Downloads 
Chakka
Test Board -> Viewing Profile
No Information
No Information
No Information
No Information
No Information
Message: Click here 
