Convert from jQuery to javascript - Stack Overflow

admin管理员组

文章数量:1336311

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!

/

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

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/P6YeA/

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

• javascript
• jquery

Share Improve this question Follow edited Oct 26, 2011 at 6:02 Greg Pettit 10.8k55 gold badges5757 silver badges7373 bronze badges asked Oct 26, 2011 at 5:40 Kevin P.Kevin P. 2311 silver badge44 bronze badges 5

• 5 Why do you want to do that? You're probably better off spending your time on something else :) – alexn Commented Oct 26, 2011 at 5:41
• I want to optimize site and get rid of all unnecessary libraries – Kevin P. Commented Oct 26, 2011 at 5:53
• 1 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 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-patible 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 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 Commented Oct 26, 2011 at 9:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 plex. 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 plicated 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 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/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 javascriptStack Overflow