DOM loading and composition events

$(document).ready() method

The ready event occurs when the DOM has loaded and the page has been fully rendered

The $(document).ready() method is similar and different from the window.onload method in js

different execution times

window.onload must wait until all elements in the page, including images, are loaded before executing.
$(document).ready() is executed after the DOM structure is drawn, without waiting until the loading is complete

window.onload cannot be written multiple times at the same time, if there are multiple window.onload methods, only one
$(document).ready() can be written at the same time, and all can be executed

window.onload is not abbreviated
as $(document).ready(function(){}) can be abbreviated as $(function(){})

$(document) can be abbreviated as $(function(){}) when there is no parameter, the default is document

Event binding bind(type[,data],fn): It has three parameters. The first one is required to specify one or more events added to the element.

multiple events separated by spaces

The second is the optional parameter extra data passed to the function

The third is to specify a function to run when the event occurs

$(document).ready(function(){
  $("button").bind("click",function(){
    $("p").slideToggle();
  });
});
1 Wait for the DOM to load 2 Find the element to bind the click event
3 find the content element hide if the content element is shown show if hidden
The slideToggle() method toggles the visible state of an element by using a sliding effect (height change)

Synthetic event hover() toggle()

Hover means that when the mouse is on the button, the mouse changes and slides over, and it should return to the original state again.

$(document).ready(function(){
  $("p").hover(function(){
    $("p").css("background-color","yellow");
    },function(){
    $("p").css("background-color","pink");
  });
});
When the mouse hovers over p the color changes

toggle()

The method calls the next method each time a single machine will repeat the first one at the end. If there are only two switches back and forth

$(document).ready(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});

Every time the button is clicked it will change the background

DOM loading and composition events

Guess you like