1. AddClass () adds the style
  2. RemoveClass () removes the style
  3. ToggleClass () toggles styles
  4. Prev (),next(),prevAll(),nextAll() are siblings
  5. Siblings () Specifies the siblings of the siblings
  6. The subscript eq (n)
  7. First () === eq(0
  8. Last () Indicates the last node
  9. Slice Intercepts a segment of a set, without the end location
  10. Children () retrieves child elements (only the first child of the parent, not the grandchild)
  11. Find () is more extensive than children ()
  12. Parents () gets all the ancestor nodes of the current element
  13. Closest (must have a parameter) Search for a given closest ancestor element (including yourself)
  14. Append ()/appendTo() adds the element to the last == inside the == of the specified node
  15. Prepend ()/prependTo() adds the element to the first == inside the == of the specified node
  16. Before() /insertBefore() adds elements to the first == outside the == of the specified node
  17. After() /insertAfter() adds an element to the specified node’s == outside the end == distinction $(ul).append(li).css(‘background’,’red’) the entire UL turns red Li.appendto (ul).css(‘background’,’red’) just makes the current li red
  18. remove()
  19. Clone () clones only structures. Clone (true) clones events as well as structures
  20. Index () Indicates the ranking of sibling nodes
  21. Each (function(I,el){I index the element native to el, which requires (el).css(); This is what el calls (el).css(); This is what el calls (el).css(); This is el needs (this)})
  22. Get (0) converts JQ into native JS
  23. Width has no unit. You can set the width, and jQ can get the width and height of the hidden element
  24. InnerWidth (width width +padding) has no units; you can set the width
  25. OuterWidth (width width +padding+border) has no units. You can set the width
  26. OuterWidth (true)width width +padding+border+margin, no units, you can set the width, outerWidth(200, true)
  27. $(window).height() for viewable area
  28. $(document).height()
  29. ScrollTop () The distance to the bottom of the scrollTop(document).scrollTop() ScrollTop () = (document).height()−(document).height() – (document), height () – (Windows), height ()
  30. Element distance $(el).offset(). Top /left ==offset() relative to the entire page, not the viewable area ==
  31. Element distance $(el).position(). Top /left

== Distance of position() to the parent element, regardless of margin ==

Lazy loading of images

(el). Offset (). The top < (el). Offset (). The top < (el). Offset (). The top < (Windows), height () + $(document). ScrollTop (image) has entered into a visual area, Images can be displayed. 32. On/Off events

$('div').on('click mouseover'.function(){
    alert(111The $()this).off('mouseover'Unbind the specified event})Copy the code
  1. Relative to the entire page ev.pagex /pageY
  2. Relative to the viewable area ev.clientX/clientY
  3. Stop event bubbling.stopPropagation ()
  4. Prevent browser default ev.preventdefault ()
$(document).contextmenu(function(ev){
    ev.preventDefault();
})
Copy the code
  1. Prevent both default events and bubbling return false;
  2. Event delegate(), which delegates to bind events to the parent, but actually triggers events to the child by bubbling. The advantage of == is that there is an event == on subsequent creation elements
$('ul').delegate('li'.'click'.function(ev){$(this). The CSS (); $(ev.delegateTarget).undelegate(); Cancel event delegate ev.DelegateTarget refers to the delegate's parent ul})Copy the code
  1. Toggle () combines the show() and hide() methods back and forth
$('a').click(function(){$('div').toggle();
})
Copy the code
  1. fadeIn(),fadeOut()
  2. Animate <{style attributes and values (motion target point)}, motion time (default 400ms), motion form (default buffer swing, linear), return function after motion >, == with stop() to empty the motion queue ==
  3. Empty element content HTML (“”),empty()
  4. Remove (no action),detach(remove element, but keep the action before deleting)
$('div').click(function(){
    alert(111);
});
$('body').append($('div').detach()); Retain the previous actionCopy the code
  1. The text (), HTML ()
  2. Hover () is not a nested structure with a mouseover and a mouseout, but a mouseenter and a mouseleaave