jQuery custom function to javascript

Question

I recently write this in jQuery

$.fn.my_cus_fn = function(){
    $(this.selector).click(function(e) {
        // do stuff
    });
    $(this.selector).focus(function(e) {
        // do stuff
    });
    // ................    
}

Then I used it like.

$('#my_action1').my_cus_fn();
$('.my_action2').my_cus_fn();

I wanted to write it using javascript only.

I didn't find any solutin for it. Can anyone help me?

Expecting something like

document.getElementById('my_action1').my_cus_fn();

$('#my_action1') IS jQuery. do you want this in plain Javascript too? — Banana
– Banana, Commented Jun 13, 2014 at 8:39
Code using jQuery is "plain JavaScript." jQuery is a library, not a language. You mean "using the DOM directly." — T.J. Crowder
– T.J. Crowder, Commented Jun 13, 2014 at 8:43
I know that jQuery is a JavaScript library. I need to know how to write function similar to that one without any help of "jQuery" — Arjun Raj
– Arjun Raj, Commented Jun 13, 2014 at 8:47

T.J. Crowder · Accepted Answer · 2014-06-13 09:07:01Z

3

You can extend the prototype of elements on nearly all browsers (even IE8, and I think it's all modern ones; doesn't work on IE6, not sure about IE7, but those are dead now anyway). Like this:

var ElementConstructor = window.Element || window.HTMLElement;
ElementConstructor.prototype.my_cus_fn = function() {
    // Your code here
};

The Prototype library does this (it's how it got its name). Just beware that you could conflict with other people doing it, and/or with new features added to elements by newer specs. So I'd probably use some kind of likely-to-be-unique prefix on your function names. (FWIW, some years back before significant development on Prototype ended I know the then-maintainers were seriously thinking of not doing prototype extension anymore in favor of wrapping instead, the way jQuery does.)

Complete Example:

<div id="foo">This is the element</div>
<script>
  (function() {
    "use strict";

    var ElementConstructor = window.Element || window.HTMLElement;
    ElementConstructor.prototype.my_cus_fn = function() {
      this.style.color = "green";
    };

    document.getElementById("foo").my_cus_fn();
  })();
</script>

If you're going to do a number of extensions, I'd probably wrap them in a scoping function like this, and give the functions proper names (because of the IE8 problem with named function expressions, I use function declarations):

(function(ctor) {
    var p = ctor.prototype;

    p.my_cus_fn = my_cus_fn;
    function my_cus_fn() { /* ... */ }

    p.my_other_fn = my_other_fn;
    function my_other_fn() { /* ... */ }

})(window.Element || window.HTMLElement);

edited Jun 13, 2014 at 9:07

answered Jun 13, 2014 at 8:45

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

5 Comments

Bhavik Over a year ago

Using the above code, created something similar to what the OP asked...

Arjun Raj Over a year ago

@T.J.Crowder : why did you write the function inside (function() {}) ? Is that important?? I can run without it.

T.J. Crowder Over a year ago

@ArjunRaj: Purely to wrap the contents so I can have private stuff in there, and as a convenient way to pass in the ctor.

Arjun Raj Over a year ago

@T.J.Crowder This is enough for me. But this doesn't work with ` document.getElementsByClassName() ` ( It returns an array of elements ) . If you know how to do this, please share. It will help someone in someday.

T.J. Crowder Over a year ago

@ArjunRaj: Well, it works for the elements in the collection you get back, but yes, it doesn't work for adding methods to the collection itself. On most browsers, you can do that by extending NodeList.prototype, but that doesn't work on IE8 (I don't know about IE9+). Side note: Don't use getElementsByClassName, it's not well-supported. Use querySelectorAll instead. It's in all modern browsers (including IE8+).

Collectives™ on Stack Overflow

jQuery custom function to javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related