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, Oct 26 '11 at 05:41
I want to optimize site and get rid of all unnecessary libraries — Kevin P., Oct 26 '11 at 05:53
The good news is that there is no need to convert from jQuery to Javascript, because jQuery is implemented in Javascript already. — thomasrutter, Oct 26 '11 at 05: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, Oct 26 '11 at 06: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, Oct 26 '11 at 09:00

thomasrutter · Answer 1 · 2011-10-26T06:17:49.913

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.

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 — alonisser, Oct 26 '11 at 06:11

Kai · Answer 2 · 2011-10-26T07:16:07.893

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);
}

Convert from jQuery to javascript

2 Answers2

Linked