JQuery learning Summary (2). jquery learning Summary

JQuery learning Summary (2). jquery learning Summary

Next to jQuery summary in the previous blog (I), jQuery always gives me too much convenience, conciseness, and a little bit of fragmentation. Therefore, we need to make a good summary to concatenate the scattered elements into lines, combine the previous JS Code to build a network ......

 

1. load Method

The load () method in JQuery is very powerful. You can load the data output from a specified static, dynamic page or server program to the execution of load () the JQuery object of the method is wrapped in elements.

The load () method also supports partial loading. Add spaces after the loaded page address, and then use the selector to load the part that matches the selector in the page. But one thing to note is that the load page must be UTF-8 encoding, otherwise after loading the Chinese will appear garbled.

 

2. Elements(1) Effect

FadeOut () and fadeIn () can be used to fade out and Fade in. The parameter content is similar to the slideUp () and slideDown () methods.
The animation () method can achieve any animation effect and control the changes of a css attribute within a certain period of time to achieve the animation effect.

Opacity () can change the transparency of elements. In IE, the filter is used. 100 indicates full display, 0 indicates completely transparent, non-IE browsers use the opacity attribute, 1 indicates full display, and 0 indicates transparent. JQuery shields browser differences in the animate () method and uses opacity to fade in and out.

 

(2) Positioning

The position attribute can control the method of element positioning. If the value is relative, it indicates Positioning relative to the original position. You can set the top, left, bottom, and right values to control the movement of elements relative to the original position.

Z-index can control the height of an element in the page. A larger value will overwrite some elements with a lower z-index value in the front of the page layer. Z-index takes effect only when the position value is relative or absolute.

 

3. Get nodes

The parent () method obtains the parent node of a node.

The next () method obtains the next sibling node of a node.

The previous () method obtains the previous sibling node of a node.

The attr () method can be used to set or obtain the attribute values of a node.

Each (): the content of the function that executes the each () method on a JQuery object that contains multiple elements and can be registered to the each () method is executed by each element. At the same time, this function can receive a parameter indicating the index value of this element.

The eq () method can obtain only one element of multiple elements contained in the JQuery object based on the index value, and still return the new JQuery object corresponding to the element.

For example, $ ("div: eq (1 )")

 

4. Expansion(1) ajax-related

AjaxStart is executed before each ajax request sent by JQuery starts.

AjaxStop is executed after all ajax requests in the JQuery queue are completed.

AjaxComplete is executed after each ajax request sent by JQuery ends.

AjaxStart and ajaxStop correspond to events before and after ajax interaction. After these events are registered for a node, before and after the ajax interaction on the current page, the specified method is executed.

 

(2) Comparison of some differences:

When the value of visibility is hidden, the element is hidden. However, if the value of visibility is different from that of display none, it occupies a certain amount of space on the page, but it is not displayed.

 

(3) Comparison with JS:

The change () method corresponds to the onchange event in standard Javascript and can handle the event of content change in the drop-down box.

The setTimeout () method in Javascript can execute some code at a time delay, and the corresponding clearTimeout () can clear the set delay operation.

In JQuery, The mouseover () and mouseout () Methods correspond to the onmouseover and onmouseout events of standard javascript, and can handle the mouse Entry and Exit events.

 

Bind can be used to bind Javascript events or events defined in JQuery to a specified node. You can use this method to register events that do not directly provide the registration method in JQuery. The second parameter of the method can be the method definition for event execution.

The JSON data format is actually the content of an object or data definition text in Javascript, such as {key1: value1, key2: [1, 2, 3]} or [1, 2, {key2: value2}]

You can directly use the $ ("<option> </option>") method to create the options in the drop-down box, and then add them to the drop-down box using the appendTo method.

$ ("<Optionvalue =''> select the vehicle type </option> "). appendTo (cartypeSelect );

The Study of JS is still in progress, and the summary is still to be continued ......