Web front end lesson 44: jQuery framework (2) common methods

Time:2021-5-30

1. CSS () method

Used to change   The CSS style of JQ object is readable and writable, which is equivalent to   In JS   Style attribute

Syntax: $(“selector“).css(“key”, “value”);

The second parameter of the CSS () method is optional,

If there is only the first parameter, it is the read style;

If there are two parameters or JSON style parameters, it is to set the style.

Example, VAR $W = $(“div”).css(“width”);

console.log(parseInt($w)); / / the return value of the size of the JQ object contains the unit, which needs to be converted when using numbers.

Note that when writing CSS attribute names, you can use “Hump” format or “horizontal bar” format;

When the value of CSS attribute is a value with “PX” as the unit of measurement, PX unit can not be written, and quotation marks must be added when PX is written!

The width and height of CSS style in JQ can be directly accumulated on the basis of the original value

     $(“div”).css(“width”, “+=400px”); / / it can be used with monitoring events

2. Show () and hide ()

Show () is used to set the display of elements, which is equivalent to display: block in style;

Hide (), which is used to hide elements, is equivalent to display: none in style;

Syntax: $(“selector”).show(timeValue) || hide(timeValue);

Both methods can set parameters to define the time of the animation effect to be displayed and hidden.

 

These two methods can be used with the “toggle ()” method, and can easily switch elements, including show / hide switch and content switch.

Syntax: $(“click element”).toggle(function(){

$(“selector”).show(timeValue);

$(“selector”).html(“textContent”);

       },

       function(){

$(“selector”).hide(timeValue);

       });

In the toggle () method, multiple event handling functions can be bound to respond to the rotation of the selected element   Click event,

In addition, you can also define time and effect parameters (strings) to achieve animation effects, but the toggle () method has been canceled in later versions.

 

Code example:

Test
    


    Show div elements
    
    
    

    var d1=$(".div1");
    var d2=$(".div2");
    var d3=$(".div3");
    $("button").click(function () {
        d1.css({"width":200,"height":"200px",backgroundColor:"gold"});
        d2.css({"width":200,"height":"200px",backgroundColor:"gray"});
    });
//Add mouse entry, exit and click events to div1
    var colorArr=["red","yellow","blue","green","orange","indigo","purple","brown"];
    d1.bind({
        mouseenter: function () {
            $(this).animate({
                width:100,height:100,
                "backgroundColor":"hotpink",
                borderRadius:"50%",
            }, 1000). CSS ({// chained declaration)
                "backgroundColor":"hotpink",
                "border":"2px solid white"
            });   // The animate() method is not supported??
        },
        click:function () {
            var i=Math.floor(Math.random()*8);
            $(this).css("backgroundColor",colorArr[i]);     // Get random background color
        },
        mouseleave:function () {
            $(this).animate({
                "width":200,"height":"200px",
                borderRadius:"0",
            },1000).css({
                backgroundColor:"gold",
            });
            $(this).off("mouseenter");      // Remove events
        }
    });
//Add mouse over to div2
//Define the in event in the hover event
    d2.hover(function () {
            $(this).animate({
                "width":100,"height":"100px",
            }, 1000). CSS ({// chained declaration)
                "backgroundColor":"yellowgreen",
                "border": "2px solid darkorange",
                "cursor":"pointer",
            });
            d3.css({
                "backgroundColor":"red",
                "width":"100px","height":"100px",
                "borderRadius":"50%",
                "position":"absolute",
                "display":"none",
                "left":d2[0].offsetLeft+d2[0].offsetWidth+1+"px",
                "top":d2[0].offsetTop+2+"px",
            });
    //Define the click event in the in event of the hover
            $(this). Click (function() {// there are some problems: 1. After continuous and fast clicks, the target element can't stop moving all the time? 2. The click events will accumulate one by one, resulting in multiple moves?
                D3. Show (2000) // animation display
                    . animate ({"left": "+ = 500px" // defines the auto increment effect of the left attribute
                },1000);
                console.log(d3[0].offsetLeft);
                console.log(d3[0].offsetTop);
            });
        },
//Define the out event in the hover event
            function () {
                d3.animate({"left":d2[0].offsetLeft+d2[0].offsetWidth+1+"px"},2000);
                d3.hide(1000);      // Animation hiding
            })

3. Slidedown() and slideup ()

Slidedown (), which indicates the drop-down display   The style property is“ display:none ”Can be called   Slidedown() method;

Syntax: $(“selector”).slideDown(timeValue);

Slideup(), which indicates that the slide up is hidden. It can only be called when the element is displayed   Slideup() method,

Syntax: $(“selector”).slideUp(timeValue);

These two methods can define the “time” parameter to achieve animation effect, even if the time parameter is not set, there will be a shorter animation effect.

Note that there is a hidden property “boundary” between the two methods, that is, the position where the pull-down starts and the slide-up ends,   The default is the top border of the element;

It can be set by positioning   JQ object boundary attributes, change the action start and end position.

For the phenomenon of continuous fast operation leading to the continuous execution of animation is called “animation accumulation”, which can be solved by the “stop ()” method.

Stop () is used to stop all running animations on the specified element, if there are animations waiting to be executed in the queue (and

Clearqueue is not set to   They will be executed immediately.

Syntax: $(“selector”).stop(true||false);

If the parameter is true, the queue is cleared (the animation ends immediately),

The default value is false, which means that the executing animation will be completed immediately. At the same time, the original styles of show and hide will be reset, and the callback function will be called

4. Fadein () and fadeout ()

These two methods represent fade in and fade out effects.

Syntax: $(“selector”).fadeIn(timeValue);

$(“selector”).fadeOut(timeValue);

Note that the starting point of fadein () and the ending point of fadeout () are“ display:none ”Instead of“ opacity:0 ”。

In other words, if an element wants to fade in, it must be set“ display:none ”Attributes, not attributes“ opacity:0 ”Property.

Code example:

Show & hide
    
    
        button{display:block;margin: 0px auto;letter-spacing: 2px;}
        .div1{
            width: 100px;height: 200px;background-color: orangered;
            margin:0px auto;
        }
        .div2{
            width: 100px;height: 300px;border: 1px solid fuchsia;
            margin:0px auto;position: relative;
        }
        .div3{
            width: 100px;height: 200px;background-color: deepskyblue;
            bottom:0px;position: absolute;
        }
    


    Div operation
    
    
        
    

    var $d1=$(".div1");
    var $d2=$(".div2");
    var $d3=$(".div3");
    var $btn=$("button");
    $btn.toggle(function () {
        $d1.hide(3000);     // Hidden elements
        $(this). HTML ("display div1");
        $d2.fadeIn(3000);       // Fade in element
    },function () {
        $d1.show(3000);     // Display elements
        $(this). HTML ("hide div1");
        $d2.fadeOut(3000);     // Fade out element
    });
    $d2.hover(function () {
        for (var i=0;i<5;i++){
            $d3.slideUp(1000).slideDown(1000);     // Slide out & slide in elements
        }
    },function () {
        $d3.stop();     // Complete the running animation immediately
    })

PS: the “repeated animation effect” of slide in & slide out in the above example can be realized by the keyword “from… To…”.

5. Addclass() and removeclass ()

These two methods are used for append class and remove class.

Syntax: $(“selector”).addClass(“className”); / / append the class name without changing the existing class name

$(“selector”).removeClass(“className”); / / delete the specified class name without affecting other class names

There is no need to add “dot” before classname!!!

PS: you can operate element styles by adding and deleting class names.

6. Attr () method

In the original   JS to modify element attributes in the following way:

    document.getElementById(“#pic”).src=”newUrl”;

stay   Using in jquery   The attr() method reads and writes the attribute value of the element.

Syntax: $(“selector”).adttr(“key”, “value”);

When the attr () method has only one parameter, it represents the attribute of the “read” element.

Syntax: $(“selector”).adttr(“property”);

7. HTML () method

Used to “read and write” the contents inside the element, equivalent to native   “InnerHTML” in JS.

Syntax: $(“selector”).html(“textContent”);

When the parameter is not written in the HTML () method, it means to “read” the content of the element.