Add notes for "sharp jQuery" and "sharp jquery"

Source: Internet
Author: User

Add notes for "sharp jQuery" and "sharp jquery"

If other libraries are earlier than jQuery, they need to write jQuery. noConflict ();. If they are later, they do not need to be written.

(1) jQuery (function ($) {write jQuery code here })

(2) (function ($) {write jQuery code here}) (jQuery );

You can use the following method:

(1) judge by length: if ($ ('# ss'), length> 0 ){}

(2) convert a jQuery object to a DOM object if ($ ('# ss') [0]) {}

~ This is equivalent to nextAll (). The current element is followed by all matched elements (peers)

Sibling () is all matching elements (peers) of the current element)

(1) Basic filter Selector

: First: last: even: odd: not (): eq () [starting from 0]

: Gt (): lt (): header [All title elements]: animated: focus

(2) content filtering Selector

: Contains (""): empty [does not contain child elements or text]

: Has ('P'): parent [contains child elements and text]

(3) Visibility filter Selector

: Hidden: visible

(4) attribute filter Selector

! ^ $ | (Prefix-/equals) * (included )~ (Separated by spaces)

(5) child element filter Selector

: Ntn-child (index [starting from 1]/even/odd/3n + 1... (N starts from 1 ))

PS: 3n + 1 is interpreted as starting from 1st elements, every 3

: First-child: last-child: only-child (unique child element (only one ))

(6) form object attribute filter Selector

: Enable: disable: checked: selected

(7) form Selector

: Input [<input>/<textarea>/<select>/<button>]: text [single line text]

: Password: radio: hidden ......

10. Create an element node: $ ('<li> </li>'), and then use append to add

Create a text node: $ ('<li> 123 </li>'); then Use append to add

Create an attribute node. Add more attributes to the node.

11. Insert nodes:

(1) inside append... Add...

(2) inside appendTo... Add...

(3) prepend () Internal

(4) prependTo () Internal

(5) after () External

(6) insertAfter () External

(7) before () External

(8) insertBefore () External

12. delete a node

Remove () itself is deleted along with the child node, and the bound event becomes invalid.

Detach () is deleted along with the child node, and the bound events and additional data are retained.

Empty () clears nodes

13. Copy a node

Clone () does not carry any behavior. If you want to copy the Bound event together, you need to add true ().

14. Replace nodes

ReplaceWith ()... Replace...

ReplaceAll... Replace...

PS: During the replacement process, if the original node has a binding event, it will also be replaced.

15. Package nodes

Wrap () handle... ... Package (each matching package) ----- outside

WrapAll () handle... ... Package (each matched package may contain some other elements) ----- outside

WrapInner () handle... ... Package-inside

16. Attribute operations

Attr ()

RemoveAttr ()

AddClass () // append Style

RemoveClass ()

Toggle () // switch the style

HasClass () // whether a style exists

Html () // equivalent to innerHTML. When used, all the elements in it will be replaced. You can also add nodes and the added nodes will become DOM elements.

Text () // equivalent to innerText, all the elements in it will be replaced, you can also add nodes, the added nodes will also become text

Val () // equivalent to the value attribute, used to set and obtain the value of an element-input box, button, single choice, multiple choice...

17. Traverse nodes

Children () // child element

Next () // The Last peer Element

Prev () // previous peer Element

Siblings () // all peer Elements

Closest () // search up until the first matched element is found. If no, null is returned.

Parent () // All parent-level elements matched at the upper level

Parents () // each matched ancestor Element

18. CSS-DOM operation

Css ()

Height () // The obtained value is not in Unit

Width ()

Position ()

Left ()

Right ()

ScrollTop () // The distance from the scroll bar to the top. You can set the value to return to the top $ (document). scrollTop (0 );

ScrollLeft ()

19. Events

(1) bind () // bind events to bind multiple events. You can use multiple bind events or separate the event types with spaces for one-time binding (recommended)

(2) unbind () // event Removal

(3) one ()

(4) on () off () deletage () undeletage () after jquery1.7 ()

 

20. attributes of the event object:

(1) event. type event occurrence type (click, mousrover ...)

(2) event. preventDefault ()

(3) event. stopPropagation ()

(4) event.tar get event Element

(5) event. relateTarget

(6) event. pageX/event. pageY

(7) event. which obtains the code of the key, such as clicking the mouse key, right-left (1, 2, 3)

(8) event. metaKey

21. Simulate the operation

Trigger () For example: $ ('# btn'). trigger ('click'); simulate a click event

You can also simulate user-defined events and pass parameters as the second trigger parameter.

22. Animation

(1) show () and hide () --- change the display

(2) fadeIn () and fadeOut ()-change transparency

(3) slideUp () and slideDown ()-change height

(4) animate ({set parameter}, speed, callback );

You can set accumulate and accumulate, for example, {'left': '+ = 50px '}

You can set the effect method to be executed when the current animation is completed in callback.

(5) Put two parameters in the stop () stop animation.

First whether to clear the sequence of the animation that has not been executed

Whether to directly jump to the last status

(6) is () determines whether it is in a certain state, for example: is (": animated ");

(7) delay of delay (1000)

(8) toggle () switch the visible state-change the height, width, and opacity

(9) slideToggle () -- change height

(10) fadeTo () Adjust the element to the specified value in gradient mode, for example, fadeTo (600, 0.2)

(11) fadeToggle () -- change opacity

23. Form

(1) do not use attr or prop when setting the disabled or checked attributes.

(2) Table

Table odd and even indexes start from 0.

24. Ajax

 

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.