JQuery practical tutorial source code free download

Download address: http://www.php.cn/xiazai/code/1765

Lecture 1:

What we learned in this section is JQuery and Other development knowledge:

1 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 p or span node first to display the data returned by the server later.

4.border attribute can control the border of page elements

5.background-***can control the background image, the position of the background image, and the way of repeated display

6. You can use #idname or .classname to define a custom html node style

7. You can use $(document).ready(function(){}) to define when the page is loaded. , the method that needs to be executed.

8. You can use the $() method to get the specified node of the page. The parameter is a certain css selector.

9. You can execute various operations on the jquery object returned by the $() method. Jquery methods to obtain data, define events, and perform operations.

10.val() method can get the value attribute value of the node

11.html() method can set the html content in a node

12.click The () method can respond to the mouse click event

13. The keyup() method can respond to the keyboard pop-up event.

14.$.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 pure value representing the data returned by the server. Text parameters

15. The addClass() removeClass() method can add or delete a class to a node

16. The data sent to the server is encodeURI twice in javascript, and then Doing URLDecode in UTF-8 format in the server-side code can solve the problem of Chinese garbled characters.

Related topic recommendations: "jquery practical video"

Second lecture

JQuery and other development knowledge learned in this section:

1.table can contain thead and tbody

2.The content of the table header can be placed in th

3.table{} This writing method is called a tag selector, and it can Affects 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.css method can be used to set Or get the css attribute of the node, the parameter name is the css attribute name.

11.The JQuery 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 certain 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 The 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 HTML text, then You can create a DOM node and package it into a JQuery object

20. Most of the JQuery methods will return the JQuery object that executes this method, so you can use the chain method to write the code given to JQuery.

21.width method can set or get the width of a node

22.appendTo method can append a node to the back of all 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 shield 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

This section JQuery and other development knowledge learned:

1. Menu items on the page can be represented by nested ul and li

2. The outermost layer of the menu is ul, and each layer A main menu is placed in a li. If there are submenus, create a new ul in the li of the main menu, and then nest them 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. Clear the indent value of the submenu, both padding and margin need to be 0 , among which 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 numerical or center, left, and top 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.The value of background-repeat When it is no-repeat, the background image will not be displayed repeatedly in the area.

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 that use .main, while the latter only selects the child nodes of .main a node

16.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 words 'slow', 'normal', and 'fast',

can all be used to control the time required to complete the display or hiding. 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 parameter usage method 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 can make all elements originally located on one row 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 in the ul A li; the content under the tag is managed with p

2. The elements following the floating element (float) will surround the floating element. If you do not want this surrounding, you can place it after the floating element. Define the clear attribute on that 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

function can also receive a parameter indicating the index value of this element. Many methods in JQuery also use the each

6.eq method, which 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 $("p: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 pointer attribute value represents the hand style, which is our common link mouse style.

12. The position attribute can control the positioning of the element. Mode, when the value is relative, it means positioning relative to the original position. You can control the movement of the element relative to its original position by setting the values ​​​​of top, left, bottom, and right.

13.z-index can control the height of the element on the page. The larger the value, the higher the height of the element on the page. The further forward the layer is, the more elements with lower z-index values ​​will be covered. 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 the data output from a specified static, dynamic page or server-side program into the 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 events before and after the ajax interaction starts and ends. After registering these two events for a node, the specified function will be executed before and after the ajax interaction on the current page starts and ends. method.

Lecture 5

1. The alt attribute of the img tag must 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 it to JQuery using the val method. Server's.

When the selected attribute value is selected, it means that the current option is selected

3. How to display the p element in the center: set the width of p, then margin-left and margin-right The values ​​are all auto. The abbreviation method is margin: 0 auto;

The p tag of 4.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. If necessary, they can be cleared through css

6. When the visibility attribute value is hidden, the element is hidden, but when it is different from display, it is displayed on the page. It still occupies a certain space, but it is not displayed

7. If multiple selectors have the same attribute value, they can be defined together, and the selectors are 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 obtain the parent node of a node. The next sibling node, the corresponding previous method can obtain 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 server-side address of the request, the second parameter is the data sent to the server, the parameter is the Javascript object, expressed in the form of name-value pairs, and the third parameter is the callback method. , the fourth parameter indicates the data type returned by the server, and JQuery will help us convert it based on this parameter. Only the second parameter of the get method is different, and the usage of other parameters is the same

12.The simple object definition method in Javascript is {key1: value1, key2: value2}

13.JSON The data format 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 $("") 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.attr method You can set or get the attribute value of a node

16.ajaxStart is executed before each ajax request issued by JQuery, ajaxStop is executed after all ajax requests in the JQuery queue end, and ajaxComplete is executed after each ajax request issued by JQuery. After the ajax request is completed, execute

17. fadeOut and fadeIn can achieve the fade-out and fade-in effect. 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 the element , implemented using filters in IE, 100 means fully displayed, 0 means completely transparent, non-IE browsers use the opacity attribute, 1 means fully displayed, 0 means transparent. JQuery blocks browser differences in the animate method

, and you can use opacity directly to achieve the fade-in and fade-out effect.

20.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 as to give some image loading tips. information.

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 learned in this section And other development knowledge:

1. The simulated window in the page can be realized through the p tag of html, and the title bar and content area in the window can be represented by a p respectively

2 . There are many ways to make a group of p look like the style of a window. For example, you can set the entire window to use one background color, and then use another background color for the content area, and

set a certain value for the window. The padding value (or the content area setting border) has reached the contrast between the content area and the outside of the window after the title bar, so that it looks like a window.

3. A correct understanding of the effect of float 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 ran to the far right of the

field in the content area. Only if the img is placed in front of the title bar text in HTML, then 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 When the defined height or width is exceeded, scroll bars are displayed.

JQuery and other development knowledge learned in this section:

5. When the position attribute value is absolute, the element will be positioned absolutely in the page. By default, it is positioned relative to the upper left corner of the page. . If there is a definition of position: relative in the ancestor node, 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 passed $(window).width() and $ (window).height() method to obtain

7. The left and upper borders of the browser scroll bar can be obtained through $(window).scrollLeft() and $(window).scrollTop()

8. Position the window in the middle of the visible area of ​​the screen. You need to use the window to position it in 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, and then divide by 2. In addition to the left boundary value of the scroll bar, the required left boundary value of the window can be obtained; 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 operate in cascade.

10. instanceof can be used to determine whether a variable is an instance of a certain js class. For example, to determine whether it is an Object, the usage obj instanceof Object

11. typeof can be used to determine whether a variable is an instance of a js class. The data type of the variable, such as typeof str == "string"

12. The height() and width() methods obtain the height and width of the element itself, and the innerHeight() and innerWidth() methods obtain the padding. The height and width, outerHeight() and outerWidth() obtain the height and width including border and padding, outerHeight(true) and outerWidth(true) obtain the height and width including margin, border and padding Wide

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(){}), and the function of the second piece is The content will not cover the first paragraph, but when scrolling, both pieces of code will be 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 in the page

20. Differences between browsers cause the code in document.ready to obtain the width and height of the browser's visible area and the values ​​​​of the scroll bar left and top are not necessarily correct, so we need to ensure that this method is completed. Get these values ​​later.

21.$.browser can be used to determine the browser type. 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”)

The above is the detailed content of JQuery practical tutorial source code free download. For more information, please follow other related articles on the PHP Chinese website!