How do library methods work in javascript?

Question

I'm somewhat new to javascript, and have been using libraries/css frameworks to construct some of my sites that I build just for fun. To use certain functionalities provided by the framework creators, the documentation says to call a method on a jQuery object, like $('.my-class').someMethod(). As an example, the following is how initialize Materialize's autocomplete function on any input field you want:

$(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });

Now, it is my understanding that when you run: $('input.autocomplete'), jQuery will return a 'jQuery object', as stated here.

So I ran a test in my browser with a dummy page, and logged this object to the console, and it returned an array with one element -- that of the div that I searched for:

I'm guessing all of the purple text in the image above are properties of the jQuery object.

Now for my question: how is it possible for me to call .autocomplete() on this object? No .autocomplete() method exists inside the jQuery object, so why would this not throw an error?

I'm having a hard time understanding how .autocomplete() can be run on virtually any jQuery object... how does it know where to find this method? I thought to use dot notation, it needed to be a method within the class you are chaining it to.

"I'm guessing all of the purple text in the image above are properties of the jQuery object" - The `0: div` is, but the rest are properties of the **DOM node** that is the first element matched by the jQuery object. — We Are All Monica, Sep 01 '18 at 00:18

We Are All Monica · Accepted Answer · 2018-09-01T00:15:52.293

0

how is it possible for me to call .autocomplete() on this object? No .autocomplete() method exists inside the jQuery object, so why would this not throw an error?

jQuery plugins can add their own functions to jQuery objects, see jQuery.fn.extend for more info.

This method is coming from a jQuery plugin, which you may not have installed. It's not possible to tell which one without more info, but there are lots of options.

Note that this view inside the console won't show all the jQuery methods either. Here is a better way to find the available methods and properties that can be called on any object:

edited Sep 01 '18 at 00:15

answered Sep 01 '18 at 00:13

We Are All Monica

13,000
8
46
72

Hi, thanks for your answer. But how can I 'inject' a method into a jQuery object? If I want to write my own methods that I can call with the same syntax – Vranvs Sep 01 '18 at 00:15
Good question - see [`jQuery.fn.extend`](https://api.jquery.com/jquery.fn.extend/) for this. I updated my answer to include this info. – We Are All Monica Sep 01 '18 at 00:16
Ahhhh awesome!! This is what I've been wanting to know forever... thank you so much – Vranvs Sep 01 '18 at 00:16
Sure thing! In a "regular" JavaScript class, this would be done by `ClassName.prototype.newFunction = function() { ... }`, but jQuery is "special" in how it handles extensions. – We Are All Monica Sep 01 '18 at 00:19
Is it possible to use jquery methods in my own custom extensions? For example... define a method called turnRed()... then within it, call the jquery method .css({'background-color': 'red'}); ... I just tried, and it said method doesn't exist. Seems like only native js functions work? – Vranvs Sep 01 '18 at 00:39
Nope, there is no problem with this... Please ask a new question with a code sample. – We Are All Monica Sep 01 '18 at 00:53

score 0 · Answer 2 · edited Sep 01 '18 at 00:21

0

If you do a

console.log({});

you will get {} No methods. But any object will inherit all the parent methods, but you wont see it with a console.log

edited Sep 01 '18 at 00:21

We Are All Monica

13,000
8
46
72

answered Sep 01 '18 at 00:21

Walopper

56
3

How do library methods work in javascript?

2 Answers2