JQuery practical tutorial source code

There are 6 chapters in total, JQuery practical source code.

Lecture 1:

JQuery and other development knowledge learned in this section:
1.HTML is responsible for page content, CSS is responsible for page style, and Javascript is responsible for page behavior
2. There should be DOCTYPE in HTML to inform the browser of the rendering and display method
3. You can define a div or span node first to display the data returned by the server later.
4. The border attribute can control the border of page elements
5.background-*** can control the background image, its position, and the way it is displayed repeatedly
6. You can use #idname or .classname to define a custom html node style
7. You can use $(document).ready(function(){}) to define the method that needs to be executed when the page is loaded.
8. You can obtain the specified node of the page through the $() method, and the parameter is a certain css selector
9. You can execute various Jquery methods on the jquery object returned by the $() method to obtain data, define events, and perform operations.
10. The val() method can obtain the value attribute value of the node
11.html() method can set the html content in a node
12.The click() method can respond to mouse click events
13. The keyup() method can respond to the keyboard pop-up event.
14. The $.get() method can interact with the server in get mode. The registered callback method will be called when the data comes back. This method will receive a plain text parameter that represents the data returned by the server.
15.addClass() removeClass() method can add or delete a class
to a node 16. The data sent to the server is encoded twice in JavaScript and then URLDecoded once in UTF-8 in the server code, which can solve the problem of Chinese garbled characters.



Lecture 2

JQuery and other development knowledge learned in this section:
1.table can contain thead and tbody
2. The content of the header can be placed in th
3.table{} is called a tag selector and can affect all tables on the entire page.
4.table td{} represents all tds contained in the table.
5. You can use border-collapse: collapse to merge the borders of cells in the table.
6. When th has a background color, the background color defined on tr to which th belongs will be invalid.
7.$(function(){}) is a simplified way of writing $(document).ready(function(){})
8.$("tbody tr") can return all tr ​​nodes in tbody
9.$("tbody tr:even") can return all tr ​​nodes with even index values ​​in tbody
10. The css method can be used to set or get the css attribute of the node. The parameter name is the css attribute name.
11.JQuery’s object content contains the DOM node corresponding to the selector, which is saved in the form of an array
12. The get method can obtain a certain DOM node contained in the JQuery object
13.This in function represents the object that executes this function
14. When the parameter of the $() method is a DOM object, this method is equivalent to converting the DOM object into a JQuery object.
15. The children method can obtain the child nodes of a node, and parameters can be specified to limit the content of the child nodes.
16. If the JQuery object returned by the selector contains multiple DOM nodes, when an event like click is registered on this object, all DOM nodes will be used for the event
17.html method can set or get the HTML content of the node
18. The val method can get or set the value of the node
19. If the parameter of the $() method is a correct piece of HTML text, you can create a DOM node and package it into a JQuery object
20. Most of JQuery's methods will return the JQuery object that executes this method, so you can use chain methods to write code for JQuery.
21.The width method can set or get the width of a node
22.The appendTo method can append a node to all the child nodes of another node
23. Preventing event delivery can make the event of the current node return false
24. The trigger method can trigger a certain javascript event to occur.
25. The parameter function of an event method in JQuery can define an event parameter. JQuery will block the browser's event differences and pass us a usable event object
26. There is a which attribute on the JQuery event object to obtain the key value of the keyboard key
27.13 represents the Enter key, 27 represents the ESC key


Lecture 3

JQuery and other development knowledge learned in this section:
1. Menu items in the page can be represented by nested ul and li
2. The outermost layer of the menu is ul. Each main menu in one layer is placed in a li. If there is a submenu, create a new ul in the li of the main menu, and then nest it in order to build a multi-layered menu.
3. In the browser, the ul and li elements have dot identifiers in front of the text by default, and the li element will be indented. Opera browser is special, and the identifier of li is different from other browsers.
4. When the list-style attribute value is none, you can clear the small dots in front of ul and li
5. To clear the indent value of the submenu, both padding and margin must be 0. IE6 and IE7 can only clear the indent value when the margin is also 0
6. You can use background-image to specify the background image of an element. If the background image is smaller than the actual size of the element, the background image will automatically be repeated horizontally and vertically until it fills the entire area
7. You can use bakcground-repeat to control the repeated filling method of the background image.
8. If both a background image and a background color are defined on an element, the background color will not be displayed where there is a background image
9.When the text-decoration attribute value is none, you can cancel the underline on the text
10.Background-position can control the position of the background image. The attribute value can be either a numerical value or center, left, and top values ​​to control the horizontal and vertical positions. There are two values ​​for this attribute, the first corresponds to the horizontal direction, and the second corresponds to the vertical direction
11.The value of background-image is none, which means there is no background image
12.When the value of background-repeat is no-repeat, the background image will not be displayed repeatedly in the area where it is located.
13. Browsers other than IE6 can make the a element fill the area by setting the display value to block. For IE6, you need to set the display to inline-block and set the width of a.
14. The value of display is none and can be used to hide elements.
15. The difference between .main a and .main > a is that the former selects all a nodes inside the elements of this class of .main, while the latter only selects a nodes among the child nodes of .main
16. The show and hide methods can be used to show or hide elements. The effect without parameters is the same as modifying the display attribute of css. The parameter can be a number in milliseconds, or the three characters 'slow', 'normal', and 'fast',
You can control the time required to display or hide. Note that the animation effect is achieved by continuously changing the width and height of the element.
17. The toggle method is more powerful. It can save us from judging whether the element is displayed or hidden, and directly hide the displayed elements and display the hidden elements. The method of using parameters is the same as show and hide.
18. slideDown and slideUp can achieve the effect of scrolling down or up. In fact, the animation effect is achieved by modifying the height of the element within a specified time. It should be noted that the case where the parameters of these two methods are empty is different from show and hide.
19.slideToggle and toggle achieve similar effects
20.DOCTYPE has an impact on animation in JQuery. When there is no DOCTYPE definition, JQuery's animation will have a bad flickering effect in IE.
21. The value of float is left, which allows all elements that are originally located on one row to float to the left in one row.
22. You can define the same style for multiple selectors, and use, to separate the selectors. Similarly for JQuery's $ method, you can also pass in a selector.



Lecture 4

JQuery and other development knowledge learned in this section:
1. A group of tags is managed by a ul, and each tag is a li in the ul; the content under the tag is managed by a div
2. The elements following the floating element (float) will surround the floating element. If you do not want this surrounding, you can define the clear attribute on the element after the floating element,
3. To achieve the integration of the current label and the content area, this can be achieved by using the same background color and using the same color border for the current label.
4. The mouseover and mouseout methods in JQuery correspond to the onmouseover and onmouseout events of standard JavaScript and can handle the events of mouse entry and departure.
5. Execute the each method on a JQuery object containing multiple elements. The content of the function that can be registered to the each method is executed by each element. At the same time this
The function can also receive a parameter indicating the index value of this element. Many methods in JQuery also use each
6. The eq method can only get one of the multiple elements contained in the JQuery object based on the index value, and still return the new JQuery object corresponding to the element.
7. Use eq in the selector, such as $(“div:eq(1)”)
8. The addClass and removeClass methods are used to add and remove the class definition of elements.
9. The setTimeout method in Javascript can delay the execution of certain codes, and the corresponding clearTimeout can clear the set delay operation.
10. When making an AJAX application, you can consider debugging it on FireFox now, and then check it in other browsers and correct possible compatibility issues.
11. The cursor attribute can control the mouse style on the element. The attribute value of pointer represents the hand style, which is our common link mouse style
12. The position attribute can control the way the element is positioned. When the value is relative, it means positioning relative to the original position. You can control the movement of elements relative to their original positions by setting the values ​​​​of top, left, bottom, and right
13. Z-index can control the layer height of elements on the page. The larger the value, the higher it will be in the layer of the page, and it will also cover some elements with lower z-index values. Only for elements whose position value is relative or absolute, z-index will take effect.
14. The load method in JQuery is very powerful. It can load data output from a specified static or dynamic page or server-side program into an element wrapped by the JQuery object that executes the load method.
15. The load method also supports partial loading. Add a space after the loaded page address, and then use the selector to load the part of the page that matches the selector.
16. The loaded page must be UTF-8 encoded, otherwise the Chinese characters will be garbled after loading.
17.bind can be used to bind Javascript events or events defined in JQuery to the specified node. For events that do not directly provide registration methods in JQuery, you can register them in this way. The second parameter of the method can be the method definition of the event execution.
18.ajaxStart and ajaxStop correspond to the events before and after the ajax interaction starts and ends. After registering these two events for a node, the specified method will be executed before and after the ajax interaction on the current page starts and ends.



Lecture 5

1. The alt attribute of the img tag should be written. When the image has not been loaded or the image does not exist, the text information of this attribute will be displayed
2.select represents a drop-down box. Each item in the drop-down box is an option. The content in the option start and end tags will be displayed on the page. The value of the value attribute is used to obtain and send to the server using the val method in JQuery. of.
When the selected attribute value is selected, it means that the current option is selected
3. How to display the div element in the center: set the width of the div, and then the values ​​of margin-left and margin-right are both auto. The abbreviation is margin: 0 auto;
4. The p tag of html represents the content of a paragraph. The content will occupy one or more lines, and the following content will be displayed on a new line
5. In order to center the text and pictures in p, you can use the text-align attribute, and the attribute value is center. The p tag has margin-top and margin-bottom values ​​by default, which can be cleared through css if necessary
6. When the attribute value of visibility is hidden, the element is hidden. However, unlike display, which is none, it still occupies a certain space on the page, but is not displayed.
7. If multiple selectors have the same attribute value, they can be defined together and separated by commas
8. The change method corresponds to the onchange event in standard Javascript and can handle events when the content of the drop-down box changes
9.The parent method can obtain the parent node of a node
10. The next method can get the next sibling node of a node, and the corresponding previous method can get the previous sibling node of a node
11. The $.post method can initiate an asynchronous post request with the server. The first parameter is the requested server address, the second parameter is the data sent to the server, and the parameter is the Javascript object, using
Expressed in the form of name-value pairs, the third parameter is the callback method, and the fourth parameter indicates the data type returned by the server. JQuery will help us convert based on this parameter. The get method only differs in the second parameter, and the other parameters have the same usage
12.The simple object definition method in Javascript is {key1: value1, key2: value2}
13. The data format of JSON is actually the text format content defined by an object or data in Javascript, such as {key1: value1, key2: [1,2,3]} or [1,2,{key2: value2}]
14. You can directly use the $("<option></option>") method to create the options in the drop-down box, and then use the appendTo method to add them to the drop-down box
15.The attr method can set or get the attribute value of a node
16.ajaxStart is executed before each ajax request issued by JQuery starts, ajaxStop is executed after all ajax requests in the JQuery queue end, and ajaxComplete is executed after each ajax request issued by JQuery ends
17. fadeOut and fadeIn can achieve the effect of fade out and fade in. The parameter content is similar to the slideUp and slideDown methods.
18. The animate method can achieve any animation effect and can control a certain css attribute to change within a certain period of time to achieve the effect of animation
19.Opacity can change the transparency of elements. It is implemented using filters in IE. 100 means fully displayed and 0 means completely transparent. Non-IE browsers use the opacity attribute. 1 means fully displayed and 0 means transparent. JQuery in animate method
The browser differences are shielded, and the fade-in and fade-out effect can be achieved by directly using opacity.
20. The data method can be used to cache data. Caching can improve the operating efficiency of the system and reduce the load on the server
21. You can use the Image object in Javascript to preload images, so that you can know when the image is loaded, so that you can give some prompt information for image loading.
22. The load method can correspond to the onload event in Javascript. In this example, it is used to capture the event that the image is loaded


Lecture 6

JQuery and other development knowledge learned in this section:
1. The simulated window in the page can be realized through the div tag of HTML. The title bar and content area in the window can be represented by a div respectively
2. There are many ways to make a group of divs look like a window. For example, you can set the entire window to use one background color, and then use the content area to use another background color, and
Set a certain padding value for the window (or set a border for the content area) to achieve the contrast between the content area and the outside of the window after the title bar, so that it looks like a window.
3. Correctly understand the effect of float, which will actually affect the display effect between the next element and the float element. Therefore, in this example, if the img in the html code is located at the end of the title bar, float: right will cause the image to run away. Content area
The rightmost side of the domain. Only when the img is placed in front of the title bar text in html, float: right will make the image just on the rightmost side of the title bar
4. When the overflow attribute value is auto, when the content area exceeds the defined height or width, the scroll bar will be displayed.
JQuery and other development knowledge learned in this section:
5. When the position attribute value is absolute, the element will be positioned absolutely on the page. By default, it is positioned relative to the upper left corner of the page. If the ancestor node has the definition of position: relative, it will be positioned relative to the upper left corner of the ancestor node
6. The width and height of the browser's visible area can be obtained through $(window).width() and $(window).height()
7. The left and upper boundaries of the browser scroll bar can be obtained through $(window).scrollLeft() and $(window).scrollTop()
8. Position the window to the middle of the visible area of ​​the screen. You need to use the window to position the window to the middle of the visible area of ​​the screen. You need to subtract the width of the window from the width of the visible area of ​​the screen, then divide by 2, and add the width of the scroll bar. The left boundary value is required to obtain the window
The desired left boundary value; the upper boundary value is obtained in the same way.
9. How to write the plug-in: $.fn.myplugin = function(){//mycode}, this in the method represents the jquery object that executes this method. Note that the method should return this at the end to ensure that other jquery methods can Cascade operation.
10. instanceof can be used to determine whether a variable is an instance of a certain js class, such as determining whether it is an Object. Usage obj instanceof Object
11. typeof can be used to determine the data type of a variable, such as typeof str == “string”
12. The height() and width() methods obtain the height and width of the element itself, innerHeight() and innerWidth() obtain the height and width including padding, and outerHeight() and outerWidth() obtain including border and padding. of
Height and width, outerHeight(true) and outerWidth(true) obtain the height and width including margin, border and padding
13.Scroll can be used to register the operations required to scroll the scroll bar of the browser or a certain node.
14.resize can be used to register the operations that need to be performed when the browser size changes.
15. The event operations provided by jquery are incremental during registration. For example, I have two pieces of code both $(window).scroll(function(){}). The function content of the second piece will not cover the second piece. One paragraph, but when scrolling, both pieces of code are executed
16. The animate method can change the left and top values ​​within a certain period of time to achieve the effect of animation.
17. The dequeue method can remove an animation effect from the beginning of the animation queue and execute it immediately. This ensures that animations at the back of the queue can be executed without waiting for the animation at the beginning.
18. The is method can be used to determine whether an object satisfies the jquery selector in the is method parameter
19. The :visible selector can be used to obtain visible elements on the page
20. Differences between browsers cause the code in document.ready to obtain the width and height of the browser's visible area as well as the left and top values ​​of the scroll bar. Therefore, we need to ensure that the values ​​​​are obtained after this method is completed. these values.
21.$.browser can be used to determine the type of browser. The determination method can be $.browser.msie == true. The values ​​that can also be used include $.browser.opera$.browser.safari $.browser.mozilla
22.$.browser.version can determine the browser version number, such as $.browser.version.indexOf(“8”)