Blog on hold: This blog is currently on hold. Please visit blog.keranmckenzie.com for new blog posts
Post Pic

Some jQuery basics

I’ve been playing more and more with jQuery and remember some of the early things that tripped me up, so I thought I’d share a few simple jQuery things with you.

jQuery and WordPress

One of the things you’ll find is that most jQuery tutorials, code snippets and examples online use the $ shortcut for talking to jQuery.

For example:
$('#someElement').css('display', 'none');

This is great most of the time, however when it comes to WordPress, it will fail. WordPress uses the $ reference for something else (I forget what, it’s not important). So you need to change the scripts.

The way I’ve found it’s simplest is to just reference jQuery itself:
jQuery('#someElement').css('display', 'none');

In fact I now pretty much do that everywhere I use jQuery now.

Another way to do this touches on my old post of resolving jQuery Conflicts and that is to set up your own reference variable & include the noConflict flag for jQuery.

<script>
var $j = jQuery.noConflict();

// now just use $j
$j('#someElement').css('display', 'none');
</script>

Use .bind()

There are a heap of really great short cuts built straight into jQuery that enable you to do some things really fast. For example the .css() function or the .submit() function that gets triggered on event.

The thing is though that many of these are simply wrappers for parent classes. Apparently it’s actually faster for your jQuery if you simply use the parent class. Now I’m by no means a stickler for this, but I have found it really helpful for something, especially as you start to think about how things work.

For me “binding” a function to a form submit event makes more sense that just using .submit() – even though they are basically identical.

Example:

jQuery('#formID').bind('submit', function() {
// code to run on form submission
alert('form submitted');
}

Stop the default action

Of course when you submit a form the browser takes over and expects to do something – like a page reload. Usually you don’t want that. Now MOST tutorials I’ve seen will simply say, tell your code to return false; – this should really only be done if you are using jQuery to pre-process something and if the form is valid continue (thereby return true) or to STOP (thereby return false).

However if you are NOT wanting the form to submit normally, lets say you are making an ajax call, then you want to prevent the default action from happening. Thankfully jQuery has a preventDefault() function. You simply pass into your function the event (basically itself) and … well, lets just look at the example below

Example:

jQuery('#formID').bind('submit', function(event) {
// prevent the form from submitting
event.preventDefault();

// code to run on form submission
alert('form submitted');
}

You can do this with all sorts of things – stop an ‘a’ tag from linking as expected, stop forms from submitting etc

Changing CSS elements

One thing I struggled with a little was changing a style on an element. With jQuery there a number of ways of doing things. Some of the predefined functions like .show() or .hide() simply change the CSS of the display attribute (from inline-block to none).

The first thing you’ll probably try is .css() – this is a great function for working with CSS. It can either tell you about the css attribute, or it can set an attribue.

// set textColor variable with the color attribute of the p class
var textColor = jQuery( 'p' ).css( 'color' );

Or if you want to see the colour to ‘red’ then you could do this:

// set colour of paragraph to red for an error
jQuery( 'p' ).css( 'color', 'red' );

This is really quick and handy if you have just ONE attribute to change (technically you can change multiple attributes this way but …)

The other way to modify css is to add or remove css classes that already exist in your stylesheet. This to me seems a much better way to do things as it helps keep style (display) and logic (code) separate.

Lets assume we have a class called ‘error’ in our css that defines font-family, border, colours etc, we want to apply this class to an element.

// apply the class 'error' to an element
jQuery( '#anElement' ).addClass( 'error' );

And once the user has fixed the error we can easily remove the class again, restoring the element to it’s original state:

// remove the class 'error' to an element
jQuery( '#anElement' ).removeClass( 'error' );

Summary

There is so much to really sink your teeth into with jQuery (and javascript) – I’m so glad I’ve finally been able to get my head around some of this stuff & I hope that this quick post might help you too.

Support Studiowhiz.com

2 Responses

[...] This post was mentioned on Twitter by CenterNetworks and william mcbee, Keran McKenzie. Keran McKenzie said: A quick post called "Some jQuery basics" http://bit.ly/acky8w – please RT [...]

11.06.10

nice one