Effect of jQuery

Show hidden

grammar

  • show(speed,easing,fn)
  • hide(speed,easing,fn)
  • toggle(speed,easing,fn)

parameter

  1. Parameters can be omitted, no animation directly displayed
  2. Speed: a string of one of three predetermined speeds (‘slow’,’normal’,’fast’) or a number of milliseconds indicating the length of the animation (e.g., 1000)
  3. Easing: Used to specify the switching effect. Default is ‘swing’. ‘Linear’ is available
  4. Fn: Callback function, which is executed when the animation completes, once per element

sliding

grammar

  • slideDown(speed,easing,fn)
  • slideUp(speed,easing,fn)
  • slideToggle(speed,easing,fn)

The fading

grammar

  • fadeIn(speed,easing,fn)
  • fadeOut(speed,easing,fn)
  • fadeToggle(speed,easing,fn)
  • FadeTo (speed,opacity,easing,fn) // Adjust gradually to the specified opacity

parameter

  1. Opacity must be set. The value is between 0 and 1
  2. Speed: a string of one of three predetermined speeds (‘slow’,’normal’,’fast’) or a number of milliseconds indicating the length of the animation (e.g., 1000)
  3. Easing: Used to specify the switching effect. Default is ‘swing’. ‘Linear’ is available
  4. Fn: Callback function, which is executed when the animation completes, once per element

Events to switch

Hover ([over], out)

  • Over: the function to trigger when the mouse moves over an element (equivalent to a mouseenter)
  • Out: function to trigger when the mouse moves out of the element (equivalent to mouseleave)
1.Event toggle hover is a composite of mouse over and mouse off $('.nav>li').hover(() = >{$(this).children('ul').slidDown(200)},() = >{$(this).children('ul').slideDown(200)})2.Hover if you write only one function, then the hover function will trigger $('.nav>li').hover(() = >{$(this).children('ul').slideToggle()
})
Copy the code

Animation queue and its method of stopping queuing

  1. Animation or effect queue
  • An animation or effect is executed once triggered, and multiple animation or effect queues are executed if triggered multiple times
  1. Stop line
  • stop()
  • Used to stop an animation or effect
  • Note: Stop () is written before the animation or effect to end the previous animation
$('.nav>li').hover(() = >{$(this).children('ul').stop().slideToggle()
})
Copy the code

Custom Animate

grammar

  • animate(params,[speed],[easing],[fn])

parameter

  1. Params: Style properties that you want to change, passed as objects, must be written. Attribute names may not be quoted, but for compound attributes, the camel name is borderLeft. Other parameters can be omitted
  2. Speed: a string of one of three predetermined speeds (‘slow’,’normal’,’fast’) or a number of milliseconds indicating the length of the animation (e.g., 1000)
  3. Easing: Used to specify the switching effect. Default is ‘swing’. ‘Linear’ is available
  4. Fn: Callback function, which is executed when the animation completes, once per element

Accordion case

$(function(){$('.king li').mouseeter(() = >{
    	//1. The current width of the small li is 224px, and the small images inside fade out and the big ones fade in
           $(this).stop().animate({
           	width:224
           }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn()
    })
    	//2. Change the width of the other brothers to 69px, fade in the small image, fade out the big image
           $(this).siblings('li').stop().animate({
           	width:69
           }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut()
})
Copy the code

The event

Event registration (single)

Function (){}

$(‘div’).click(functiion(){event handler})

Event handling (multiple)

Bind on ()

Advantage of a

  • You can bind multiple events and handle multiple event handlers
$('div').on({
	mouseover:function(){},
        mouseout:function(){},
    	click:function(){}})Copy the code
  • If the event handler is the same
$('div').on('mouseover mouseout'.function(){$(this).toggleClass('current')})Copy the code

Advantage 2

  • You can do event delegation, and the definition of event delegation is to take an event that was assigned to the child and bind it to the parent, so you delegate the event to the parent
$('ul').on('click'.'li'.function(){
	alert('hello world')})Copy the code

Advantage three

  • For dynamically created elements, click() has no way to bind events, while on () can bind events to dynamically generated elements
$('ol').on('click'.'li'.function(){
	alert(11)})let li =$('
  •  I was created later 
    • '    The $()'ol').append(li)
Copy the code

    Unbundling off

    The off () method removes event handlers added through the on () method

    • $(‘p’).off() // Unbind all event handlers for the p element

    • $(‘p’).off(‘click’) // Unbind the click event on the p element

    • $(‘ul’).off(‘click’,’li’) // Unbind event delegate

    Automatic trigger event

    Some events want to be triggered automatically. For example, the auto-play function of the wheel map is consistent with clicking the right button. The timer can be used to automatically trigger the button click event on the right side without the mouse click trigger

    element.click() // The first shorthand form
element.trigger('type') // The second automatic trigger mode

$('p').on('click'.function(){
	alert('hi'The $()})'p').trigger('click') // The click event is automatically triggered, no mouse click is required

element.triggerHandler(type)  // The third automatic triggering mode does not trigger the element's default behavior
Copy the code

    The event object

    When an event is triggered, an event object is created

    Element. on(events, [selector], function(event){}) prevents the default behavior: event.preventDefault() or return false prevents bubbling: event.stopPropagation()

    JQuery Object Copy

    If you want to copy (merge) an object for use by another object, use the $.extend() method

    $.extend([deep] , target , object1 , [objectN])
Copy the code
    1. Deep: If true is used for deep copy, false is used for shallow copy
    2. Target: indicates the target object to be copied
    3. Object1: object of the first object to be copied
    4. ObjectN: object of the NTH object to be copied
    5. Shallow copy refers to copying memory addresses. Modifying the target object affects the copied object
    6. Deep copy (true), full clone (copied object, not address). Modifying the target object does not affect the copied object