What is Digg?Sponsored by Newegg.com
$5,000 Newegg Eggstreme Challenge Video Contest Extended to 11/15 view!
newegg.com - Show them what YOU would do with the money you save by shopping at Newegg. Seriously, show them...
35 Comments
- gemlarin, on 05/14/2009, -1/+17jQuery is a huge timesaver, and there are some phenomenal "plugins" out there.
For a comprehensive list: http://plugins.jquery.com/ - mrgprime, on 05/15/2009, -0/+14I try to stay away from bloated scripts, so I was reluctant to try jQuery for the longest time. I've finally started to use it, and I'm really impressed. It really is lightweight, and fast. It can really condense your code, too.
The greatest part is that if something works in jQuery, it usually works cross-browser. For example, the "opacity" style is not a standard, so it's different in every browser. Some browsers use "filter: alpha(opacity=50)", some "opacity:.50" and firefox uses "-moz-opacity: 0.5". Don't want to worry about which to set? No problem, just use css("opacity", 0.5) and jQuery will figure it out.
The selectors are really neat, and if you know CSS, then it's a snap to pick up.
$("#my_id") <-- select by ID
$(".my_class") <-- select by classname
$("input") <-- select by element
And the same type of inheritance used in stylesheets works too:
$("body a.my_id") <-- select all hyperlinks ("a" tags) inside of the body tag with the class "my_id")
You can also do regex matching, or partial ID matching. For example in ASP.NET, you'll find that all of your element IDs get rendered with extra crap prepended to them. For instance if you name your textbox "txtLogin", .NET renders it as something like ctl00_ctl01_txtLogin behind the scenes. In this case you can get jQuery to just match the end of the ID, the part you know will always stay the same:
$("input [id$=txtLogin]")
$= says to match the end of the word. ^= is used to match the start of a word.
Chaining methods is nice too. The following will find your element with the ID "error_box", set its inner html to "fix your error please", then slowly display the message in a smooth fashion:
html:
<div id="error_box" style="display:none"></div>
javascript:
$("#error_box").html('fix your error please').slideDown('slow');
Anyway, that's my five minute tutorial :) - lashtal, on 05/14/2009, -10/+20I hate when ppl new to webdev start to learn jquery from the beginning, without knowing js. Result is always the same: a mess of bloated *****-up scripts, consisting of copypasted chunks of code from different sources.
On the other hand, if you bother to learn js first, then you will migrate to jquery without the need to read any guides. - jedinsyd, on 05/14/2009, -1/+9I can't see your argument? jquery is javascript
Regardless of language people should learn good programming fundamentals. With this in hand Jquery is a breeze to work with and makes javascript much simpler and cleaner. - ultrafez, on 05/14/2009, -3/+10I think you need to find a beginner's guide to English.
- morninglorii, on 05/15/2009, -0/+6If you're using jQuery to avoid "learning to code properly", you're doing it wrong. The point of jQuery is, once you understand what's going on, it can save you a ton of development time, because tedious things (which you already know how to do) are done for you.
- Me1000, on 05/14/2009, -0/+6Who's to say you shouldn't learn JS before moving on to frameworks and libraries?
Of course you should understand what is going on in the background but there is no reason why I can say $("#blah") instead of selectElementById('blah') especially when there isn't a performance hit. jQuery is a very light weight library... - jhaks, on 05/14/2009, -2/+6If it works, it work?! I want to slap you up side the head.
I forget where I first heard this. I'm sure all programmers have heard it from some teacher in their life.
Question:
Why is the structure and format of code important?
Answer:
Because machines aren't the only ones who read code. - therippa, on 05/14/2009, -0/+4jQuery is great, and the plug-in architecture is awesome, but don't forget that Prototype adds some pretty handy methods to existing Javascript data types/objects/etc, filling in a lot of holes in the language. Use both.
- gemlarin, on 05/15/2009, -1/+4You guys are all complete tools. Look at the elitist jerks flocking to this thread, "Look at me, I am so much better than you because I know more script than you".
Look, I have been in the business for quite awhile, and have written more code than you could imagine. I have worked on others code, and never had too many problem figuring it out (even if they don't comment it). It javascript, its not friggin rocket science. If you cant look at someones code/script and figure it out in 20 minutes, even if it is not commented, and even if it is bloated, you are in the wrong field.
Bury me, I honestly dont care. - johnathanhebert, on 05/15/2009, -0/+2It was definitely a beginner's guide... I think working with jQuery before learning the basics of javascript is okay, because if you pass the code on to someone else... at least the developer that picks it up will be familiar with the framework.
- Filter, on 05/16/2009, -0/+2I'm not much of a web developer but I just discovered jQuery a few weeks ago and I love it.
- Quakes, on 05/14/2009, -2/+4It's all good until you're stuck maintaining or patching their ***** code.
- jibajaba, on 05/15/2009, -0/+2As with many new API's and platforms jQuery is about speeding up the development process and allowing some lesser developers to add functionality to their sites that perhaps they wouldnt of been able to in the past. There is nothing wrong with this. It is the natural evolution of software and has been happening since the beginning of time (well, since computers).
If this type of "fiddly" presentaional code is already writter for us it means we can then spend more man hours on other uncharted areas and push web development even further. - mrgprime, on 05/15/2009, -0/+2Didn't know about chain() and end() -- that's really neat.
- lashtal, on 05/15/2009, -0/+2The main timesaver and the largest difference from 'normal' js is the ability to chain functions, e.g:
$(this).chain("hide", "slow").addClass("done").find("span").addClass("done").end().chain("show", "slow").removeClass("done").end().end();
-- instead of writing multiple long lines. - phill, on 05/14/2009, -2/+3This was basically and intro to what jQuery is. Not much about how to use it. Not really a guide. You would do better to use the jQuery site. Unless you think you can learn jQuery in 7 lines of code.
- LeaveMomAlone, on 05/15/2009, -0/+1"Bury me, I honestly dont care."
I can't be bothered. Although, you apparently took your own advice for the rest of us. - LeaveMomAlone, on 05/15/2009, -0/+1Yeah, that's a typical old-school approach. Seat of the pants, jolt cola, spaghetti code until 2AM.
No thanks.
Javascript is a language just like any other. It's not simpler or easier. Best practices are best practices. You might like to boast about how you can understand anyone's code in 20 minutes, but I couldn't give a damn. I'm not into pissing contests, I'm into doing things right and going to bed on time.
The question isn't how much code you've written, or how many other peoples' code you've expertly deciphered, but how many other people have had to maintain YOUR code, and how happy they were about it. There's absolutely nothing elitist about hating to clean up other peoples' messes. There are plenty of people out there who can code tons of functionality very quickly, but simply cannot work well in a collaborative setting. - emyo, on 05/15/2009, -2/+3They only reason you should not be using a javascript library such as jQuery is that you might be studying. For all those in the profession you are way behind if you are just picking a javascript library now.
Handy tip when combined with firebug and debugging use console.log("print this"); - pickupman, on 05/21/2009, -0/+1This thread is a better write up than the original article.
- buzzert, on 05/16/2009, -1/+2I personally prefer mootools. It's faster and has a better Effects plugin IMO: http://mootools.net
- inactive, on 05/15/2009, -0/+1Why?
- ravenflx, on 06/02/2009, -0/+1Good lord what are you talking about. Surely you have absolutely no idea what you are talking about. jQuery is a great language to learn once you know JavaScript for a billion and two reasons you should already know (if you are a good web dev). Your "primary problem" doesn't exist, only in your own head. It may not be such a bad idea for to read a few more beginner tutorials on jQuery. To say this particular arguement is BS, is to say you don't know wtf you are talking about.
var elm = dogument.getElementById("mydiv");
elm.innerHTML = "new content";
elm.style.color = "red";
Can also be done:
var elm = $('#mydiv');
$(elm).html('new content');
$(elm).css('color','red');
Ofcourse the last line should follow the second chain but was following your example in hopes you would understand it. You can then use the variable to reference the element again in the future, the same as JavaScript. So please, next time you call something bs or a hack, know what the hell you are talking about first.
"Have you ever tried to debug somebody's jQuery code? You can't, you have to rewrite it because the person who originally wrote it simply copy and pasted it and had no idea what was going on." -- Yea btw, you're the guy who's crap JavaScript functions I rewrite in jQuery running faster smoother and cross browser compatible eh? =] </rant> - Dudely, on 05/14/2009, -3/+4I read "difficult aspects of Javascript" and tuned it out. Not to say jQuery isn't useful, it's just. . . please don't use it if you think js is difficult.
- falser, on 05/15/2009, -2/+2jQuery is a really bad library to learn JavaScript with. The primary problem is that it obfuscates all the element selection.
$("#mydiv").html("new content");
After that command, your only reference to the #mydiv element is a hidden variable inside the jQuery object. You are forced to chain your next command, or reference the object again using $("#mydiv"). This starts getting really annoying when you try to build anything semi-complicated using object-based widgets that aren't jQuery plugins. jQuery locks you into using this confusing referencing, and one-line chaining hacks in order to do things that aren't very difficult to begin with.
"But.. but.. you do so much in one line of code!!!"
That argument is such BS. Can you honestly say that this:
$("#mydiv").html("new content").style({color:"red"});
Is more concise than:
var elm = dogument.getElementById("mydiv");
elm.innerHTML = "new content";
elm.style.color = "red";
It's not, saving a few characters is not worth the effort to figure out how to do it all in one line.
Have you ever tried to debug somebody's jQuery code? You can't, you have to rewrite it because the person who originally wrote it simply copy and pasted it and had no idea what was going on. - LeaveMomAlone, on 05/15/2009, -2/+2Agreeing with Quakes and jhaks. If that's your attitude, I don't want to work on the same team as you. You sound like the type of developer who doesn't comment their code.
@lashtal: That's a good point. This article is a bit lacking in context, in terms of identifying the target audience and the required knowledge. - nourayehia, on 05/14/2009, -5/+4Really a helpful guide for anyone who wants to start working with jQuery.
- inactive, on 05/15/2009, -2/+1It's always good to found article about beginner's guide English about Grammer.
- brokenwatch, on 05/14/2009, -4/+3Beginner as in you have never written a line of code in your life? I found this article incredibly useless. Wow, so you can click on a button. I'm sure that will take me far.
- onlinegames, on 05/14/2009, -5/+3Very good article!
- dawnraid101, on 05/14/2009, -5/+3Pfft learn to code properly, It may be harder, but at least you will understand what you are doing, how to debug etc. There is no quick or easy way to do it, just hard work.
- gemlarin, on 05/14/2009, -9/+5What difference does it make to you? If it works, it works. I know js, but I certainly wouldn't put someone down that doesn't. jQuery exists so that people don't have to write their own script if they don't want to, or perhaps, don't know how to.
- tonychenyj, on 05/14/2009, -11/+4It's always good to found article about beginner's guide.
- xGrill, on 05/14/2009, -14/+2jQuery is for newbs.
© Digg Inc. 2009
— Content created and posted by Digg users is