1. Complete analysis of jquery small case 2. jQuery imitation Weibo Project

 

1. Complete analysis of jquery small case

· JQuery Case Study

· Nav. js

Obtain the li loading hover () event under navigation, move the cursor to all ul sub-elements of the current object in the function, stop all running animations on the element, and load the slideDown event; move the mouse out of the function to get all the ul sub-elements of the current object, stop all running animations on the element, and then load the slideUp event.

· Slide. js

Get the element whose id is p1, load the toggle event, click the function for the first time to obtain the previous sibling element of the current element, execute the slideUp event, and change the src attribute of img within the slideUp time, the second time you click the function to obtain the previous sibling element of the current object and add the slideDown event, the callback function is used to obtain the img label element under # p1 and change its src attribute to the opposite image address.

· Scroll. js

Create an interId to obtain the element object whose category is scrollNews and add a hover event to it. Move the first cursor to the function to clear the content of clearInterval (interId) and use the time interval function; the second part of the mouse removal function is to enable and set the setInterval (function () {scrollNews (￥ this)}) time interval function to control repeated execution of the scrollNews function within a certain period of time;

The received parameter obj of the scrollNews function. Obtain all ul sub-elements under the $ ul object and define the lineHeight as the height of the first li sub-element under the $ ul object, let $ ul stop all ongoing animations and load an animation annimate to set the parameter so that the value of its marginTop minus lineHeight. The callback function is $ ul to find the first li element, change its marginTop to 0 and append it to the end of ￥ ul.

· Tree. js

Get the m-expanded span Element Set in combination with the css style, load the click event, the function content is to get the parent element of the ul brother element of the current element, load toggleClass ("m-collapased ");

· Adjj. js

Load the hover event to the ad class of the div, move the cursor to the function clearInterval (interId), and move the cursor to the event function to execute showPic (index) and set the initial index value to 0, in addition, the index ++ is executed, and the index is assigned 0 when the index = Total number of images, and a trigger event is loaded to the element for execution.

Define the showPic (index) function, obtain the ul, stop the animation, and execute the animation. The animation parameter is top:-$ (". ad "). height () * index + "px", 500; addClass ("on"), siblings () when obtaining the image's li to determine the eq (index (). RemoveClass ("on") mouseleave function.

· ImgSlide. js

Load the click event for the goLeft and goRight classes respectively. The first time function is used to determine that when the current page = total page number, the initial value of the current page is set to 1, the value of the total number of entries is the length of the total image, set the number of entries per page to 4, and obtain the total number of pages as Math. ceil (total/pagesize), get the div coating width and width; set the animation of the current layer to stop animation and let the temperament left: 0, set the initial value to 1; otherwise, let left-= width, page ++;

The goRight class click function is used to stop the animation of the current layer when the current page is determined to be 1, and the animation with left being "-=" + pages-1 multiplied by width is executed; in other cases, left "+ =" + width; page --;

· Custom jQuery object Extension Method

$. Fn. extend ({

Check: function (){

$ (": Checkbox"). each (function (){

$ (This). attr ({"checked": "true "});

})

}

})

You can directly call the check Method in the file!

2. jQuery imitation Weibo Project

Weibo System Process Analysis

Mvc Framework

Console

Paging display helper

Display desk

User Registration: when a user is successfully registered, the php console automatically generates n personal information data tables for the user, such as the friend list, personal favorites table, and personal private email table.

Publish content: After you click Publish content, the data is automatically placed in a data table that stores various information about the published content. At the same time, each time a piece of content is generated, a comment table is generated based on this content, it is used to store various comments published in this article. When a comment is generated, the php console automatically generates a reply table for this comment to store each reply message of this comment.

Personal private email: After a sends a private email to B, the personal private email table of a and B will store the id and other information of the private email. Meanwhile, when the private email is generated, generate a reply table for this private message to store all the reply information for this message.

Follow: When a clicks the follow icon of B, that is, when a follows B, that is, when a becomes a fan of B, in the php console, the name of a is placed in the fans field of the data table in the personal friend list of B, and the name of B is placed in the regard FIELD OF;

Personal favorites: Click the favorites button of the content to upload the id of the clicked content to the collectId of the personal favorite data table for traversal.