Question

Hi I have been trying to create a crossfade plugin with previous and next buttons from an already existing plugin: jqueryfancytransition .This is meant to be an exercise for me and after I manage to understand how it works I want to write my own for an website.I should mention that I am still very new to both Javascript and jQuery and that makes me sometimes waste alot of time on stuff that for others may seem very simple.One of these things simple things is the following:

I have noticed in the plugin that the author uses alot the method .id on the img’s I can’t find it in the jQuery API so I figure it’s a native Javascript method so I tried looking in the w3schools reference for Javascript can’t find it there either.At first I thought that this returns the id of the selected element but to my surprise while trying to create a simple example it didn’t:

<div id="slideshowHolder">
    <img src="nemo.jpg" alt="" id="ion"/>
    <img src="toystory.jpg" alt=""/>
    <img src="walle.jpg" alt=""/>
</div>

$(document).ready(function(){
    console.log($('div').id);
});

This seems to return undefined in the console.So my question is what those this method return and where can I read about it?.

Another thing I wanted to ask is if in jQuery you create a global function like this:

$.globalFunction = function(){}

Update: I know that id is an html element and I can select it in jQuery by using $(‘div#slideshowHolder’) or return it using the attr method but if id is just an html method then what does these piece of code mean

img[el.id] = new Array();

el is an img what those el.id return

Answer 1

Assuming $('div') returned an element (or many elements), they would be jQuery-wrapped elements, not plain DOM elements. Therefor they would not have an id property. If you want to get the id from a jQuery-wrapped element, you would use $('div').attr('id');.

To answer your final question, which I believe you are asking about adding to the jQuery prototype, there are many good articles for this. I would suggest reading over helephant’s site. The jQuery object (jQuery or, as it is usually aliased, $) is just like any other object, so you can extend it’s prototype just like any other object.

To answer your newly edited final question:

img[el.id] = new Array();

This is searching for the property id on the object el, using that value to search for a property el.id on img using the bracket notation since el.id is dynamic. If it finds this property on the img object it will erase it and assign it a new Array() object. If it does not find the property on the img object, it will create a new property on the fly and assign it a new Array() object.