Summary of jQuery knowledge points

Keywords: JQuery

1.jQuery

Is a fast, compact, feature rich third-party JavaScript library

Function:

1. Select HTML element

2. Operation elements

3.CSS operation

4. Operation HTML event

​ ...

Use: import links to required HTML files

1. Direct introduction of network resources

2. Download network resources locally to import

​

2. Use of jquery

2.1 $(selector)

  • Universal selector selects all elements

    console.log($("*"));

  • The tag name selector selects an array

        console.log($("p"));

  • Select by class name

     console.log($(".p3"));

  • Combination selector

     console.log($("p.p3"));

  • Select an element with some attributes according to the attribute selector []

    console.log($("[class='p3']"));

  • Progeny and progeny selector

    console.log($("div p")[0]);
console.log($("div>div")[0]);

2.2 $(HTML (fragment))

Convert the HTML fragment into an Element element Element, and then encapsulate it with jQuery

2.3$(Element element)

Convert Element element to Jquery

2.4 $(anonymous function)

Anonymous functions are executed after the document is completed

Prevent jQuery code from running before the document is loaded

// Document ready event
        $(document).ready(function() {
            $("p").click(function() {
                $(this).hide();
            });
        });

//Anonymous function
$(function(){

})

3.jQuery event

click: when a user clicks an element, an event is triggered

  $(document).ready(function() {
            $("div").click(function() {
                alert("Point me");
            });
        });

$(".p1").mouseenter(function() {
                alert("It's already on me");
            })


//The bind() method adds one or more event handlers to the selected element and specifies the function to run when the event occurs.
$("button").bind("click",function(){
  $("p").slideToggle();
});

//Change the color of the input field when it loses focus (blur):
$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});
//Get focus
 $("input").focus(function() {
                // $(this).hide();
                $(this).css("background-color", "red");
            });

/*The change event occurs when the value of an element changes.

This event applies only to text field s, as well as textarea and select elements.

change() Function triggers a change event or specifies the function to run when a change event occurs.

Note: when used to select an element, the change event occurs when an option is selected. When used for text field or text area, this event occurs when the element loses focus.*/


$(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
});

//Hide or show p elements when clicking the mouse:

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

//The isDefaultPrevented() method returns whether the preventDefault() method was called on the specified event object.
//Examples 	 Prevent links from opening URL s and declare results from isDefaultPrevented():
$("a").click(function(){
event.DefaultPrevented();
alert("Blocked a The default behavior");
})
methoddescribe
bind()Attach one or more event handlers to the matching element
blur()A blur event that triggers,, or binds a function to a specified element
change()Triggers, or binds a function to the change event of the specified element
click()Trigger, or bind the function to the click event of the specified element
dblclick()Trigger,, or bind the function to the double click event of the specified element
delegate()Attach one or more event handlers to the current or future child elements of the matching element
die()Remove all event handlers added through the live() function.
error()The error event that triggers,, or binds the function to the specified element
event.isDefaultPrevented()Returns whether event.preventDefault() was called on the event object.
event.pageXMouse position relative to the left edge of the document.
event.pageYMouse position relative to the top edge of the document.
event.preventDefault()Block the default action for the event.
event.resultContains the last value returned by the event handler triggered by the specified event.
event.targetThe DOM element that triggered the event.
event.timeStampThis property returns the number of milliseconds from January 1, 1970 to the time of the event.
event.typeDescribes the type of event.
event.whichIndicates which key or button was pressed.
focus()Trigger,, or bind the function to the focus event of the specified element
keydown()Trigger, or bind the function to the key down event of the specified element
keypress()Trigger, or bind the function to the key press event of the specified element
keyup()Trigger, or bind the function to the key up event of the specified element
live()Add one or more event handlers for current or future matching elements
load()The load event that triggers,, or binds the function to the specified element
mousedown()Triggers, or binds the function to the mouse down event of the specified element
mouseenter()Triggers, or binds a function to the mouse enter event of the specified element
mouseleave()Trigger, or bind the function to the mouse leave event of the specified element
mousemove()Triggers, or binds the function to the mouse move event of the specified element
mouseout()Triggers, or binds the function to the mouse out event of the specified element
mouseover()Triggers, or binds a function to the mouse over event of the specified element
mouseup()Triggers, or binds a function to the mouse up event of the specified element
one()Add an event handler to the matching element. The processor can only be triggered once per element.
ready()Document ready event (when HTML document ready is available)
resize()Triggers, or binds a function to the resize event of the specified element
scroll()Trigger,, or bind the function to the scroll event of the specified element
select()Trigger,, or bind the function to the select event of the specified element
submit()Trigger,, or bind the function to the submit event of the specified element
toggle()Bind two or more event handler functions to execute when a rotating click event occurs.
trigger()Specified event for all matching elements
triggerHandler()The specified event of the first matched element
unbind()Removes an added event handler from the matching element
undelegate()Remove an added event handler from the matching element, now or in the future
unload()Triggers, or binds a function to the unload event of the specified element

4. Effect

4.1 hide / show

Hide (): hide HTML elements

Parameters: two optional

1. MS string type of speed number type (fast/slow)

2. Function is a callback function, and the operation after callback is completed

 $("#hide").click(function() {
                $(this).hide(1000, function() {
                    alert("I've hidden");
                });
                $("p").hide(1000);
                $("#show").show(1000);
            });

show(): display HTML elements

Parameters: two optional

1. MS string type of speed number type (fast/slow)

2. Function is a callback function, and the operation after callback is completed

 $("#show").click(function() {
                $(this).hide(1000);

                $("p").show(1000);
                $("#hide").show(1000);
            });

toggle(): displays the hidden elements and hides the displayed elements

Parameters: two optional

1. MS string type of speed number type (fast/slow)

2. Function is a callback function, and the operation after callback is completed

 $("#btn").click(function() {
                $("p").toggle(1000, function() {
                    alert("The state is switched");
                });
            });

4.2 fade in and fade out

fadeIn(): fade in the hidden elements slowly

//The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

//The optional callback parameter is the name of the function to be executed after fading is completed.

 $("#btn").click(function() {
                $("div").fadeIn(3000, function() {
                    alert("I've shown");
                });

            });

fadeOut(): fade out the displayed elements slowly

$("#div2").fadeOut(3000, function() {
                    alert("I'm slowly disappearing");
                });

fadeTo(): gradient gives opacity value

 // Give the div3 gradient an opacity value
  // $(selector).fadeTo(speed,opacity,callback);
                $("#div3").fadeTo("fast", 0.15, function() {
                    $("#div3").text(" I'm already fading ");
                });

4.3 sliding

slideDown(): used to slide elements down

Syntax: $(selector).slideDown(speed,callback);

Parameters: speed (effect duration) and callback (callback function)

$(".btn2").click(function() {
        $(".app2").slideDown(3000, function() {
            $(".app2").css("background", "pink");
        });

slideUp(): used to slide elements down

 $(".btn1").click(function() {
        $(".app1").slideUp();
    });

slideToggle(): this method can switch between slideDown() and slideUp()

 $(".btn3").click(function() {
        $(".app1").slideToggle();
        $(".app2").slideToggle();
    });

4.4 animation

animate(): used to create custom animations

Syntax: $(selector).animate({params},speed,callback);

To manipulate the position, remember to first set the CSS position attribute of the element to relative, fixed, or absolute

When using animate(), all attribute names must be written using the Camel notation. For example, paddingLeft must be used instead of padding left, and marginRight must be used instead of margin right

$("button").click(function() {
        $("div").animate({
            left: '250px',
            top: '50px',
            opacity: '0.2',
            width: '100px',
            height: '100px'

        });
    });

4.5 stop effect or animation

stop(): used to stop animations or effects before they are completed.

$(selector).stop(stopAll,goToEnd);

$("#stop").click(function(){
  $("#panel").stop();
});

4.6 chain call

Through jQuery, you can link actions / methods.

Chain allows us to allow multiple jQuery methods (on the same element) in a statement.

  $(document).click(function() {
            //call chaining 
            $("#div1").css("color", "red").slideUp(2000)
                .slideDown(2000)
                .fadeIn(2000)
                .fadeOut(2000);
        });

6. Operate the dom node

6.1 obtaining nodes

$(selector)

6.2 obtaining content

. text(): forcibly obtain the text console.log($("#app").text());

​
. html(): get the text and label console.log($("#app").html());

. val(): get the value in the input box

 $("#btn").click(function() {
        // Set the value in the input content box
        $("input").val("999");
        console.log($("#input").val());
    });

. attr(): get the attribute console.log($("a").attr("href"));

6.3 setting content

text(): console.log($("#app").text("setting"));

​ html(): console.log($("#app").html("<p>hdhhdhdh</p>"));

val(): set the value $("input").val("999") in the input box;

​ attr():

// Set the properties of a
    $("a").attr("href", "http://taobao.com");
    $("a").attr({
        "name": "username",
        "title": "sss"
    });

6.4 callback function:

Parameters: two

The subscript of the current element in the selected element list

Text is old text

Return as the return value of the function will be used as the new content displayed inside the element

	// The callback function i is the subscript of the selected element
    $("#app").text(function(i, text) {
        console.log(i);
        console.log(text);
        return "123";
    });

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-vmms2num-1631259909607) (D: \ typera \ Ajax \ img \ image-20210910152927790. PNG)]

6.5 adding elements

6.5.1 append method

append: insert content at the end of the selected element and add content inside the element

  $("#div1").append(" append text ");
 var p1 = "<p>p1</p>";
    var p2 = "<p>p2</p>";
    $("#div1").append(p1, p2);

6.5.2 prepend method

prepend: insert content at the beginning of the selected element and insert content inside the element

 $("#div1").prepend(" add text at the beginning ");
    var p1 = "<p>p1</p>";
    var p2 = "<p>p2</p>";
    $("#div1").prepend(p1, p2);

6.5.3 after method

After: inserts content after the selected element

// Outside the current element
    $("#div1").after(p1, p2);

6.5.4 before method

Before: inserts content before the selected element

  $("#div1").before(p1, p2);

6.6 deleting elements

remove: deletes the selected element (and its child elements)

empty(): deletes child elements from the selected element

// Delete all div and its child elements
     $("div").remove();


    // Delete div element with id app
    $("div").remove("#app");
    $("#div1").empty();

6.7 static method

each: traverse the result of the current element

// Can be traversed
    $("div").each(function(index, element) {
        console.log($(this));
        console.log($(index));
        console.log($(element));
    });

​ map

​ toArray

6.8css

css can set the effect of elements

$("p").css("background-color");

​

​

Posted by Viruthagiri on Sat, 20 Nov 2021 22:07:44 -0800

Hot Keywords

©2024 Programmer Group