The points of attention in the common methods of jquery "learning experience"

Source: Internet
Author: User

The difference between. End () and. Parent () is that the former is not only able to find the parent node but also the neighboring node

. Toggleclass () refers to the conversion between the specified style and the default style.

. Offset () is the absolute position to get relative to the viewport

. Position () is the offset position relative to the parent element

. scrolltop () Gets the height of the vertical scroll bar

. Clone () replication node; It is important to note that if there is no argument or false in this method, it is just the content of the copy, and there is no processing of the copy event, and if the ture is passed, the content and event processing are copied.

There are several ways to delete a node:

Removal of the. Remove () event behavior does not persist

Delete of the. Detach () event behavior Retention

. empty () empties node content retention label

. ReplaceWith () Replace node

The difference between Mouseenter,mouseleave and MouseOver Mouseout is that the former passes through the child element without triggering the event, while the latter passes through the child element, triggering the event, to prevent the confusion of the event behavior, the former is more convenient

Event

. KeyDown () Press E.keycode

. KeyUp () Press the bounce up E.keycode

. KeyPress () Press E.charcode

E.pagex/e.pagey: Relative to page origin

E.screenx/e.screeny: Relative to the screen position

E.clientx/e.clienty: Relative to the page viewport

E.stoppropagation: block bubbling behavior;

E.preventdefault: Block default behavior, in normal operation, what is the default behavior, such as in the text box input area will pop up the system menu, when clicking the hyperlink will automatically jump to the specified page, click the Submit button will submit the data jump page

Example of a ban on submitting forms

$ (' form '). Submit (function (e)

{

E.preventdefault;

}): This method is commonly used

A method that blocks both the bubbling behavior and the default behavior: return false;

Advanced Events

. Trigger () Simulate user actions, Web page one open only simulation once

Differences between. Trigger () and Triggerhandler ()

1, the latter will trigger the event but will not perform the default behavior, a typical example is the form submission but the page does not jump

2, the number of executions is different, the latter only affects the first matching element

3, the latter can not concatenating, return is the current return value if none return undefined, the former can concatenating, return is the jquery object

4, the latter does not bubble, the former will bubble

Animation

Show, hide Show () hide () toggle ()

Slide, scroll slideup () Slidedown () Slidetoggle ()

Fade in, Fade Out FadeIn () FadeOut () Fadetoggle () FadeTo ()

Sync Animations

Queued animations

Example

$ ("show"). Click (Function ()

{

$ ('. Test '). First (). Show (' Fast ', function testshow () {

$ (this). Next (). Show (Fast), testshow ();

}

});

Custom animations

To implement a queue animation with. Queue () to prevent contamination of other animations

. Queue (function (next)

{

Next ()

});

Or

. Queue (function ()

{

$ (this). Dequeue ();

});

. Clearqueue () to clean up the animation

The points of attention in the common methods of jquery "learning experience"

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.