[jQuery] Inner workings of jQuery
I was wondering if someone could explain a few things about the inner
workings of jQuery.
Recently I've been doing quite a bit of work with Javascript and
decided to make a small library to aid in the validation of form data
with the main reason being to simply increase my knowledge/skill with
JS. I have also been using jQuery a lot lately and really liked the
way you can chain multiple methods together: like this $
('#id1').click().fadeOut('slow').
I decided to design my library in such a way that it could do this too
and have successfully been able to chain methods together. I
understand the basics of how to chain methods together but when I
started thinking of adding events into the mix I realized I didn't
really know how to proceed. Ideally I'd like to add the ability to
call click(), change(), and other event methods like jquery does but I
am not really sure how to go about it.
So I guess my first question has to do is what does jquery do when one
of the event handling methods are call like .click() or .change().
Does calling one of those methods delay the rest of the methods called
after it? For example, if $('#id1').click().fadeOut('slow') was called
obviously we don't want fadeOut() to be called until the #id1 element
is clicked. So what does jquery do to the methods following to prevent
them from being run immediately and how does it do so?
Second, I noticed in the jQuery code that there were not any click,
change, keydown, etc. methods. I did see this bit of code but am not
quite certain what is going on here and how this allows a .click() for
example, to be chained to the other jquery methods.
jQuery.each( ("blur,focus,load,resize,scroll,unload,click,dblclick," +
"mousedown,mouseup,mousemove,mouseover,mouseout,change,select," +
"submit,keydown,keypress,keyup,error").split(","), function(i,o){
// Handle event binding
jQuery.fn[o] = function(f){
return f ? this.bind(o, f) : this.trigger(o);
};
});
Here is a small bit of my code as very brief example of what I'm doing
right now.
FRMCHK = function(_id){
var _id = document.getElementById(_id);
var _value = _id.value;
return {
numberOnly: function(_value)
{
// determine if field is only number
return this;
},
alphaOnly: function(_value)
{
// determince if field is only alpha
return this;
}
};
};
I welcome any tips/advice.