How long did it take you to learn jQuery?

I am 55 pages into the learning jQuery 1.3 book and for me not having been involved in web development a long time its pretty intense. I have pretty standard css/html knowledge but the only background I have with JavaScript is a lynda tutorial I watched. I am understanding the book and it is a great book, but I guess any new language can be a bit daunting at first thats why you learn it

Anyone else who uses jQuery just wondering how long it took for you to learn it? Or maybe your still learning?

Brett.

 

Two hours to use it for an AJAX form and a couple of DOM effects. Of course, there is always something new to learn about anything. But it's only a library. You learn from it what you need for doing your current work, only.

 

This is where I go wrong with EVERYTHING! I try to learn, lol. I try to learn things inside out and sometimes this puts me at a disadvantage.

 

I have never used JQuery or any other framework, and probably won't. What is wrong with just using javascript?

 

I just google for usage and copy and paste what ever code I need.

That's how I did the form on this page:

http://dailymotion.tdjc.be/

 

While working on a project I meet jQuery because designers had used a control built over jQuery in one of the forms. That control wasn't working and I had to repair it. In the process I read jQuery reference and I liked it. Finally I replaced old ajax framework for that project with jQuery.

There is nothing wrong with it. But frameworks use to make your job easier. And jQuery does a good job in simplifying programming process. Specially when there is a lot of work to do that repeats over different projects.

 

It doesnt take long to grasp jquery and understand how it works. I've read the book you're talking about and its great. But it might be too big if you just want to leanr and start using it.

Really, read a tutorial http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery, and each time you run into a problem, read through the api docs http://docs.jquery.com/Main_Page, iof you dont find what you want, google for it with "jquery +whatever". After a while you'll leanr hwo to work it

 

I think just a little to learn IT

 

1 day after I start learning, I made a Tabbed Menu Script

jQuery is fun

 

you reinvent the wheel and keep redoing all browser detections, fixes, quirks for every project you work on. eventually you get pissed off, fed up and let somebody else level the playing field for you.

anyway, i know you know your javascript so you won't convert - at least i don;t think jquery would be a good choice / have much to offer, perhaps.
but you should try mootools for it's great class / inheritance approach (not that you can't do that in javascript by prototyping functions but still... have a look ) - it has made javascript my 1st choice for enjoyment out of programming (although I still need to do php etc).

and no, you can't learn mootools in 2 hours come to think of it, you can't learn jquery on 2 hours - this is the problem, it can take you such time to find / get going something you found online w/o understanding it, then as soon as there's need to change and fix it, you end up on the forums asking questions

to me, saying you have learnt jquery means you ALREADY know javascript and are just extending your skill set - if not, then you don't know anything, really.

 

I am sure jQuery and other frameworks have their benefits and uses, and it would be a great asset in learning them... but I don't think that they are the best possible solution to ALL problems. jQuery seems to be the answer to a lot of the problems posted, even when there is a much easier/lighter solution (but normally there is no elaboration, just 'jQuery can do that....').

I don't use jQuery because I'm a 'from scratch' type of person... just as I would never use a template or a pre-written script (client-side or server-side). I think that it is much more satisfying to do it all yourself (although more time consuming), plus your not importing a whole lot of crap that isn't necessary. But then again, if I had to create a lot of websites my opinion might change. i'm fairly new to JS, and don't have anywhere near the skills/knowledge of dimitar, but I will just stick to JS, unless it becomes more efficient for me to use jQuery.

How large is the jQuery framework? 117kb?

 

i also tend not to use any pre-made stuff and code everything from scratch. i NEVER revert to using ready-made plaugins for mootools (my choice of framework) either but tend to write my own and release them through my blog as snippets...

there are also frameworks and libs available for PHP etc. so many ways to improve/ease your production cycle that i don't use--PHP is PHP. you run something like:

<?PHP

echo "hello world";

?>

PHP:

guaranteed to produce JUST that in any browser.
NOT the case with javascript, as you well know. and believe me, sometimes it is nice to be able to just do $(document.body).set("html", "hello world"); and not worry about anything beyond that.

I hear you about size - which is why frameworks are minified and you can use content type deflation. for instance, mootools-core + mootools-more, compiled with EVERYTHING and served by my server comes to a 41.7k (from 140). also, in today's internet speed, faster connections and superior browsers that multithread, pages are rendered faster than ever - if you optimise the rest of your site, squeeze juice out of css, use image sprites etc etc, your overall speed improves and you can compensate for the slight download you subject your users to. also, after the initial one, it will be cached. and finally, google has a codebase api that has a copy of the latest versions of every major framework out there, a lot of sites reference them direct because of the CDN and the fact that people will have them cached already (from other sites that use them). its genius!

also, mootools allows you to select which parts of the framework you'd like built in. have a look at this beautiful solution: on a per project basis you can use just what you need.

http://mootools.net/core

for example, if i dont plan on using ajax or animation effects or classes, my filesize drops from 67k to 40k (before gzip which comes to about 11k).

i wouldn't know about jquery's size but it really gives you no benefits outside of manipulating dom/selectors/basic event handling/crap effects--it really annoys me how everyone that's into buzz words swears by it and uses it as the solution to every problem. and then they install tonloads of badly written plugins to bloat it more... oh well.

 

I understand what you mean with compatibility between browsers. it's a shame that they all can't just follow some sort of universal protocol. That should have been introduced a long time ago. it would make life a lot easier.

I guess these days the size isn't really an issue for users... but for me, I guess that it's more about the principle of it. But then again I've tried coding Assembly and I would definitely prefer .NET

I thought you were one of the mooTools developers...

 

I mix using a framework (YUI) and my own code. The main reason I like working with a library is because developers have already spent many hours working out bugs and trying to ensure cross browser compliant code. Why do all that work when it has already been done? Not to mention a nice API to work with.

As for learning any language or framework nothing really beats diving into a project and seeing it through.

 

i don't know.. maybe it's just because i don't like $ signs in my code....

 

heh, i remember assembler also was fun but it took me no time at all to jump over to Turbo Pascal (which also supported inline ASM)

what, be on the mootools core devs team? hardly, these guys are douglas crockford-esque and i am but a lowly user.

i do submit bugs to the framework's ticketing system and have even suggested functional changes to some mootools-more code (approved for next week's 1.2.4 release, heh) , but alas, my contributions to the mootools community have been more to do with UX / plugins / popularising the framework on forums/coding sites/twitter and so forth than anything else (at least thus far). somebody has to, we don't have jquery's userbase and their market share

oh well!

 

I am struggling to learn jQuery badly!

I am reading through the learning jQuery 1.3 book by Karl Swedberg & Jonathan Chaffer. Up to page 100 of 350

I am understanding what they are saying and the basics of the code, I can see how it all works.

But remembering it or being about to write it from scratch is another story all together! I can't write a single thing except $(document).ready(function() { } I just cant get to grips with the syntax

Maybe this book is not the right way for me to go or maybe scripting/programming isn't the right way for me to go all together

 

i am not familiar with the book but you are starting from the finish line imo. to put things into perspective, this is like learning how to fly a plane by being given the rodstick midair. you still need to know how to take off and land the thing.

programming is not for everybody - but if you've never programmed before, you REALLY need to learn a few concepts first before you go into something like jquery, which is considered an abstraction layer over javascript. in other words, you need to learn the basics of javascript first imo.

this bare minimum to me would entail:

variables and variable types / type casting and converting between variable types.
the "if / then / else" concept and the c++ assign of var = (cond) ? then : else
loops
functions - predefined and writing your own
understanding the browser's DOM and being able to reference and modify objects from it
event handling, onmouseover/out/click/dblcick. event.type and understanding of event bubbling / propagation and how to stop it.
forking through setTimeout and setInterval

some more advanced things you can read up on:

scoping and closures - effects on functions over the global availability of a variable. namsespacing
prototypes. prototyping vs namspacing, pros and cons and which frameworks do what
everything is objects, and objects are arrays and JSON is brilliant
looping objects and arrays, the differences
basic object inheritance via functional prototypes
best practices in javascript for speed and code efficiency.
... this list is infinite

and ideally, before you go into jquery:

css3 selectors

basically - i'd go and give myself a day for the first part. this means, read and study by example. google, try it out, see for yourself. if at the end of it you are not seeing the big picture, consider becoming a marketer or a taxi driver good luck, dont be shy on asking for help--only way to learn

 

Thanks for the help and advice I appreciate it.

I did try and get a foundation in JavaScript I watched some Lynda tutorials on JavaScript and on jQuery before reading this book. I understand and know what most of the things you mentioned are and how they work. My knowledge to a degree is there... I just can't put it all together the syntax of JavaScript and jQuery I don't care what anyone says is NOTHING like CSS. Its far more complex and have to be put together with much greater accuracy.

The thing that is getting to me is I know css is property: value;

Easy.

jQuery I don't know if I am using a ' or a " or a [ or a { this is what confuses me with the whole thing.

Do you think I should get like a JavaScript for dummies type book and start from scratch.

 

this last part is very simple

basis/premise of modern javascript - and jquery is this kind of thing:

.css("property", "value"); - for a single matched pair.

or

pass it an object, exactly like in css but with a slightly different sytnax

var props = {
    border: "1px solid #000",
    background: "#000",
    color: "green",
    "z-index": 10000,
    backgroundRepeat: "no-repeat"
};

$("#foo").css(props);

PHP:

the props object has a JSON structure. its simple: { name : value, name : value, ... name : value (no comma) }

notice that for CSS purposes, you need to escape properties that have a - like font-size and use either their scripting counterpart, usually camelcased split version of the prperty, or use " " around it.

just get your head around a tree like structure that can and does share data. here is a more modern construct i wrote a few days ago, ALSO an object:

var Cookie = {
    // wrapper for working with cookies.
    set: function(c_name, value, options) {
        options = (typeof(options) === "undefined") ? {
            duration: null, // in days, if null, session only
            path: null // relative to domain, if null, default from URI
        } : options;

        if (options.duration !== null) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate()+options.duration);
        }

        document.cookie=c_name+ "=" +escape(value)+ ((options.duration===null) ? "" : ";expires="+exdate.toGMTString()) + ((options.path===null) ? "" : ";path="+options.path);
    },
    get: function(c_name) {
        if (document.cookie.length > 0) {
            var c_start = document.cookie.indexOf(c_name + "=");
            if (c_start !== -1) {
                c_start = c_start + c_name.length+1;
                var c_end = document.cookie.indexOf(";",c_start);
                if (c_end === -1)
                    c_end = document.cookie.length;
                return unescape(document.cookie.substring(c_start,c_end));
            }
        }
        return false;
    },
    remove: function(c_name) {
        this.set(c_name, "", {duration: -1, path: "/"});
    }
}; // end Cookie wrapper

PHP:

now you have a single object which has 3 properties that just happen to be functions, Cookie.set, Cookie.get and Cookie.remove. they share a common "namespace" in Cookie and a common scope, referred to as 'this'. consider the remove function that calls the set function.

this is what jquery does. the $ you see is an alias for jQuery, all the functions hide behind it. THIS is why when you do if ($("#foo")) , it does not return true or false, because $ is the jQuery object. but it changes the length property instead, for example, you could do if ($("#foo").length) { ... run code when the layer with id 'foo' exists }

hence - to extend it, you'd do jQuery.cookie = { ... } instead.

then there's arrays. in modern jscript you dont need to use the constructor, just go...

var foo = []; // empty array
var bar = [1,2,3,77,98,35]; // a simple numeric array

var scary = [{id:1,url:"/index.php"},{id:4,url:"/about.php"}]; // an array of objects.

// reference this:
alert(scary[0][url]);

// or
var temp = scary[1];
alert(temp.url); // about... 

PHP:

in a way - arrays and objects are interchangeable as you can see. if you have:

var foo = {
    'bar': "dingle"
};

alert(foo.bar); // dingle
alert(foo["bar"]); // dingle

PHP:

notice that when creating json, the left side does not NEED to be encapsulated but it's better to be. for example, the following works in FF but breaks IE:

var foo = {
    class: "underline" 
}; // breaks because "class" is a reserved word in IE.

var foo = {
    "class": "underline"
}; // works in all browsers

var foo = {
    "class": "underline", // notice the comma here
}; // breaks in IE

PHP:

the latter one is a VERY typical example of a problem you may run into when dealing with JSON-like properties.

as for using " or ' - does not matter, equally correct - this is not PHP where content between " " is evaluated whereas ' ' is literal. just be consistent in closing / escaping them.

i hope this makes some sense.