Buddy's Blog | Art, design, code, and business

Feb/08

27

jQuery for Designers – Part 1

This short series of tutorials will focus on learning jQuery – a lightweight but powerful JavaScript framework. This series jQuery for Designers mainly targeted for graphic designers, web designers, interface/GUI designers and front-end developers.

What is jQuery?

jQuery is a very powerful framework that allows designers and developers to create cross-platform/cross-browser animations, effects, DOM Traversing/Manipulation, event handling, CSS Manipulation, and the of course AJAX. The beautiful think about jQuery is you write less code and have more fun writing JavaScript. This results in a shorter learning curve, smaller manageable code, and cross-browser compatibility. jQuery 1.2.3 is the current version as of this writing and supports the following modern browsers, Internet Explorer 6.0+, Firefox 2+, Safari 2.0+ and Opera 9.0+. jQuery has work also work for me and may work in other browsers but not officially supported.

What are the Perquisites Before Learning jQuery

You must have basic understanding of HTML/XHTML, CSS and some basic JavaScript programming knowledge (variables, arrays, and functions). W3schools.com is a great reference for learning the basics of web programming.

Lets start coding! The following examples are stripped down HTML that does not pass for XHTML. In real life you should write code the validates as XHTML. This are demonstrations and are more focus on learning jQuery.

Copy and Paste the code below into your favorite text editor (not MS Word) and save as jquery_ex1.html. Now open jquery_ex1.html in your favorite jQuery supported web browser.

[code lang="javascript"]



	











[/code]

Great, I we can say “hello world” in jQuery. And your saying to yourself, “Buddy, I could have done this in plain JavaScript instead”. Your right but my point for this exercise is simply to give you a starting point.

[code lang="javascript"]

[/code]

This line loads the jQuery framework into your web browsers running-time. NOTE: I’d recommend downloading the latest jquery.js file and hosting it on your own server. In these examples and for simplicity, I’m linking directly to the file hosted on jQuery’s project site.

[code lang="javascript"]
$(document).ready(function(){
   //your code
});
[/code]

The above code is calling an Object call $ (dollar sign). This Object $ is the main jQuery Object or what I call the “do everything for me” Object (almost everything anyway). Next bit of the code is $(document).ready(function(){ //your code });; this tells jQuery to find the document Object and and preform the code in between the {} brackets when the pages DOM is loaded and ready.

The ready() function is used a lot in jQuery because if you run your code before the DOM is fully loaded it will fail. One thing that might be straight at first, I know it was from me, is chain programming. Below code is an example of chained code block:

[code lang="javascript"]






	

Some text

More text

Some other text

[/code]

Read the comments in the code. This example basically searches for a p tags with “myclass” class name and attaches a event listener for when a user clicks it. Than applies a css border with the css() function and append a string of HTML at the end of the text within the p that was clicked. Since the click() function targets the p.myclass already we used the this keyword to tell jQuery we want to select the click DOM element.

Try it out! Open the sample 2 above in your browser and click on each paragraph and see what happens.

These are some of the basics of jQuery’s power. Part 2 of this series will touch on jQuery’s built-in animation and effects functions.

If you want to experiment with jQuery on your own go to jQuery.com’s website and poke around the Docmentation section.

Share and Enjoy:
  • email
  • Add to favorites
  • Digg
  • del.icio.us
  • LinkedIn
  • Google Bookmarks
  • Yahoo! Bookmarks
  • Facebook
  • MySpace
  • Live
  • Twitter
  • Technorati
  • StumbleUpon

RSS Feed

No comments yet.

Leave a comment!

You must be logged in to post a comment.

<<

>>


Warning: is_executable() [function.is-executable]: open_basedir restriction in effect. File(/usr/local/bin/curl) is not within the allowed path(s): (/home/btoupsjr:/usr/lib/php:/usr/local/lib/php:/tmp) in /home/btoupsjr/public_html/wp-includes/class-snoopy.php on line 208