2015.7.23 12th Course Highlights (JQ elements: Get, add, delete, set, bind, show hidden, callback, animate)

1. Get content:

　　Text (): Gets the text content. Text gets the textual content, assuming that the specified <div> also has a variety of tags, text will only get inside the plain text content.

　　html (): Gets the contents in parentheses. HTML, in other things, gets all of the content inside, including labels that print together.

Cases

$ ("#d1"). Text ("AAAAA"); Print out AAAAA

$ ("#d1"). HTML ("<div>aaaa</div>"); Print out <div>aaaa</div>

2. Add elements:

$ (a). Append (b): Add a B to the a tag.

$ (a). AppendTo (b): Add a to the B tag.

$ (a). After (b): At the back of the a tag, add a B.

Cases

$ ("P:eq (1)"). Append ($ ("A:eq (1)")); To the second P tag in the page, add the second a tag on the page

$ ("Img:eq (1)"). AppendTo ("P:eq (1)"); Add the second IMG tag in the page to the second P tag in the page

$ ("Img:eq (1)"). After ("<p></p>"); After the second IMG tag in the page, add a P tag

3. Delete elements:

$ (A). Remove (): Remove the whole of the A label (remove the tag together).

$ (A). Empty (): Empty The contents of a (the label will remain).

Cases

$ ("P:eq (1)"). Remove (); Remove the label with the second P tag in the page.

$ ("P:eq (1)"). empty (); Clear the contents of the second P tag and keep the label.

4. Get/Set element:

　　Val (): Gets the value to any label of Value property.

　　Val (b): Set the value to B, at which point the obtained Val value is the content of B.

Cases

$ ("TXT"). Val (); Gets the Value property of the TXT tag.

$ ("TXT"). Val ("AAAA"); Set the value of the TXT label property to AAAA.

5. Binding Event:

　　bind (): For an object, you can bind multiple events with BIND. And can be executed repeatedly.

　　unbind (): Unbind.

　　One (): For an object, you can bind an event to it with one and execute it only once.

Cases

$ ("img")

. bind ("click", Function () {Event 1})

. bind ("click", Function () {Event 2})

. bind ("click", Function () {Event 3})//When we click on IMG, it also triggers events 1, 2, 3, and then click IMG to trigger event 123 again.

$ ("P"). Unbind ("click"); Let the P tag not be clicked.

$ ("div"). One ("click", Function () {Event 1}); When we click on the div, the event 1 is triggered, and when you click the Div, the event is not triggered.

6. Show and Hide:

Top left to bottom right

　　Show (): Displays the element, starting from top left to bottom right. (When time is added to the brackets, how long does the representation take to unfold?) ）

　　Hide (): Hides the element and shrinks from the lower right to the top left. (When time is added to the parentheses, the representative shrinks for how long.) ）

　　Toggle (): Alternating between display show and hidden hide, instantly displayed or hidden. Time can be added.

Context

Slidedown (): Displays the element, starting from the top and down gradually.

　　slideup (): Hides the element and shrinks from bottom to top.

Slidetoggle (): Alternately executes between the display Slidedown and the hidden Slideup, in a way that scales up and down. Time can be added.

Transparent

　　fadeIn (): The display of the gradient. From transparent to appearing.

　　FadeOut (): The gradient is hidden away. Gradually become transparent and finally disappear.

Cases

$ ("#btn"). Click (function () {

$ ("#d1"). Hide (2000);

})//When BTN is clicked, it takes 1 seconds to hide D1 from bottom right to top left

$ ("#btn"). Click (function () {

$ ("#d1"). Show (2000);

})//When clicking Btn, use 1 seconds to expand from top left to right D1

$ ("#btn"). Click (function () {

$ ("#d1"). Toggle (2000);

})//When clicking Btn, expand or hide the D1 (click Hide, then expand 、......, alternately) at 2 seconds to the top left to the right

7, callback function : Immediately after the execution of the action, we will execute the event defined in it.

Cases

$ ("#btn"). Click (function () {

$ ("#d1"). Hide (1000,function () {alert ("AAA");});

})//When clicking Btn, use 1 seconds to lower right to top left to hide D1, then print out AAA

8, animation time animate:

　　animate: How long it takes to change from one state to another.

Cases

$ ("#d1"). CSS ("position", "absolute"). Animate ({"Top": "250px", "left": "300px"}, 2000,

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

});

Take 2 seconds to move from the original position to the position of the top:250px,left:300px under absolute positioning, then 2 seconds to move to the top:0px,left:600px position.

2015.7.23 12th Course Highlights (JQ elements: Get, add, delete, set, bind, show hidden, callback, animate)