JQuery Learning 1: JQuery Learning

JQuery Learning 1: JQuery Learning

Learn about JQuery and how to create, call, and close the mode window.

(Document ). ready (function () {/* Background Resizer-Adaptive Background browser size */$ ("# bodyBackground "). ezBgResize ();/* modal windows */$ ('a. modal '). click (function () {/* attr-get the attribute value, for example, tagName */var modalID = $ (this ). attr ('rel '); // get the name of the modal/* fade in the modal window and add a close button to it * // ** fadeIn-fade into hidden element * prepend-in the selected content inserted at the beginning of the element */$ ('#' + modalID ). fadeIn (). prepend ('<a href = "#" class = "close"> <I Mg src = "grfx/close_button.png" class = "close_button" title = "Close Window" alt = "Close"/> </a> '); /** define the margins so that the modal is centered properly on the screen * we add 80px to the height/width to accomodate for the padding and border * width defined in the css */ var modalMarginTop = ($ ('#' + modalID ). height () + 80)/2; var modalMarginLeft = ($ ('#' + modalID ). width () + 80)/2;/* ap Ply the margins to the modal window */$ ('#' + modalID).css ({'margin-top':-modalMarginTop, 'margin-left':-modalMarginLeft }); /* fade in the shade! (Tired of the cheesy jokes yet ?) * // * Append-insert content at the end of the selected element. */$ ('Body '). append ('<div id = "modalShade"> </div>'); // add the shade layer to bottom of the body ('your modalshade'upload.css ('opacity ', 0.7 ). fadeIn (); // set the opacity with jQuery to avoid all of the nasty CSS needed for IE return false; // keep the link from acting naturally }); /** close the modal and pull down the shade * // * live-binds the event function. the syntax is $ (selector ). live (event, data, function), live function does not support DOM traversal */$ ('a. Close, # modalShade '). live ('click', function () {// clicking on the close or shade layer/* parent-return the direct parent element of the selected element, the method will only traverse the DOM tree at the upper level */var thisModalID = $ ('a. close '). parent (). attr ('id'); $ ('# modalShade, #' + thisModalID ). fadeOut (function () {/* remove-delete the selected element (and its child element). This method also accepts a parameter that allows you to filter the deleted element. For example, remove ('. del ') */$ (' # modalShade,. close '). remove (); // remove the shade and the close button}); return false ;});

I want to learn jquery, but I don't know which version of jquery is better. I can recommend it. I am a beginner of jquery.

Considering the Chinese browser environment, it is recommended that 1.9 and later versions 1. * and 1. * have a basic compatibility, so the 1.7.2 suggestion is ignored directly. Besides, the document of that version is hard to find.
How does jQuery learn?
1. Read the document, modify the example, carefully read the document on the official website, and run the example in your browser, at the same time, modify these examples based on your own design opinions to deepen your understanding of the Code.
2. If you want to learn more deeply, you should look at the jQuery code.

Is there any better book to learn about jquery?

I personally think that jqueryknowledge on www.w3school.com.cnis a little old. I recommend www.css 88.com/jqapi-1.9. this is a Chinese version of JQuery API. I believe it will be of great help to you to learn JQuery! If you agree, you can accept it. Thank you!