JQ section S Quad Lecture + example

First, set the element style (12th lesson continue)

6. Direct access to and editing of content

Text (content) Gets the content of the label when it is not set, and replaces the text content in the label with new content when setting content.

HTML (text) Gets the HTML text in the tag when text is not set, and replaces the HTML text in the label with new HTML text when setting text.

7. Moving and copying elements

Specifies the object. Append (text) appends the HTML text to the specified object.

Specifies the object. AppendTo (JS object) appends the specified tag object to the JS object that the AppendTo points to.

Specifies the object. After (text) appends the text to the HTML literal to the specified object.

Specifies the object. Before (text) appends the HTML text to the specified object.

8. Deleting elements

Empty clears the contents of the specified label

Remove to delete the specified label

9. Handle the value of form elements

Val (value) Gets the value content of the form element when the value of Val is not set, and replaces the value content of the form element with the new value when the Val value is set.

10, binding event monitoring

Bind (event,data,function) adds one or more event handlers to the selected element, and specifies the function to run when the event occurs.

Event required. Specifies one or more events that are added to an element. Multiple events are separated by a space. Must be a valid event.

Data is optional. Specifies additional data that is passed to the function.

function Required. Specifies the function to run when an event occurs.

Unbind (event,function) removes the event handler for the selected element. If no parameters are specified, all event handlers for the given element are deleted.

event is optional. Specifies one or more events that delete an element, separated by a space of multiple event values.

If only this parameter is specified, all functions bound to the specified event are deleted.

function is optional. Specifies the name of the function to unbind from the specified event of the element.

The one JS object needs to execute multiple events in succession using the Bind method, only the first execution is valid.

Second, show and hide the alternating effect

1. Toggle (Speed,callback,switch) If the selected element is visible, the elements are hidden in a scaled fashion,

If the selected element is hidden, the elements are displayed in a scaled fashion.

Speed is optional. Specifies that the element is visible to the hidden speed (or vice versa). The default is "0".

If you set this parameter, you cannot use the switch parameter.

Possible values: • milliseconds (e.g. 1500)

• "Slow" slow

• "Normal" standard

• "Fast" quick

Callback is optional. The function to execute after the toggle function finishes executing.

This parameter cannot be set unless the speed parameter is set.

switch is optional. Boolean value. Specifies whether toggle hides or displays all selected elements.

true Show all elements

false Hide all elements

* * If you set this parameter, you cannot use the speed and callback parameters, that is. Between speed and callback and switch is a shot.

Hide (Speed,callback) hides the element if the selected element is already displayed.

Show (Speed,callback) if the selected element is hidden, the elements are displayed in a scaled fashion.

2. Slidetoggle (Speed,callback) If the selected element is visible, the elements are hidden by a swipe,

If the selected element is hidden, the elements are displayed in a rolling fashion.

SlideDown (speed,callback) if the selected element is already displayed, the element is hidden as a swipe.

Slideup (Speed,callback) If the selected element is hidden, the elements are displayed in a rolling fashion.

3, Fadetoggle (speed) If the selected element is visible, the elements are hidden in a gradual manner,

If the selected element is hidden, the elements are displayed in a gradient fashion.

FadeOut (Speed,callback) If the selected element is already displayed, the element is hidden in a swipe mode

FadeIn (Speed,callback) If the selected element is hidden, the elements are displayed in a rolling fashion.

4, FadeTo (Speed,opacity,callback)

Opacity required, the parameter sets the fade effect to the given opacity (values between 0 and 1).

such as: $ ("button"). Click (function () {

$ ("#div1"). FadeTo ("slow", 0.15); Slow gradient to 0.15 transparency

$ ("#div2"). FadeTo (1000,0.4); Fade to 0.4 transparency in 1 seconds

$ ("#div3"). FadeTo ("slow", 0.7); Block-speed gradient to 0.7 transparency

});

Third, animation effect

The prerequisite for the animation effect is

1. Animate performs a custom animation of the CSS property set.

Styles required. Specifies the CSS style and values that produce the animation effect.

* * Note: CSS styles are set using DOM names (such as "fontSize") rather than CSS names (such as "font-size").

Speed is optional. Specifies the speed of the animation. The default is "normal".

Possible values: • milliseconds (e.g. 1500)

• "Slow" slow speed

• "Normal" standard

• "Fast" quick

Callback is optional. The function to execute after the animate function finishes executing.

such as: $ ("#d1"). Animate ({"Top": "300px", "left": "300px"}, +, function () {

$ ("#d1"). Animate ({"Top": "0px", "left": "600px"}, 2000);

}); ---#d1标签从原位置2秒内移动到300, 300 of the position, and then move from 300,300 position to 0,600 position.

2, automatic execution---can be repeatedly executed

SetInterval (code,millisec[, "Lang"]) can invoke a function or evaluate an expression by a specified period (in milliseconds).

Code required. The function to invoke or the code string to execute.

Millisec must. The time interval, in milliseconds, between periodically executing or calling code.

Clearinterval (id_of_setinterval) can cancel timeout set by SetInterval ().

Id_of_setinterval the ID value returned by SetInterval ().

3, automatic execution---only once

SetTimeout (CODE,MILLISEC) is used to call a function or evaluate an expression after a specified number of milliseconds.

Code required. The JavaScript code string to execute after the function to invoke.

Millisec required. The number of milliseconds to wait before executing the code.

4, plug-in (later)

Four, Carousel Map

1, let the rotation of the graph with a div display.

2, find the first picture, in looking for other brothers pictures and hidden.

3, the interval of 4 seconds rotation: every 4 seconds to increase the number of 1, with it to change the currently displayed picture index.

4, use Div to do subscript, and then set the subscript style, to determine the position of placement.

Cursor:pointer display the cursor of the hand when the mouse is moved up

border-redius:50% the four corners of the opponent's frame for fillet processing, and 50% when the box turns into a circle.

Posintion:absolute relative positioning

5, then build a style to show the current picture subscript, and for the correlation processing, refers to the picture and subscript pairing.

6. When you click on a picture, the image is displayed, and the subscript is moved along with it.

JQ section S Quad Lecture + example