jQuery (1): selector, style operation, animation effect

Selector

1. Basic selector
Syntax format:

$("selector") // The selector inside can directly write the CSS selector, but it needs to be quoted

Common Selector Types

For example:

2. Style setting

Grammar format:

$('div').css('attribute', 'value')

For example:

Renderings:

3. Implicit iteration

The process of traversing the internal DOM elements (stored as a pseudo-array) is called implicit iteration.

For example:

Setting the background color of all divs to red in the above style setting is an implicit iteration, which is equivalent to a cycle, and then setting the background color of all divs one by one. If you are using DOM elements, you can only use a for loop to set each background element. As shown above, using a loop

4. jQuery filter selector

For example:

   $('ul li:first').css('background','red');//将ul下的第1个li背景颜色改为红色
   $('ul li:eq(3)').css('background','red');//将ul下的第4个li背景颜色改为红色

For example:

Effect:

5. Exclusivity

If you want to choose one more effect, exclusive idea: the current element sets the style, and the rest of the sibling elements clear the style.

Format:

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

For example:

The effect is which button is clicked, the background color of which button becomes red, and the rest are the default colors

6. Chain programming

Chain programming is to save the amount of code. When using chain programming, you must pay attention to which object executes the style.

For example:

$(this).css('color', 'red').sibling().css('color', '');    

This effect changes the font color of the current element to red, and the rest of the sibling elements become the default color

style manipulation

1. The parameter only writes the attribute name, and returns the attribute value

$(this).css(''color'');

2. The parameter is attribute name, attribute value, comma-separated, is to set a set of styles, attributes must be quoted, if the value is a number, you can not follow the unit and quotes

$(this).css(''color'', ''red'');

3. Parameters can be in the form of objects, which is convenient for setting multiple sets of styles. The attribute name and attribute value are separated by a colon, and the attribute does not need to be quoted

$(this).css({
    
     "color":"white","font-size":"20px"});

For example:

4. Add class

$(“元素名称”).addClass(''类名'');

5. Remove class

$(“元素名称”).removeClass(''类名'');

6. Switch class

Switch class name: If you don't have a class name, add this class, if you have this class, remove it

$(“元素名称”).toggleClass(''类名'');

For example:

jQuery animation effects

1. Show, hide, switch

Grammar format:

show([speed,[easing],[fn]]) //show syntax
hide([speed,[easing],[fn]]) //hide syntax
toggle([speed,[easing],[fn]]) // switch syntax

parameter:

• All parameters can be omitted, and no animation will be displayed directly.
• speed: A string of one of three predetermined speeds ("slow", "normal", or "fast") or a number in milliseconds representing the duration of the animation (eg: 1000).
• easing: (Optional) is used to specify the switching effect, the default is "swing", and the parameter "linear" is available.
• fn: callback function, the function executed when the animation is completed, executed once for each element.

For example:

Effect:

Click the display button, the box will appear slowly within 1000ms, click the hide button, the box will be hidden, and an alert box will pop up after hiding.

2. Sliding effect

slide effect

slideDown([speed,[easing],[fn]])

sliding effect

slideUp([speed,[easing],[fn]])

slide switch

slideToggle([speed,[easing],[fn]])

Slide Effect Parameters

• parameters can be omitted.
• speed: A string of one of three predetermined speeds ("slow", "normal", or "fast") or a number in milliseconds representing the duration of the animation (eg: 1000).
• easing: (Optional) is used to specify the switching effect, the default is "swing", and the parameter "linear" is available.
• fn: callback function, the function executed when the animation is completed, executed once for each element.

For example:

3. Event switching

Grammar format one:

$('element name').hover(function(){},function(){})
The first function(){} is triggered when the mouse passes by, and the second is triggered when the mouse leaves

Grammar format two:

$('element name').hover(function(){})
Only write a function(){} to indicate that the mouse will be triggered when passing and leaving

• over: the function to be triggered when the mouse moves over the element (equivalent to mouseenter)
• out: the function to be triggered when the mouse moves out of the element (equivalent to mouseleave)
• If only one function is written, it will be triggered when the mouse passes and leaves

For example:

Effect:

Method 1 and method 2 have the same effect, when the mouse passes, the text box jumps out, when the mouse leaves, the text box is hidden

4. Animation queue and its stop queue method

Animation or effect queue: Once an animation or effect is triggered, it will be executed. If it is triggered multiple times, multiple animations or effects will be queued for execution. For example, if the mouse moves into the event, if you move into the first element and then move into the second element, you must wait until the event of the first element is triggered before executing the triggering of the move-in event of the second element

stop queuing

stop()

• The stop() method is used to stop the animation or effect.
• stop() is written to the front of the animation or effect, which is equivalent to stopping the last animation.

For example:

The stop method must be written to the front of the animation, and stop() stops the last animation. If it is written in slideToggle(), then after we move the mouse into it, the text box will be displayed, but after the mouse leaves, it will not be hidden again, because the animation is stopped

If it is written, change the above code to: $(this).children(“ul”).slideToggle().stop(); The effect is
as follows: after the mouse leaves, the text box will not be hidden anymore, because the sliding effect is cancelled.

5. Fade in and fade out effect

fade in

fadeIn([speed,[easing],[fn]])

fade out

fadeOut([speed,[easing],[fn]])

Fade in and fade out switch

fadeToggle([speed,[easing],[fn]])

parameter:

• parameters can be omitted.
• speed: A string of one of three predetermined speeds ("slow", "normal", or "fast") or a number in milliseconds representing the duration of the animation (eg: 1000).
• easing: (Optional) is used to specify the switching effect, the default is "swing", and the parameter "linear" is available.
• fn: callback function, the function executed when the animation is completed, executed once for each element.

For example:

6. Custom animation animate

grammatical format

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

parameter

• params: The style attribute to be changed, passed as an object, must be written. The attribute name can be used without quotation marks. If it is a compound attribute, it needs to adopt the camel case naming method borderLeft. The rest of the parameters can be omitted.

• speed: A string of one of three predetermined speeds ("slow", "normal", or "fast") or a value in milliseconds indicating the duration of the animation

• easing: (Optional) is used to specify the switching effect, the default is "swing", and the parameter "linear" is available.

• fn: callback function, the function executed when the animation is completed, executed once for each element.

For example:

Effect:

After clicking: