jQuery喜欢自定义函数

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.

Answer 1

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

Answer 2

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.

Answer 3

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, ie 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.