I want to preface my question by saying that I am fully aware of how to use jQuery, and that using jQuery the way it's designed is obviously easier than mixing jQuery with JS in almost all cases, but what I want to ask is more for the sake of a brain exercise than anything.
With that said, I am playing with jQuery, trying to figure out how it works. For example, let's say we have the following HTML (and please also imagine that I have actual URIs for href and src):
...
<div id="pics">
<a href="#"><img src""></a>
<a href="#"><img src""></a>
<a href="#"><img src""></a>
<a href="#"><img src""></a>
</div>
...
Normally, if I wanted to hide all the a tags (and img tags) within the "pics" DIV using jQuery, I would use the following:
$('#pics a').hide();
However, I was trying to imagine how this would work if I used JavaScript for some of the notation, and I came up with the following:
jQuery(document.getElementById('pics').getElementsByTagName('a')).hide();
Obviously, a lot more complex. Now, with that said, what I really wanted to be able to do is (by using JavaScript (remember, this is a brain exercise)) attach a jQuery plug-in to onclick events for those links. Specifically, I wanted to attach the lightBox plug-in (link:
http://leandrovieira.com/projects/jquery/lightbox/). I was thinking that the following would work:
for (i in document.getElementById('pics').getElementsByTagName('a'))
document.getElementById('pics').getElementsByTagName('a')[i].onclick = function() {
jQuery(this).lightBox();
};
Anyway, I thought that would work, but it doesn't. I am wondering if my syntax is the problem. The interesting thing is that, if we go back to the hide example, and set the links and images to be hidden when they're clicked on, then the following works:
for (i in document.getElementById('pics').getElementsByTagName('a'))
document.getElementById('pics').getElementsByTagName('a')[i].onclick = function() {
jQuery(this).hide();
};
So I guess my real question is, why does hide() (a native jQuery function) work, but lightBox() (an external jQuery plug-in) not work with the same notation?
This is my first post, so if I am violating any boards rules, please let me know, but I'm just trying to understand the difference between native function calls and plug-in function calls, especially since the all-jQuery method is almost identical for hide() and lightBox(), as shown below:
$('#pics a').hide();
$('#pics a').lightBox();
Anyway, if anyone could please help me understand this brain-buster, it would be much appreciated. Thank you.