How come $('#cy').cytoscape works?

Question

I have the following code that is using jQuery and cytoscape. What does $('#cy').cytoscape mean in the following code? I undesrtand the first part (that is, select the element with an id cy), but then it seems it invokes the function called cytoscape and passes an object as its argument. How come jQuery understands the cytoscape method here?

var init=function () { 
  $('#cy').cytoscape({
     elements: [n1,n2,n3,n4,e1,e2],
     layout: {name: 'preset'},
     style: [style1,style2]
  });
}

$(init);

---

Here is the entire code, just for the completeness; there is a <div> tag with an id 'cy' in the corresponding html page:

var n1={ // node n1
      data: { // element data (put dev data here)
        id: 'n1', // mandatory for each element, assigned automatically on undefined
        parent: 'nparent', // indicates the compound node parent id; not defined => no parent
      },
      scratch: {
        foo: 'bar'
      },
      position: { // the model position of the node (optional on init, mandatory after)
        x: 100,
        y: 100
      },
      selected: false, // whether the element is selected (default false)
      selectable: true, // whether the selection state is mutable (default true)
      locked: false, // when locked a node's position is immutable (default false)
      grabbable: true, // whether the node can be grabbed and moved by the user
      classes: 'foo bar' // a space separated list of class names that the element has
    };

var n2={ // node n2
      data: { id: 'n2' },
      renderedPosition: { x: 200, y: 200 } // can alternatively specify position in rendered on-screen pixels
    };

var n3={ // node n3
      data: { id: 'n3', parent: 'nparent' },
      position: { x: 123, y: 234 }
    };

var n4=
    { // node nparent
      data: { id: 'nparent', position: { x: 200, y: 100 } }
    };

var e1={ // edge e1
      data: {
        id: 'e1',
        // inferred as an edge because `source` and `target` are specified:
        source: 'n1', // the source node id (edge comes from this node)
        target: 'n2'  // the target node id (edge goes to this node)
      }
    };
var e2={ // edge e1
      data: {
        id: 'e2',
        // inferred as an edge because `source` and `target` are specified:
        source: 'nparent', // the source node id (edge comes from this node)
        target: 'n2'  // the target node id (edge goes to this node)
      }
    };
var style1={
      selector: 'node',
      style: {
        'content': 'data(id)'
      }
    };

var style2={
      selector: ':parent',
      style: {
        'background-opacity': 0.8
      }
    };

var init=function () { 
  $('#cy').css("background-color", "pink");
  $('#cy').cytoscape({
     elements: [n1,n2,n3,n4,e1,e2],
     layout: {name: 'preset'},
     style: [style1,style2]
  });
}

$(init);