JS framework use and Migration (2)

B. method 1. method call Prototype: Javascript code $ (& amp; #39 ;. class & amp; #39 ;). invoke (& amp; #39; show & amp; #39;); Element. show ($ (& quot; id & quot;); $ (& quot; id & quot ;). invoke (& quot; sho

B. Method
1. method call
Prototype:

Javascript code
$ ('. Class'). invoke ('show ');
Element. show ($ ("id "));

$ ("Id"). invoke ("show") is an error because $ ("id") is an HTML Element Object and there is no invoke method.

JQuery:
Javascript code
$ J ("# id"). show ();
$ J (". class"). show ();

2. iteration:
Prototype:
Javascript code
['Hello', 'World']. each (function (s, index ){
Alert (index + ':' + s );
});

It can be seen that the array object of javascript is extended and the iteration function is added.

JQuery:
Javascript code
$ J (['hello', 'World']). each (function (s ){
Alert (s + ":" + this );
});

Wrap it into a jQuery object and then operate it. It is worth noting that in the callback function, this is assigned as the current element.

3. event listening
JQuery is a better place than Prototype, that is, the ready () event.
Javascript code
$ J (document). ready (function () {}); // or
 
$ J (function (){});

Prototype can only pass through
Javascript code
Event. observe (window, 'load', function (){})

Later, we provided:
Javascript code
Document. observe ("contentloaded", function (){})

Now change:
Javascript code
Document. observe ('dom: loaded', function (){})

It is worth noting that these methods can be called multiple times. After an event is triggered, relevant code can be executed according to the program in the call sequence.
Window. onload events like BOM itself will be overwritten if values are assigned multiple times.
Javascript code
Function out1 ()
{
Console. log ("output 1 ");
}
Function out2 ()
{
Console. log ("output 2 ");
}
Window. onload = out1;
Window. onload = out2;

The above code will only output "output 2", and the following two sections of code will output "output 3" and "output 4" in sequence ":
Prototype:
Javascript code
Document. observe ('dom: loaded', function (){
Console. log ("output 3 ");
});
Document. observe ('dom: loaded', function (){
Console. log ("output 4 ");
});

JQuery:
Javascript code
$ J (function (){
Console. log ("output 3 ");
 
});
 
$ J (function (){
Console. log ("output 4 ");
 
});

Prototype:
Javascript code
Event. observe ('btnok', 'click', btnHandler );

Or
Javascript code
$ ('Btnok'). observe ('click', btnHandler );

It is worth noting that for the same event of the same element, register the same handler and Prototype only once.

That is to say, the following two calls to observe registration:
Prototype
Javascript code
Function btnHandler ()
{
Console. log ("btn clicked! ");
}
Event. observe ('btnok', 'click', btnHandler );
$ ('Btnok'). observe ('click', btnHandler );

However, for the same element and event, you can use different handler to register multiple times.
Javascript code
Function btnHandler ()
{
Console. log ("btn clicked! ");
}
Function btnHandler1 ()
{
Console. log ("btn clicked 1! ");
}
Event. observe ('btnok', 'click', btnHandler );
$ ('Btnok'). observe ('click', btnHandler1 );

To remove the event binding process, btnHandler uses the following statement:
Javascript code
$ ('Btnok'). stopObserving ('click', btnHandler );

 

JQuery is:
Javascript code
$ J ('# btnok'). bind ('click', btnHandler );

Or a more flexible and concise method:
Javascript code
$ J ('# btnok'). click (btnHandler );

It is worth noting that jQuery can register the same handler for the same event of the same element multiple times.
Javascript code
Function btnHandler ()
{
Console. log ("btn clicked! ");
}
$ J ('# btnok'). bind ('click', btnHandler );
$ J ('# btnok'). click (btnHandler );

After you click the element btnok, the code above will be output twice in a row.

Different handler can be used for the same element and event. Of course, it can be registered multiple times.
Javascript code
Function btnHandler ()
{
Console. log ("btn clicked! ");
}
Function btnHandler1 ()
{
Console. log ("btn clicked 1! ");
}
$ J ('# btnok'). bind ('click', btnHandler );
$ J ('# btnok'). click (btnHandler1 );

To remove the event binding process, btnHandler uses the following statement:
Javascript code
$ J ('# btnok'). unbind ('click', btnHandler );

4. Event bubbling
For example, you may need to process click events for a link and do not want it to enter the target page of The Link href attribute. Instead, you want to perform other operations on the link.
Protoype
Javascript code
$ ('Link'). observe ('click', function (event ){
Console. log (this); // outputs the link element.
Console. log (this. readAttribute ('href '));
Event. stop ();
});

JQuery:
Javascript code
$ J ('# link'). click (function (event ){
Console. log (this); // The output is empty. event.tar get is the html Element Object.
Lele.log(javasj(event.tar get). attr ('href '); // you can call the attr method by converting $ j to a jQuery object.
Event. preventDefault ();
});

In the above Code, after clicking the link, it will not be redirected to the target page. Instead, it stops directly after the output is executed.