How to create own jQuery-like function in JavaScript?

Question

How can i create a function which looks like the jquery callback $

Say i want to call a element with id= "mydiv".

i want to be able to call it like

var div = $("mydiv").value;

i think the function should look like

function $(element)
{
  return  document.getElementById(element);
}

Is that the right way to do it, or do you prefer another way to solve it?

So, Bob comes along to look at some code that has landed in his lap and discovers that it is using a $ function. "%$@£%!", he sighs, "Is this jQuery? No. Maybe prototype.js is in there somewhere? Oh, it's a custom routine. Why can't people give their variables useful names?" — Quentin
– Quentin, Commented Apr 25, 2010 at 20:35
Name the function something like getElem("id") if you want to shorten document.getElementById("id"). I wrote some like that before and added a optional context parameter for iframes etc. getElem("id", context). This was before I discovered jQuery. Using $ would just be confusing to anyone else reading your code. — Kenneth J
– Kenneth J, Commented Apr 25, 2010 at 22:59

Jacob Relkin · Accepted Answer · 2010-04-28 02:35:37Z

9

You can do it one of three ways:

local scope:

function $(element)
{
  return  document.getElementById(element);
}

or

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

or if you need it to be defined in global scope:

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

If you have included jQuery, defining $ in the global scope will override it. Use jQuery.noConflict to avoid this.

edited Apr 28, 2010 at 2:35

answered Apr 25, 2010 at 20:19

Jacob Relkin

163k34 gold badges351 silver badges321 bronze badges

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

Comments

Tgr · Accepted Answer · 2010-04-25 20:57:37Z

-1

jQuery actually returns a custom object so you can call $('#id').someJqueryFunction(). If you simply want a shortcut for document.getElementById,

var $ = document.getElementById;

should suffice.

answered Apr 25, 2010 at 20:57

Tgr

28.4k13 gold badges88 silver badges123 bronze badges

1 Comment

bobince Over a year ago

Will fail in many browsers. Remember that when you extract a method from an object and then call it from the now-unbound reference, this will not be set. So calling $ will not pass the right document object to the getElementById function.

Collectives™ on Stack Overflow

How to create own jQuery-like function in JavaScript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related