Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
On 1/16/07, Daniel McBrearty <[EMAIL PROTECTED]> wrote: (I think that's right ... now I mention it I'm not quite sure if $ is an object reference or an operator ... ) $ is an alias to a function named "jQuery", which returns a jQuery object. If you're familiar with Object Oriented Programming, you can think of $(...) and jQuery(...) as sort of like constructor functions. Actually, now that I think about it var $foo = jQuery("#foo"); is just a shortcut for var $foo = new jQuery("#foo"); From the jQuery source: var jQuery = function(a,c) { // If the context is global, return a new object if ( window == this ) return new jQuery(a,c); // rest of "jQuery" function. Typical usage of jQuery(...) will trigger the code on line 4 -- Aaron Heimlich Web Developer [EMAIL PROTECTED] http://aheimlich.freepgs.com ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
thanks very much everyone for helping clarify things. This helps a lot. Yes, it was using firebug that helped me to start figuring what was going on. May I suggest that some extracts of this thread, or whatever, find their way into the "getting started" docs? It could maybe be just a paragraph or two. Now that it is laid out in front of me it's pretty obvious, but when you come into the thing cold, these things are not obvious. I think it would be a good idea to explicitly state what the object is, and that $ refers to it (I think that's right ... now I mention it I'm not quite sure if $ is an object reference or an operator ... ) - anyhow just a bit of clarification of the basics. The reason I like jQuery very much, is because my needs are simple, and I got it doing useful things very quickly - at the same time it doesn't seem at all restricted as the plugin architecture promises that more advanced things are also there. Just a little extra explanation would really be the icing on the cake, I think. On 1/16/07, Yehuda Katz <[EMAIL PROTECTED]> wrote: > There's a reasonable explanation of the jQuery object in the Visual jQuery > Magazine at > http://www.visualjquery.com/magazine/issue1.01.pdf > > > On 1/16/07, PragueExpat <[EMAIL PROTECTED]> wrote: > > > > Thanks for the explaination. The reason for my request was my curiosity of > > what exactly makes up the JQuery Object. For example, I didn't understand > > that [0] is a reference to the first DOM object. > > > > I ran this to try to look at the Object (using 1.04): > > > > --- > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > --- > > > > and learned quite a bit. (Although the page never fully loads, not sure > > why). Anyway, I would recommend looking at this page for anyone who wants > to > > learn more. > > > > (If there is a better way to look at the Object, please post here) > > > > - Rich > > > > > > > > malsup wrote: > > > > > >> I second the request for a good understanding of what the JQuery object > > >> is. > > > > > > > > > The jQuery object is just a JavaScript object (like Date or Array). > > > It encapsulates zero or more DOM elements and lets you manipulate > > > those elements using the jQuery API. > > > > > > var jq = $('.myClass'); > > > > > > The statement above selects all elements that have a class of > > > 'myClass' and wraps them in an object - the jQuery object. Once those > > > elements are wrapped in a jQuery object you can use the jQuery API to > > > do all kinds of things with them. Like show them all: > > > > > > jq.show(); > > > > > > or add a click event handler to all of them: > > > > > > jq.click(function() { alert ('I was clicked'); }); > > > > > > or access each of the selected DOM elements: > > > > > > jq.each(function(i) { > > > // 'this' is the DOM element inside the 'each' method > > > this.innerHTML = 'my index is ' + i; > > > }); > > > > > > That's really the nuts and bolts of it. jQuery lets you easily select > > > elements in the DOM and do something with them. It's selection > > > capabilities are very powerful and very fast. And it's API is quite > > > extensive. > > > > > > You'll also find that most of the functions in the jQuery API return > > > the jQuery object on which they operate. This means they are > > > chainable and this is great when you want to do more than one thing > > > with the selected elements. The examples above could be combined into > > > a single statement like this: > > > > > > $('.myClass').show().click(function() { > > > alert ('I was clicked'); > > > }).each(function(i) { > > > this.innerHTML = 'my index is ' + i; > > > }); > > > > > > Mike > > > > > > ___ > > > jQuery mailing list > > > discuss@jquery.com > > > http://jquery.com/discuss/ > > > > > > > > > > -- > > View this message in context: > http://www.nabble.com/what%27s-the-difference-between-document.getElementById%28%27id%27%29-and-%24%28%27-id%27%29---tf3017662.html#a8391034 > > Sent from the JQuery mailing list archive at Nabble.com. > > > > > > ___ > > jQuery mailing list > > discuss@jquery.com > > http://jquery.com/discuss/ > > > > > > -- > Yehuda Katz > Web Developer | Wycats Designs > (ph) 718.877.1325 > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > > > -- Daniel McBrearty email : danielmcbrearty at gmail.com www.engoi.com : the multi - language vocab trainer BTW : 0873928131 __
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
There's a reasonable explanation of the jQuery object in the Visual jQuery Magazine at http://www.visualjquery.com/magazine/issue1.01.pdf On 1/16/07, PragueExpat <[EMAIL PROTECTED]> wrote: Thanks for the explaination. The reason for my request was my curiosity of what exactly makes up the JQuery Object. For example, I didn't understand that [0] is a reference to the first DOM object. I ran this to try to look at the Object (using 1.04): --- --- and learned quite a bit. (Although the page never fully loads, not sure why). Anyway, I would recommend looking at this page for anyone who wants to learn more. (If there is a better way to look at the Object, please post here) - Rich malsup wrote: > >> I second the request for a good understanding of what the JQuery object >> is. > > > The jQuery object is just a JavaScript object (like Date or Array). > It encapsulates zero or more DOM elements and lets you manipulate > those elements using the jQuery API. > > var jq = $('.myClass'); > > The statement above selects all elements that have a class of > 'myClass' and wraps them in an object - the jQuery object. Once those > elements are wrapped in a jQuery object you can use the jQuery API to > do all kinds of things with them. Like show them all: > > jq.show(); > > or add a click event handler to all of them: > > jq.click(function() { alert ('I was clicked'); }); > > or access each of the selected DOM elements: > > jq.each(function(i) { > // 'this' is the DOM element inside the 'each' method > this.innerHTML = 'my index is ' + i; > }); > > That's really the nuts and bolts of it. jQuery lets you easily select > elements in the DOM and do something with them. It's selection > capabilities are very powerful and very fast. And it's API is quite > extensive. > > You'll also find that most of the functions in the jQuery API return > the jQuery object on which they operate. This means they are > chainable and this is great when you want to do more than one thing > with the selected elements. The examples above could be combined into > a single statement like this: > > $('.myClass').show().click(function() { > alert ('I was clicked'); > }).each(function(i) { > this.innerHTML = 'my index is ' + i; > }); > > Mike > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > > -- View this message in context: http://www.nabble.com/what%27s-the-difference-between-document.getElementById%28%27id%27%29-and-%24%28%27-id%27%29---tf3017662.html#a8391034 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ -- Yehuda Katz Web Developer | Wycats Designs (ph) 718.877.1325 ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
> (If there is a better way to look at the Object, please post here) The very best way to understand what JavaScript code is going and explore objects is to use any JavaScript debugger, such as Firebug or Venkman for Firefox, or the Microsoft Script Editor for IE. If you don't have a JavaScript debugger that you are comfortable with, you're working too hard! :-) -Mike ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
> I ran this to try to look at the Object (using 1.04): > and learned quite a bit. (Although the page never fully loads, not sure Yes, that's the API. Those are the properties and methods on the jQuery object. You can view this information in a more useful format online. Sam posted some very useful links here: http://webdevel.blogspot.com/2007/01/jquery-documentation.html ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
Thanks for the explaination. The reason for my request was my curiosity of what exactly makes up the JQuery Object. For example, I didn't understand that [0] is a reference to the first DOM object. I ran this to try to look at the Object (using 1.04): --- --- and learned quite a bit. (Although the page never fully loads, not sure why). Anyway, I would recommend looking at this page for anyone who wants to learn more. (If there is a better way to look at the Object, please post here) - Rich malsup wrote: > >> I second the request for a good understanding of what the JQuery object >> is. > > > The jQuery object is just a JavaScript object (like Date or Array). > It encapsulates zero or more DOM elements and lets you manipulate > those elements using the jQuery API. > > var jq = $('.myClass'); > > The statement above selects all elements that have a class of > 'myClass' and wraps them in an object - the jQuery object. Once those > elements are wrapped in a jQuery object you can use the jQuery API to > do all kinds of things with them. Like show them all: > > jq.show(); > > or add a click event handler to all of them: > > jq.click(function() { alert ('I was clicked'); }); > > or access each of the selected DOM elements: > > jq.each(function(i) { > // 'this' is the DOM element inside the 'each' method > this.innerHTML = 'my index is ' + i; > }); > > That's really the nuts and bolts of it. jQuery lets you easily select > elements in the DOM and do something with them. It's selection > capabilities are very powerful and very fast. And it's API is quite > extensive. > > You'll also find that most of the functions in the jQuery API return > the jQuery object on which they operate. This means they are > chainable and this is great when you want to do more than one thing > with the selected elements. The examples above could be combined into > a single statement like this: > > $('.myClass').show().click(function() { > alert ('I was clicked'); > }).each(function(i) { > this.innerHTML = 'my index is ' + i; > }); > > Mike > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > > -- View this message in context: http://www.nabble.com/what%27s-the-difference-between-document.getElementById%28%27id%27%29-and-%24%28%27-id%27%29---tf3017662.html#a8391034 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
> I second the request for a good understanding of what the JQuery object is. The jQuery object is just a JavaScript object (like Date or Array). It encapsulates zero or more DOM elements and lets you manipulate those elements using the jQuery API. var jq = $('.myClass'); The statement above selects all elements that have a class of 'myClass' and wraps them in an object - the jQuery object. Once those elements are wrapped in a jQuery object you can use the jQuery API to do all kinds of things with them. Like show them all: jq.show(); or add a click event handler to all of them: jq.click(function() { alert ('I was clicked'); }); or access each of the selected DOM elements: jq.each(function(i) { // 'this' is the DOM element inside the 'each' method this.innerHTML = 'my index is ' + i; }); That's really the nuts and bolts of it. jQuery lets you easily select elements in the DOM and do something with them. It's selection capabilities are very powerful and very fast. And it's API is quite extensive. You'll also find that most of the functions in the jQuery API return the jQuery object on which they operate. This means they are chainable and this is great when you want to do more than one thing with the selected elements. The examples above could be combined into a single statement like this: $('.myClass').show().click(function() { alert ('I was clicked'); }).each(function(i) { this.innerHTML = 'my index is ' + i; }); Mike ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
I second the request for a good understanding of what the JQuery object is. Daniel McBrearty wrote: > > ok, I got it. To access the element I need to access $('#id')[0] > > What confused me here is that I wasn't really clear what the "jquery > object" actually is. I have looked through the various intro and > tutorial material a few times, and managed to get the library to do > some useful things, but I missed this. > > Is there anywhere where this is explained? > > thanks > > Daniel > > On 1/15/07, Daniel McBrearty <[EMAIL PROTECTED]> wrote: >> sorry ... not the smartest question. of course, one returns the >> element, one returns the jquery object. >> >> What I needed was $('#id').attr( { autocomplete : "off" } ); >> >> I still have a problem to set the focus though. There is no error shown >> for >> >> $('#id').focus(); >> >> but the focus is not set ... >> >> >> On 1/15/07, Daniel McBrearty <[EMAIL PROTECTED]> wrote: >> > I'm changing some old js I had to use jQuery. >> > >> > I used to have a function like this (to select a certain text input on >> > a form and automatically focus on it) ... : >> > >> > window.onload = function() { >> >self.focus(); >> > >> document.getElementById("userresponse").setAttribute("autocomplete","off"); >> >document.getElementById("userresponse").focus(); >> > } >> > >> > which worked fine ... then I replace it with this: >> > >> > $(function () { >> >self.focus(); >> >$("#userresponse").setAttribute("autocomplete","off"); >> >$("#userresponse").focus(); >> > }); >> > >> > which fails to select the text box. why not? I thought these were >> > equivalent excpet the jQuery version loads sooner? >> > >> > thanks >> > >> > Daniel >> > >> > >> > -- >> > Daniel McBrearty >> > email : danielmcbrearty at gmail.com >> > www.engoi.com : the multi - language vocab trainer >> > BTW : 0873928131 >> > >> >> >> -- >> Daniel McBrearty >> email : danielmcbrearty at gmail.com >> www.engoi.com : the multi - language vocab trainer >> BTW : 0873928131 >> > > > -- > Daniel McBrearty > email : danielmcbrearty at gmail.com > www.engoi.com : the multi - language vocab trainer > BTW : 0873928131 > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > > -- View this message in context: http://www.nabble.com/what%27s-the-difference-between-document.getElementById%28%27id%27%29-and-%24%28%27-id%27%29---tf3017662.html#a8389635 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
sorry ... not the smartest question. of course, one returns the element, one returns the jquery object. What I needed was $('#id').attr( { autocomplete : "off" } ); I still have a problem to set the focus though. There is no error shown for $('#id').focus(); but the focus is not set ... On 1/15/07, Daniel McBrearty <[EMAIL PROTECTED]> wrote: > I'm changing some old js I had to use jQuery. > > I used to have a function like this (to select a certain text input on > a form and automatically focus on it) ... : > > window.onload = function() { >self.focus(); > > document.getElementById("userresponse").setAttribute("autocomplete","off"); >document.getElementById("userresponse").focus(); > } > > which worked fine ... then I replace it with this: > > $(function () { >self.focus(); >$("#userresponse").setAttribute("autocomplete","off"); >$("#userresponse").focus(); > }); > > which fails to select the text box. why not? I thought these were > equivalent excpet the jQuery version loads sooner? > > thanks > > Daniel > > > -- > Daniel McBrearty > email : danielmcbrearty at gmail.com > www.engoi.com : the multi - language vocab trainer > BTW : 0873928131 > -- Daniel McBrearty email : danielmcbrearty at gmail.com www.engoi.com : the multi - language vocab trainer BTW : 0873928131 ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
ok, I got it. To access the element I need to access $('#id')[0] What confused me here is that I wasn't really clear what the "jquery object" actually is. I have looked through the various intro and tutorial material a few times, and managed to get the library to do some useful things, but I missed this. Is there anywhere where this is explained? thanks Daniel On 1/15/07, Daniel McBrearty <[EMAIL PROTECTED]> wrote: > sorry ... not the smartest question. of course, one returns the > element, one returns the jquery object. > > What I needed was $('#id').attr( { autocomplete : "off" } ); > > I still have a problem to set the focus though. There is no error shown for > > $('#id').focus(); > > but the focus is not set ... > > > On 1/15/07, Daniel McBrearty <[EMAIL PROTECTED]> wrote: > > I'm changing some old js I had to use jQuery. > > > > I used to have a function like this (to select a certain text input on > > a form and automatically focus on it) ... : > > > > window.onload = function() { > >self.focus(); > > > > document.getElementById("userresponse").setAttribute("autocomplete","off"); > >document.getElementById("userresponse").focus(); > > } > > > > which worked fine ... then I replace it with this: > > > > $(function () { > >self.focus(); > >$("#userresponse").setAttribute("autocomplete","off"); > >$("#userresponse").focus(); > > }); > > > > which fails to select the text box. why not? I thought these were > > equivalent excpet the jQuery version loads sooner? > > > > thanks > > > > Daniel > > > > > > -- > > Daniel McBrearty > > email : danielmcbrearty at gmail.com > > www.engoi.com : the multi - language vocab trainer > > BTW : 0873928131 > > > > > -- > Daniel McBrearty > email : danielmcbrearty at gmail.com > www.engoi.com : the multi - language vocab trainer > BTW : 0873928131 > -- Daniel McBrearty email : danielmcbrearty at gmail.com www.engoi.com : the multi - language vocab trainer BTW : 0873928131 ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/