jQuery like custom functions

Question

I have been wondering how I can create functions like jQuery. For example: $(ID).function()

Where ID is the id of an HTML element, $ is a function that return the document.getElementById reference of the element "ID" and function is a custom javascript function.

I'm creating a little library which implements some functions. And I want to use that sintax without using jQuery.

Now, my questions are: how I can implement that? What is the name of the tecnique that allow that?

Edit:

What I want to do is this:

HTMLElement.prototype.alertMe = function() {alert(this.value);}

Then, when I call document.getElementById('html_input_id').alertMe(), it must show an alertbox with the input value. But HTMLElement.prototype doesn't work in IE.

Yeah, but I don't want to create a plugin. I won't use jQuery at all. — Esteban M.
– Esteban M., Commented May 20, 2011 at 13:18
Andre, I already tried object.prototype, but it doesn't work on IE — Esteban M.
– Esteban M., Commented May 20, 2011 at 13:20

George Cummins · Accepted Answer · 2011-05-20 13:18:31Z

1

$ = function(id) {
    return document.getElementById(id);
}

answered May 20, 2011 at 13:18

George Cummins

29k8 gold badges74 silver badges91 bronze badges

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

Comments

Charlie Martin · Accepted Answer · 2011-05-20 13:31:31Z

1

Okay, look, what you're asking has a lot of details and implications. The code for jQuery is open source, you can read it for the details; you'd do well to find a good Javascript book as well, the the O'Reilly Definitive Guide.

$ is just a character for names in JS, so as some of the other answers have shown, there's no reason you can't just write a function with that name:

var $ = function(args){...}

Since everyone and his brother uses that trick, you want to have a longer name as well, so you can mix things.

var EstebansLibrary = function(args){...}
var $ = EstebansLibrary; // make an alias

Since you end up doing different things with the entry point function, you need to know how JS uses arguments -- look up the arguments object.

You'll want to package this so that your internals don't pollute the namespace; you'll want some variant of the module pattern, which will make it something like

var EstebansLibrary = (function(){
    // process the arguments object
    // do stuff
    return {
       opname : implementation,...
    }
})();

And you'll eventually want to be prepared for inheritance and that means putting those functions into the prototype object.

answered May 20, 2011 at 13:31

Charlie Martin

113k27 gold badges198 silver badges268 bronze badges

1 Comment

Esteban M. Over a year ago

Thanks Charlie, I'll consider those tips.

Seidr · Accepted Answer · 2011-05-20 13:26:35Z

0

You can use prototype to assign a new function to the Element prototype.

Element.prototype.testFunction=function(str){alert(str)};

This would provide the function 'testFunction' to all HTML elements.

You can extend any base Object this way, i.e. Array, String etc.

This will work without any plugin at all - although that said I don't think it will work in IE. I believe libraries such as MooTools and jQquery create their own inheritance with DOM elements to ensure cross-browser compatibility, although don't quote me on that.

edited May 20, 2011 at 13:26

answered May 20, 2011 at 13:20

Seidr

4,9363 gold badges29 silver badges39 bronze badges

Collectives™ on Stack Overflow

jQuery like custom functions

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related