Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?

2007-01-16 Thread PragueExpat 

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') ?

2007-01-16 Thread PragueExpat 

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):

---

html
head
 script type=text/javascript src=jquery.js/script
/head
body
form
input id=test class=test type=text nametest
input id=test2 class=test type=text nametest
/form
 script type=text/javascript
!--
$(document).ready(function(){
  var t = $(.test);
  var s;
  for (property in t)
   {
s = s + brbrhr /brbr +property.toString()+ :
+t[property].toString();
   }
   document.write(s.toString());
});
//--
/script
/body
/html

---

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') ?

2007-01-16 Thread Mike Alsup 
 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') ?

2007-01-16 Thread Michael Geary 
 (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') ?

2007-01-16 Thread Yehuda Katz 

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):

---

html
head
script type=text/javascript src=jquery.js/script
/head
body
form
input id=test class=test type=text nametest
input id=test2 class=test type=text nametest
/form
script type=text/javascript
!--
$(document).ready(function(){
  var t = $(.test);
  var s;
  for (property in t)
   {
s = s + brbrhr /brbr +property.toString()+ :
+t[property].toString();
   }
   document.write(s.toString());
});
//--
/script
/body
/html

---

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') ?

2007-01-16 Thread Daniel McBrearty 
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):
 
  ---
 
  html
  head
  script type=text/javascript src=jquery.js/script
  /head
  body
  form
  input id=test class=test type=text nametest
  input id=test2 class=test type=text nametest
  /form
  script type=text/javascript
  !--
  $(document).ready(function(){
var t = $(.test);
var s;
for (property in t)
 {
  s = s + brbrhr /brbr +property.toString()+ :
  +t[property].toString();
 }
 document.write(s.toString());
  });
  //--
  /script
  /body
  /html
 
  ---
 
  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

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?

2007-01-16 Thread Aaron Heimlich 

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') ?

2007-01-15 Thread Daniel McBrearty 
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/

Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?

2007-01-15 Thread Daniel McBrearty 
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/