Examples of JavaScript, jQuery, HTML5, and Node. js-Reading Notes 3, jquerynode. js

Examples of JavaScript, jQuery, HTML5, and Node. js-Reading Notes 3, jquerynode. js

There are many technologies and many examples, so you have to learn and practice them slowly !! The book I learned now is [JavaScript practice-JavaScript, jQuery, HTML5, and Node. js instances]

JavaScript, jQuery, HTML5, and Node. js instances-Reading Notes 2

3.3 respond to mouse actions

Figure 3-2 has an effect. You need to hover your mouse over the image to display the desired image. In this case, you need to add an event to the corresponding area.

3.3.1 respond to the small photo click action

In the Code 3.2.3, the eg for displaying the thumbnail list is provided. the showThumb () method is used to display large images when you click a small image. the showBig () method only responds to the click event when you click a small image. addListener () method. For the code, see [Example 3-4 ].

[Example]3-4Responds to the click action of a small photo]

1. eg. showThumb = function (group) {2.var ul = eg. $ ("smallPhotosList"); 3. ul. innerHTML = ''; // clear the old content for each display. 4. var start = (group-1) * eg. groupSize; // calculate the start position of the required data. var end = group * eg. groupSize // calculate the end position of the required data 6. for (vari = start; (I <end & I <eg. data. length); I ++) {7. var li = document. createElement ("li"); 8. li. innerHTML = ''; 9. (function (I) {10. eg. addListener (li, "click", function () {// added a click event listener 11. eg. showNumber = I; // record the selected icon number for other functions to call 12. eg. showBig (); 13 .}); 14 .}) (I); // pass I as a value 15. ul. appendChild (li); 16 .} 17 .}; 18. eg. showBig = function () {// display the larger picture 19 based on a specific number. eg. $ ("bigPhotoSrc "). src = eg. $ ("thumb" + eg. showNumber ). src. replace ("thumb", "photo") 20 .};

In Example 3-4, Row 3 shows the code for responding to the click action of a small photo. A closure is used, that is, a self-called anonymous function. (Function () {}) () is the simplest closure. The content in braces is executed sequentially. If you remove lines 9th and 14th of the code, you will find that the last one in the current group photo is always displayed. In the for statement body, you usually need to use a closure to upload the variable value to the internal binding event.

The most combat JavaScript

Confused, I have learned javascript and css, followed by jQuery or HTML5 <canvas>. Daniel answers questions from younger brother.

Learn jQuery first. HTML5 currently has compatibility issues, and graphics are generally made using SVG or Flash.

Written by yamoo, HTML5 + CSS3 + the beauty of jQuery applications (Korea). Case Resources in the book

People's post and telecommunications official website provides source code download