Basic Tips for Getting Started with jQuery Development
Over 50,000 professional and freelance designers and developers. Post your design project once and review up to eight proposals. Save time, save money. Over 5000 projects delivered since 2006.
|
| ||||||||
| E-commerce Database Blog Social Paypal Registration Twitter | |||||||||
| Compare: | |||||||||
The jQuery programming library has dramatically changed the way we work online. Web developers are able to prototype animations and backend effects much quicker with fewer lines of code. This brings to the table a profound collection of functions which you can read about here. It doesn’t take long to figure out jQuery syntax, especially if you are fairly well versed using JavaScript.
But if you are new to the language it shouldn’t take long to get started. I’ve added a collection of great tips below for newbie programmers. If you are interested in coding frontend web applications then I highly recommend playing around in jQuery. Even understanding the most basic terminology can push you towards a much greater understanding of DOM manipulation and effects.
Setting Up your Documents
The first thing you’ll want to do is include the most recent version of jQuery. This is a no brainer as it’ll pull the source library into all your pages. Head over to jquery.com and check what their most recent version is. You have the option of downloading the file directly and packaging it with your web app. Or alternatively Google hosts all of the jQuery versions live via their servers.
If you include an external document from Google this saves you time on each pageload. Granted it won’t be much, but there are many advantages to this technique. Now we should start by checking if the document has loaded properly. This could be done in JavaScript, but jQuery offers advanced selectors so we can achieve this much quicker. Below is some example code:
$(document).ready(function() {
//do stuff
});
The above block is using the jQuery $() selector syntax. Whatever object you place inside the parentheses becomes a focal point for all the functional code written afterwards. In this case we’re targeting our webpage document object. Inside the core function we could include any number of methods to preform directly on page load.
Creating Functionality
If you are struggling to understand how constructors are used to target elements, spend a bit of time browsing the jQuery tutorials section. Your selector is the most important part to any jQuery call, and you’ll be working with them in nearly every script.
But if we would like to create some basic functionality let’s build a small alert box upon clicking a link. This can be done in a few ways, and it really depends on your requirements. We could give the link a class or ID which can then become a target in jQuery. Remember that IDs are unique throughout any webpage and begin with a hash symbol(#) while classes can be used multiple times and are preceded with a period(.)
Below is some crude HTML and jQuery code to display our alert box. It’s worth noting that we are using two script tags altogether. The first is added within our heading to include the most recent jQuery library code. The second scripting tag will be written in the HTML to make things easier.
<body>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
alert("hey there!");
});
});
</script>
You can see I’ve added the code directly after our opening body tag. This isn’t required, as jQuery scripting is actually loaded before the full document. This is why when our code begins we’re selecting the entire document and passing the ready() function to check if it is finished loading. This structure is very basic for jQuery programming, so get used to this template.
Breaking Down the Code
This is a simple block, so we can expand fairly quickly. After our document has finished loading we call a new selector. This attaches a click event handler onto all the a links in your page. It doesn’t matter what their href value is set to, either way the code inside your function will be executed.
But if you do have links which lead externally the first bit of code prevents such behavior. Passing in a variable to your function (in this case we chose e) can store the event taken from any object. In this scenario we’re storing the click event from any hyperlink on your page. But the preventDefault() method will stop any link from loading further… very handy to save in your code snippets for later on.
Finally we call our alert() function with a small greeting. To test this out simply add a new link into your HTML document. Make sure you’ve also added the JavaScript code above and attached the latest jQuery library from Google Code APIs. Now this example is fairly practical as the code is reusable for other click events, too. Below we will delve into one more sector of programming in jQuery.
Creating Fade-ins and Fade-outs
The jQuery scripting library is best known for so many things. Document manipulation, DOM programming, applying text effects, and especially dynamic animations. Some of the simplest effects to understand are fades. These can reduce or increase the opacity of any given HTML element on your page.
Below I’ve worked out a simple fading effect which applies to specific types of paragraphs. These include some fancy styling to help them stand apart from the rest of your page. Of course, these are only implemented for this tutorial, so you should change the classes to suit your website.
<style type="text/css">
p.fading { font-family: Arial, Helvetica, sans-serif; background: #ccc; padding: 3px 7px; }
</style>
You can add this style anywhere or even include them into a separate .css file. We will be targeting paragraph elements with the class “fading”. I’ve just set the font to Arial, added some padding, and updated the background color to a light gray. We could also set opacity from here, but it’s easier to stick all that in our new jQuery code.
If you remember before we opened a $(document).ready() event for our link alert box. It’s a simple matter to add in some new code within this call, still inside our ready() function. I know this can be a bit confusing. Thus instead of including just the new code, I’ve added the whole block so you can see what changes have been applied.
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
alert("hey there!");
});
/* set opacity 30% */
$("p.fading").css("opacity","0.3");
$("p.fading").hover(function() {
$(this).stop().animate({
opacity: 1.0
}, "slow");
}, function () {
$(this).stop().animate({
opacity: 0.3
}, "slow");
});
});
</script>
So right after our click event handler I’ve added two separate bits of code. The first sets all paragraphs with the class of “fading” to 30% opacity. This number can be changed in accordance to the decimal values, such as 0.5 for 50%.
Afterwards I’ve set a similar method to the .click() handler which is hover(). Anytime you hover over a paragraph element with the class of fading our function will be called. What’s special about jQuery hover is that we can provide actions for both on hover and on release. This is why we have two defined functions, one setting full opacity and the other resetting back to 30%.
Try adding the code above into your same document from before. Be sure to add in a small paragraph with the class “fading”, and add some filler text. It’s absolutely amazing the amount of functionality which can be built in jQuery, all in a matter of just a few minutes.
Conclusion
This has been a brief introduction into some of the methods and syntax behind jQuery. This powerful programming language has changed the way we use the Internet and design modern websites. User interfaces can be drafted in just a few hours with full animations and wonderful effects.
The other great piece of jQuery is full extensibility. Developers have created and released a lot of plugins for free, all powered on the jQuery library. Check out a few to see if any can fill a requirement for your websites. Functionality is key, but without proper design and user support your website will become bloated and fall apart. Use jQuery sparingly in your code and with the right balance you can start building incredible interfaces at the drop of a hat.
Source http://webdesignledger.com/?p=10451Thu, 14 Jul 2011 05:55:42 GMT
Tags: jquery, Tips,
Over 50,000 professional and freelance designers and developers. Post your design project once and review up to eight proposals. Save time, save money. Over 5000 projects delivered since 2006.
|
| ||||||||
| E-commerce Database Blog Social Paypal Registration Twitter | |||||||||
| Compare: | |||||||||
Related Tags: jquery
10 Useful jQuery Plugins
It seems that jQuery plugins are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re alwa
Related Tags: Tips
How to Design a Proper Banner – One That Actually Works
Let’s address the big pink elephant in the room first. Banners are not dead. They’re not on life support either. They’re doing fine and they’re going to be around for a while. They’re doing fine mostly because of their new ho
Legal Guidelines for Freelance Web Designers
Handling the legal side of freelancing could possibly be one of the more annoying tasks required for the job. Having worked as a full-time freelancer I can attest the amount of legal paperwork and information can become overwhelming, especially for newbie
HTML5 & CSS3: Take Your Design to Another Level
While both languages for HTML5 and CSS3 aren’t fully complete yet, taking the time time to familiarize yourself with some of the pointers in this post can really help you achieve that clean look and feel for your site. Let’s take a deeper look
Need Interactive Website Design? Check out our member profiles:
Over 7 years proven experience in technology. Web applications, database design/integration/analysis/reporting, dynamic content, ecommerce, flash and more. Visit now!
Chicago , Illinois US
Hand-made websites that stand out from the crowd! Looks great on every major system. Affordable, quick, fun and easy! New sites, updated sites, search engine optimization, lots more. Real estate sites
Keene , New Hampshire US
Web design: HTML / CSS; Photoshop Web Graphics; Flash Animation; Search Engine Marketing & Website Optimization. Boston area web professionals are welcome to post a free link to their sites in the EJ
quincy , Massachusetts US
unthinkit.net provides powerful web design solutions for small businesses and marketing firms. We do inventory integration, properly generated meta-tags, copy,product descriptions, pay-flow, & desig
denver , North Carolina US
A freelance graphic designer offering logo design and corporate identity design, print design and website design. Over five years experience helping businesses be more successful and look good doing i
Chapel Hill , North Carolina US
SERVING ALL OF NEW JERSEY - Professional, Customized, Search Engine Optimized Websites. Typical price range is $175 - $5,000. OTHER SERVICES INCLUDE: Logo Design, Graphic Design / Print Design, and Se
newark , New Jersey US
I offer webdesign, development, graphics, hosting, domain name registrations, SEO and other related services. Please visit http://www.des-us.com for more info. Other sites http://freehost14.websamba.c
Fremont , California USOver 50,000 professional and freelance designers and developers. Post your design project once and review up to eight proposals. Save time, save money. Over 5000 projects delivered since 2006.
|
| ||||||||
| E-commerce Database Blog Social Paypal Registration Twitter | |||||||||
| Compare: | |||||||||
Get 8 Free Bids:
Service
Location:
Budget:
Deadline:
Compare:
Get 8 Free Bids:
Service
Location:
Budget:
Deadline:
Compare:
Design trends: Touch sensitive kitchen faucets
Kalyani Kalli: The TrendFaucets are one of the most useful tools in a kitchen, allowing you to easil
Futuristic aircraft designs visualizing a supersonic flight
Jaspreet Kaur Walia: There was a time when supersonic flights just meant the great Concorde. The air
Eye Card: A perfect gift for those precious eyes!
Triveni002: Introduction: If you are wearing glasses but still have a hard time in reading a few
WDL Premium: Flourishes Vector Pack
WDL Premium: Flourishes Vector Pack
paNBin: A dustbin-dustpan combo for minimalistic home
Asmita Prasad: With space at premium in most urban homes these days, it becomes almost necessary for
Article Tags
Interactive Website Design Articles
Lifestyle
Inspiration
Designers
Concepts
gadgets
Freelancing
Freelancers Union
All Posts
Writers
web design
architecture
Featured
design
Marketing
Transportation
Tips
Premium
Illustrators
Freebies
Friends:
Ecommerce Web Design