Convert from jQuery to javascript

Question

I can not understand how to get the code working on the "native" javascript without using the API jQuery, I need help guys. I just started to learn programming. I would be very grateful!

http://jsfiddle.net/P6YeA/

Note: When you click in any area of the screen p object disappears

Why do you want to do that? You're probably better off spending your time on something else :) — alexn
– alexn, Commented Oct 26, 2011 at 5:41
I want to optimize site and get rid of all unnecessary libraries — Kevin P.
– Kevin P., Commented Oct 26, 2011 at 5:53
The good news is that there is no need to convert from jQuery to Javascript, because jQuery is implemented in Javascript already. </flippant answer> — thomasrutter
– thomasrutter, Commented Oct 26, 2011 at 5:57
But what if jQuery is a necessary library? ;-) If you just need DOM and Ajax stuff, you could grab jQuery-compatible Zeptos.js or something. There is optimizing code, optimizing performance, optimizing load times, and optimizing the development process. I would offer for your consideration that the last of these is a very worthy optimization. jQuery (and similar) isn't merely convenient syntax, it also normalizes behaviour cross-browser. — Greg Pettit
– Greg Pettit, Commented Oct 26, 2011 at 6:01
that's good learning pure JavaScript in the beginning is better mooore better than knowing jquery because it will give u the chance to invent and perhaps create your own framework and maybe ur own library — Marwan
– Marwan, Commented Oct 26, 2011 at 9:00

thomasrutter · Accepted Answer · 2011-10-26 06:17:49Z

5

This uses the jQuery functions .click(), .closest() and .fadeOut(), none of which are trivial to re-implement in a simple function. click() requires a fair bit of working around for different browser event engines. fadeOut() would be fiddly as it uses animation. .closest() would just be complex. You'd be better of continuing to use jQuery.

If you really want to be lean, you could strip out the parts of jQuery you are using. This isn't extremely simple though...

Either way, you will be up to your eyeballs in pretty complicated Javascript code for a fair while, and at the end of it, you'll have something that's part jQuery, but not quite, and not really re-usable in your future projects.

You could consider re-writing to use a leaner Javascript library than jQuery, such as Neon.js (Note: I wrote Neon - hope it's OK to link to it). Using a slimmer library will at least ensure you don't have to re-invent the wheel.

But in actuality, I think the best course is to continue to use jQuery - it has an overhead, but it's not so massive that it's going to debilitate your site. It's not that bad. And it is implemented already.

edited Oct 26, 2011 at 6:17

answered Oct 26, 2011 at 6:04

thomasrutter

118k31 gold badges153 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Greg Pettit Over a year ago

Whether it's OK or not, I'mma check it out. ;-)

alonisser Over a year ago

I agree, very smart people (who are very experienced js programmers) wrote jQuery as well as other js libraries and frameworks. the chances are you can't optimize code more than they did - not as a newbie. and another thing @kevin-p : you are falling into premature optimization trap. let the site run, get some response from users and than optimize - when you know where are you hurting

Kai · Accepted Answer · 2011-10-26 07:16:07Z

I had to try it myself as a challenge (personally, I'd use the tried and tested method out of a popular library). Tried to make it support older IE:

http://jsfiddle.net/Kai/6LmTf/

function fadeOut (e, speed) {
    var ie = (typeof e.style.opacity === undefined ? true : false),
        attr = (ie ? 'filter' : 'opacity'),
        n = e.style[attr] = 1,
        step = { slow: 300, normal: 100, fast: 50 },
        speed = step[speed] || 100,
        timer;

    timer = setInterval(function () {
        if (n <= 0.0) {
            clearInterval(timer);
            e.style.display = 'none';
            return;
        }

        if (!ie) {
            e.style[attr] = n = (n - 1/speed).toFixed(3);            
        } else {
            n = (n - 1/speed).toFixed(3);
            e.style[attr] = 'alpha(opacity=' + n + ')';
        }
    }, 1);
}

Example:

var box = document.getElementById('box');

box.onclick = function () {
    fadeOut(this);
}

Collectives™ on Stack Overflow

Convert from jQuery to javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related