Search jQuery

jQuery Forum

Getting Started

schoenema..

Calling element functions

in Getting Started • 11 years ago

Hi,

I'm a bit confused about how to call plain JavaScript functions on a selected element or access an elements properties.

For example to set an onmousemove handler for a canvas element I tried this:

<html><head><script>
function mouseMoveHandler(event) {
// do some thing
}
function init() {
var canvas = $("#myCanvas");
canvas.onmousemover = mouseMoveHandler;
}
$(function(){init();});
</script><body>
<canvas id="myCanvas" height=100 width=100></canvas>
</body></html>

but that does not work. I could fix that by changing line 7 to:

canvas[0].onmouseover = mouseMoveHandler;

Is there a better way to achieve this result?

Why can't I just access the properties without that nasty looking array operator? I selected the element by it's ID so why do I have to select the first element in the returned value (set)?

What is returned by the selector(s) (what kind of data)?

Thanks for clarification!

Lutz

Replies(10)

chrisvill..

Re: Calling element functions

11 years ago

hi there!

you should probably invoke your function method using the jquery .mouseover() event [note: the code below is not tested]:

function mouseMoveHandler(event) {
// do some thing
}
function init() {
var canvas = $("#myCanvas");
canvas.mouseover(function(e){
mouseMoveHandler(e); //edited to put event in method
});
}

jakecigar

Re: Calling element functions

11 years ago

tested:

<html><head>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
function mouseMoveHandler(event) {
// do some thing with "this" already set to the canvas element
console.log(this)
}
function init() {
$("#myCanvas").mouseover(mouseMoveHandler) // jQuery passes the event when calling.
}
$(init); // passing any function to $() runs it when the dom is ready
</script>
<body>
<canvas id="myCanvas" height=100 width=100></canvas>
</body></html>

JΛ̊KE

schoenema..

Thank you for your input

But I already tried to use the mouseover() function but it seems to be a bit slower than doing it the plain JavaScript way.
For testing purposes I'm just drawing an image at the current mouse position. And it seems to me that it's not really slick as I used the $("#myCanvas").mouseover() function.

But the main question here is how to access the elements properties / functions the right way? And what exactly is returned by a jQuery selector?

An other example which needs to access an elements function is to get the 2D / 3D context of a canvas object. Using plain JavaScript it would look like this:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

How would I do this using jQuery?

Regards,
Lutz

jakecigar

Re: Re: Calling element functions

11 years ago

inside the mouseover or other jQuery function you use this. you do not recreate the selector. That may be the speed problem.

var context = this.getContext("2d");

JΛ̊KE

dsvick

Re: Calling element functions

11 years ago

JQuery selectors return an array of elements, this array can be 0 (zero) or more elements in length. If you know that you'll never have more than one element that matches a selector you can just treat the results of the selector as the element for some things. For other things like, in your example you can use the array selector as you mentioned in your first post to get the specific element you want and then treat it as a regular JavaScript element.

var canvas = $("#myCanvas")[0];
var context = canvas.getContext("2d");

I'm not sure if the JQuery attr method (http://api.jquery.com/attr/) would work for the context since it is an object.

Hope that helps

Dave

schoenema..

Re: Calling element functions

11 years ago

But if the returned value of the jQuery selector is an array how is it possible that you can call functions that are defined by jQuery like:

$("#mycanvaa").addClass("foo");

or do the functions defined by jQuery on all selected items at the same time? If so why should I use the .each() function like described in the tutorial here: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});
});

jakecigar

Re: Re: Calling element functions

11 years ago

A jQuery is not an Array in the strictest JavaScript sense. It is like an array, that it has a length and it can be indexed. It also inherits all the jQuery methods and plugins.

each allows you to get the elements one at a time to do something different for each one.

.addClass actually does an each inside buried in the jQuery code!

JΛ̊KE

schoenema..

Re: Calling element functions

11 years ago

That means a jQuery is an object wrapped around the selected DOM objects. Something like a container. To access properties / functions of the DOM object you have to select one from inside this object using the '[ ]' operator even if only a single DOM object is held by a jQuery object.
Is that right?

Is there some documentation how a jQuery object looks like? Some basic information about it? I could only find the API documentation that describes only the available functions.

Lutz

jakecigar

Re: Re: Calling element functions

11 years ago

YES that is exactly what a jQuery object is !

When I started with jQuery , all we had, was the source, and a few plugins. I am old.

You can use a browser inspector like firebug or the ones built into chrome or Safari to play with a live jQuery.

Now, there are lots of books written by all calibre of people. I just don’t know which would suit you best.

JΛ̊KE

charlietfl

Re: Calling element functions

11 years ago

nowhere better to learn than following live situations from this forum

follow new posts, try solving what you can then follow how others respond and see what you can add to your own toolbox based on what you tried and other solutions that were provided

Top Reply

Response title

Attachments

jQuery Forum

Calling element functions

Replies(10)

Re: Calling element functions

Re: Calling element functions

Re: Calling element functions

Re: Re: Calling element functions

Re: Calling element functions

Re: Calling element functions

Re: Re: Calling element functions

Re: Calling element functions

Re: Re: Calling element functions

Re: Calling element functions

Statistics

Tags

Actions