The sharp jquery add-on notes

1. Compression: UGLIFYJS
2. jquery object converted to DOM object using [index] or get (index)
3. Dom object converted to jquery object using $ (DOM object)
4. Jquery.noconflict () is to transfer control of a variable to another library, and if jquery wants to customize a shortcut, assign it a variable. If you still want to continue using $ and do not conflict with other libraries, use the following two methods:

If the other libraries are in jquery, write Jquery.noconflict () first, and if so, then don't write.

(1) jquery (function ($) {Write jquery code in this case})

(2) (function ($) {Write jquery code in this case}) (jquery);

1. In JS, when the acquired element does not exist, it will go wrong, but in jquery, there is no error, so if you want to determine whether an element exists in jquery, you can not directly use if ($ (' #ss ')) {}

You can use the following methods:

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

(2) Convert the jquery object to a DOM object if ($ (' #ss ') [0]) {}

1. + Equals next () is the element directly behind the current element (sibling)

~ Equivalent to Nextall () is all elements (peers) that have a match behind the current element

Sibling () is all elements (peers) that match before and after the current element

1. Filter Selector

(1) Basic filter Selector

: First:last:even:odd:not (): eq () "Starting from 0"

: GT (): LT (): Header "All title elements": Animated:focus

(2) Content Filter Selector

: Contains (""): Empty "does not contain child elements or text"

: Has (' P '):p arent "contains child elements and text"

(3) Visibility Filter Selector

: hidden:visible

(4) Attribute filter Selector

！ ^      $   | (prefix-/equals) * (contains) ~ (Space delimited)

(5) Sub-element filter Selector

: Ntn-child (Index "starting from 1"/even/odd/3n+1 ... (n starting from 1))

Ps:3n+1 is interpreted as starting from the 1th element, every 3

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

(6) Form object property Filter Selector

: Enable:d isable:checked:selected

(7) Form selector

: Input "<input>/<textarea>/<select>/<button>": Text "single line"

:p Assword:radio:hidden ...

1. When encountered in HTML, Id/class ... Contain special characters? , # (] and other special characters, can not be directly obtained, you need to precede the special characters with escape escapes (\ \)
2. If you use the jquery version 1.3.1 and above, you do not need to precede the (selector) property with @, which may cause errors

10. Create element node: $ (' <li></li> '); Then use append to add

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

Create attribute nodes, add more attributes

11. Insert the node:

(1) Append () inside ... Join...

(2) AppendTo () inside ... Add To ...

(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 descendant nodes, and the bound event is invalidated

Detach () itself is deleted along with the descendant nodes, the bound events, additional data are preserved

Empty () empties the node

13. Copying nodes

Clone () Such copied elements do not have any behavior, want to bind the event also copied down, you need to add a true in ()

14. Replacing nodes

ReplaceWith () ... Replace with ...

ReplaceAll () with ... Replace...

PS: In the replacement process, the original node if there are bound events, will also be replaced

15. Parcel Nodes

Wrap () put ... Use... Wrap up (each matching individual package)-----outside

Wrapall () put ... Use... Wrap up (each matching package, and the package may contain some other elements)-----outside

Wrapinner () put ... Use... Wrap it up-----in there

16. Property manipulation

attr ()

Removeattr ()

AddClass ()//Append style

Removeclass ()

Toggle ()//Toggle Style

Hasclass ()//Whether it contains a style

HTML ()//equivalent to innerHTML, when using the elements will be all replaced, you can also increase the node, the added node will be a DOM element

Text ()//is equivalent to innertext, the elements inside will all be replaced, can also increase the node, the added node will become the text

Val ()//corresponds to the Value property, which is used to set and get the values of the element---input box, button, radio, multiple selection ...

17. Traversing nodes

Children ()//child elements

Next ()//after a sibling element

Prev ()//Previous sibling element

Siblings ()//front and back all sibling elements

Closest ()//Look up until the first matching element is found, and if not, returns an empty

Parent ()//top-level match for all parents elements

Parents ()//each matching ancestor element

18.css-dom operation

CSS ()

Height ()//Gets the value without unit

Width ()

Position ()

Left ()

Right ()

ScrollTop ()//scroll bar distance from the top, you can set the value back to the top $ (document). scrolltop (0);

ScrollLeft ()

19. Events

(1) Bind ()//Event binding multiple BIND events can use multiple bind, or the event type can be separated by a space one-time binding (recommended)

(2) Unbind ()//Event removal

(3) One ()

(4) jquery1.7 after on () off () Deletage () Undeletage ()

20. Properties of the Event object:

(1) The type of Event.type event (click, Mousrover ... ）

(2) Event.preventdefault ()

(3) Event.stoppropagation ()

(4) Elements of the Event.target event

(5) Event.relatetarget

(6) Event.pagex/event.pagey

(7) Event.which Gets the code for the key, such as clicking the mouse button, left and right (1, 2, 3)

(8) Event.metakey

21. Analog operation

Trigger () such as: $ (' #btn '). Trigger (' click '); Impersonation Click event

There are also events that can simulate user customizations, as well as parameters that can be passed as a second parameter of trigger

22. Animations

(1) Show () and hide ()---change display

(2) FadeIn () and FadeOut () – Change transparency

(3) Slideup () and Slidedown () – Change height

(4) animate ({Set parameters}, speed, callback);

You can set the accumulation and decrement, for example {' Left ': ' +=50px '}

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

(5) Stop () stops the animation inside put two parameters

Whether the first empty animation sequence is not executed

Whether the second one jumps directly to the end state

(6) is () to determine whether in a certain state such as: Is (": animated");

(7) Delay (1000) Latency

(8) Toggle () Toggle Visible State – Change height, width, opacity

(9) Slidetoggle ()--Change height

() FadeTo () adjusts the element to the specified value in a gradual manner such as: FadeTo (600,0.2)

(one) Fadetoggle ()--Change the opacity

23. Forms

(1) When setting disabled, checked properties, do not use attr, use prop

(2) Form

The index of the odd and even of the table is starting from 0.

24.Ajax

The sharp jquery add-on notes