This is the 24th day of my participation in the August Text Challenge.More challenges in August

JQuery sorting

Eq () method

The objects obtained in jQuery contain a selected set of native JS objects, which are sorted in a large way, regardless of the original HTML structure.

The eq() method retrieves an object in the jQuery object by subscript, which is the large sorted subscript in the jQuery object. For example, if you have four parent boxes, each with four

, subscript sort between the 16 elements retrieved by $(“p”), instead of sorting on the basis of their parent boxes.

		var $ps = $("p");
		// Sort has nothing to do with its original parent, only with its new position in the jQuery object
		// Add color to the object at the specified position
		$ps.eq(1).css("background-color"."red");
		$ps.eq(6).css("background-color"."red");
		$ps.eq(9).css("background-color"."red");
		$ps.eq(11).css("background-color"."red");
Copy the code

The index () method

When a jQuery object calls the index() method, it gets its own subscript position within its sibling in the HTML structure. Has nothing to do with jQuery big sort.

Each () traversal

A parameter is a function.

Performs an internal operation on each element in the jQuery object.

The basic principle of the each method is the for loop, which iterates from the zero subscript item of the object to the last item, and then operates on each item.

Advantages:

  1. Inside each, there’s also a this, which refers to each element that comes in.

  2. The each function can pass I, which represents the subscript position of the traversal object in the overall jQuery object queue.

For example, the code below that makes the second element p of each parent element box red is:

            // Select all box elements
            var $box = $(".box");
            
            $box.each(function () {
			// This keyword, which refers to the element object traversed each time
			$(this).children().eq(1).css("background"."red");
		});
Copy the code

Example 2 in global grand sort

		$ps.each(function (i) {
			// I records the position of the current element in the large order of jQuery objects
			$(this).click(function () {
				// The inner this is the event source
				console.log(i); // The subscript of the whole sort
				console.log($(this).index())  // Subscript in brother})})Copy the code

Entry functions in jQuery

Equivalent to the native window.onload, the difference between the two:

  1. window.onload
  • The onload event refers to the multiple resources (DOM tree, audio, video, image, etc.) in the page when loading, can only be triggered, the speed is relatively slow
  • You can only appear once on a page
  1. jQuery
  • JQuery’s entry functions simply wait for the DOM tree on the page to load, which is much faster
  • In a single page, you can write multiple jQuery entry functions in the order they are loaded before and after

Grammar 1:

$(document).ready(function(){

// Get the element

});

Syntax 2:

$(function(){

// Get the element

});

JQuery toggle effect method

Show hide method

• Hide () : the element is hidden. The prerequisite for hiding must be the element display:block.

• show() : element display, the premise of display must be the element display:none;

• Toggle () : Toggles between hiding and showing elements.

These three methods allow you to set how elements are shown and hidden, and to animate transitions in the process.

parameter

If no parameters are passed: show and hide directly, no transition animation.

If the argument is passed:

  • Word formats: “slow”,”normal”, “fast”

  • The numeric time, in milliseconds, during which a show or hide animation appears.

The transition time is accompanied by changes in width and height and transparency.

        // Add click events to show and hide images
        $btn1.click(function () {
            // $pic.hide("slow");
            $pic.hide(1000);
        })
        $btn2.click(function () {
            $pic.show("normal");
        })
        $btn3.click(function () {
            $pic.toggle("fast");
        })
Copy the code

Slide show hide

SlideDown () and slideUp() methods

• slideDown() : Slide display (direction not necessarily)

• slideUp() : Slide hide

• slideToggle() : Slides to switch

Let the element switch between block and None on the display property.

parameter

If no parameter is passed: The default transition time is 400 ms.

If the argument is passed:

  • Word formats: “slow”,”normal”, “fast”

  • The numeric time, in milliseconds, during which a show or hide animation appears.

        // Add click events to slide images to show and hide
        $btn1.click(function () {
          $pic.slideUp(1000)
        })
        $btn2.click(function () {
          $pic.slideDown(1000)
        })
        $btn3.click(function () {
          $pic.slideToggle(1000)})Copy the code

Pay attention to

• If the sliding element is not set to width and height, there is no sliding effect.

• If the element is set to height and width, it slides vertically up and down.

• Animation effect: Height property changes from 0 to set value, no transparency animation.

• If the element is positioned, the offset direction will change if bottom is involved.

The fading

FadeIn () and fadeOut() methods

• fadeIn() : fadeIn, opacity gradually increases and final display.

• fadeOut() : fadeOut, gradually reduce transparency and finally hide.

• fadeToggle() : Toggle effect.

• fadeTo() : Fades in or out to a specified transparency. Fade in and out.

Animation effect, performing transparency animation. Also toggles between block and None on the display property.

parameter

If no parameter is passed: The default transition time is 400 ms.

If the argument is passed:

  • Word formats: “slow”,”normal”, “fast”

  • The numeric time, in milliseconds, during which a show or hide animation appears.

        // Add a click event to fade in and fade out
        $btn1.click(function () {
          $pic.fadeOut("slow")
        })
        $btn2.click(function () {
          $pic.fadeIn(1000)
        })
        $btn3.click(function () {
          $pic.fadeToggle()
        })
        $btn4.click(function () {
          $pic.fadeTo(500.0.5)})Copy the code

JQuery animation

Animate () Animation methods

Action: Executes a custom animation of a CSS property set.

Grammar: $(selector). The animate (styles, speed, much the callback)

  • Parameter 1: The collection of the CSS property name and the property value of the end of the motion.

  • Parameter 2: Optional, specify the animation speed, default is “normal”. Other values can be “slow”, “normal”, or “fast” in the numeric format, in milliseconds.

  • Parameter 3: Optional, specifying the easing function to set the animation speed at different animation points, including Swing (speed up and then slow down) and Linear (constant speed).

  • Parameter 4: Optional function to be executed after animate.

Note: Other motion methods, such as slideUp(), also have arguments 3 and 4.

        // Get the element
        var $ps = $("p");
        // Habit stores exercise time in a variable
        var during = 2000;
        // Add click events to make elements move
        $ps.click(function () {
            // Change the left value to 500
            $(this).animate({"left": 500},during,"swing".function () {
                // At the end of the movement, make the element red
                $(this).css("background"."red")})// All attributes with numbers can move
            $(this).animate({"width": 500$(})this).animate({"opacity": 0.5$(})this).animate({"background": "# 000"}) // Can't exercise
        })
Copy the code

The animation queue

• If more than one animation is defined on the same element object, the animation is queued up for execution.

• If different element objects are animated, there is no queuing mechanism.

• If it is other non-motion code, it will not wait for the motion to complete.

• The show and hide method of native animation that I learned before, if set to the same element, also have animation queue.

• Movement on the same element can be reduced to a chain-called method.

Animation delay

Delay () is set before a movement method, indicating that the subsequent movement should be executed after the specified time, which has the effect of delaying the movement.

  • Parameter: The value of time, indicating the time of delay.

In addition to the animate method, other motion methods such as slideup(),slidedown() also have delay effects.

$box2.delay(2000).animate({"left": 500},during);
Copy the code

Stop the animation stop() method

• Stop () sets how to stop the queued animation on the element object.

There are two arguments, both Boolean.

  • Parameter 1: Set whether to clear the following animation queue. If true, clear; if false, stop the current animation without clearing.

  • Parameter 2: Sets whether the current animation is completed immediately. If true, the animation is completed immediately and the object is moved to the end position immediately. If false, the animation is not completed and the object is stopped at the current position immediately.

By default, both parameter values default to false.

Based on the values of the two parameters, there are four stopping modes.

In practice, it is generally required to clear the queue behind, stop at the current position, and use stop(true,false) more often.

Clear the animation queue

If you put an active program in an event function, and the event is fired multiple times, and the function is executed multiple times, you add multiple animations to an element, and you queue the animations. Need to clear the queue animation, anti-harassment operation.

  • Method 1: Stop all previous animation queues before each new motion starts

Use the stop() method.

Add a stop(true) before each motion function to clear the animation queue before the motion is executed and stop at the current position.

        Clear animation queue method 1: Stop all animation queues before each new movement starts
        $box1.mouseenter(function () {$(this).children().stop(true).slideUp(during)
        })
        $box1.mouseleave(function () {$(this).children().stop(true).slideDown(during)
        })
Copy the code
  • Method 2: Use function throttling

Use the function throttling method, if the element is moving, return directly, do not execute the following movement code.

• Every jQuery object can call an is() method that displays some state of the element object.

• If the argument position is is(” :animated “), the return value is Boolean, true meaning motion, false meaning no motion.

        // Clear the animation queue method 2: use function throttling
        $box1.mouseenter(function () {
            // Determine if the element itself is in motion, and if so, simply return without adding a new motion down
            if ($(this).children().is(":animated")) {
                return;
            }
            // If you go to this point, the element is not moving, you can add a new movement
            $(this).children().stop(true).slideUp(during)
        })
        $box1.mouseleave(function () {
            // Determine if the element itself is in motion, and if so, simply return without adding a new motion down
            if ($(this).children().is(":animated")) {
                return;
            }
            $(this).children().stop(true).slideDown(during)
        })
Copy the code