2015-07-23 jquery Lesson Three (jquery elements: Get, add, delete, set, bind, show hidden, callback function, animation)

Source: Internet
Author: User

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 (along with the label).

$ (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"}, 2000);

});

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-07-23 jquery Lesson Three (jquery elements: Get, add, delete, set, bind, show hidden, callback function, animation)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.