I use jQuery in my work, but I only use a little bit, there are a lot of useless, there are a lot of basic forgot, now a simple review.

Show/Hide

$("div").hide(1000,"linear".function(){}) // Hide divCopy the code

First parameter, set the time to disappear (optional) Second parameter, transition effects, slow, fast, and normal (optional) Third parameter, hide the function executed after completion (optional)

$("div").show(1000,"linear".function(){}) // Display divCopy the code

The arguments are the same as hide()

$("div").toggle(1000,function(){}) // Toggle div display hideCopy the code

The arguments are the same as hide()

Fade in/out

Fade in and out is similar to show hide

$("div").fadeIn(1000,function(){}) // Fade into the hidden divCopy the code

The first argument, the time to fade in (optional) The second argument, the function to execute after fading (optional)

$("div").fadeOut(1000,function(){}) // Fade out the visible divCopy the code

The arguments are the same as fadeIn()

$("div").fadeToggle(1000,function// Switch fadeIn() and fadeOut()Copy the code

The arguments are the same as fadeIn()

$("div"). FadeTo (1000,0.5,function(){}) // Give div a gradient with opacityCopy the code

First argument, the time of the gradient (required) Second argument, opacity, between 0 and 1 (required) third argument, the function to execute after the gradient is complete (optional)

sliding

The effect of sliding is similar to fading in and out

$("div").slideDown(1000,function(){}) // Slide down divCopy the code

The first argument, the duration of the slide (optional) the second argument, the function to execute after the slide is complete (optional)

$("div").slideUp(1000,function(){}) // Slide div upCopy the code

The arguments are the same as slideDown()

$("div").slideToggle(1000,function(){}) // Switch slideDown() and slideUp()Copy the code

The arguments are the same as slideDown()

animation

$("div").animate({xxx},1000,function(){}) // Custom animationCopy the code

First argument, set of CSS properties (required) Note: Some CSS properties should be written in camel shape, such as {paddingLeft: “10px”} second argument, animation duration (optional) third argument, function executed after animation (optional)

$("div").stop(false.false// Stop animations or effects before they are completeCopy the code

The first argument, whether to clear the animation queue, defaults to false, that is, to stop the active animation and allow any enqueued animation to be executed backwards (optional). The second argument, whether to complete the current animation immediately, defaults to false (optional).

Methods the chain

JQuery can be written as follows, using sliding as an example

$("div").css("color"."red"SlideUp (1000).slidedown (1000) // make the red div slideUp and downCopy the code

Advantage: Written this way, the browser doesn’t have to look up the same element multiple times

Note:

Add class/ delete class

$("div").addClass("demo"// Add class demo $() to div"div").removeClass("demo"// Delete class demo $() from div"div").toggleClass("demo"// Add/remove the specified class value demo on divCopy the code

Add/remove elements

$("p").append("Append text"// Add $() to the end of the p element"p").prepend("Append text at the beginning"// Add $() at the beginning of the p element"img").after("Add text after"// Add $(to the img element"img").before("Add text in front") // Add before the img elementCopy the code
$("div".remove() // remove div and its children $("div").remove(".italic"// delete class="italic"All div elements $("div"Empty () // Remove the child element in the divCopy the code

size

$("div".width() // Sets or returns the width of the div (excluding inner margins, borders, and margins) $("div"Height () // Sets or returns the height of the div (excluding the inner margin, border, and margin) $("div".innerWidth() // Returns the width of the div, including the inner margin."div".innerheight () // Returns the height of the div, including the inner margin."div"OuterWidth () // Returns the width of the div (including the inner margin and border) $("div"OuterHeight () // Returns the height of the div (including the inner margin and border)Copy the code

The ancestors

$("div").parent() // Returns the parent element $("div".parents() // Returns all ancestor elements $("div").parents("ul"// Return ul element $(from all ancestor elements)"div").parentsUntil("span"// Return all elements between div and spanCopy the code

offspring

$("div").children() // Returns all immediate children in div $("div").children("p"// Return all p elements in div $("div").find("span"// Return all span elements in div descendants $("div").find("*") // Returns all descendant elements of the divCopy the code

compatriots

$("div".siblings() // Returns all siblings of the div $("div").siblings("p"// Return the p element $("div".next() // Returns the next sibling of the div element $("div").nextall () // returns all siblings of the div element $("h2").nextUntil("h6") // Returns all sibling elements between h2 and h6Copy the code

Similarly,prev (),prevAll(), and prevUntil() return the sibling elements before the selected element

filter

$("xxx").first() // Returns the first selected element $("xxx".last() // Returns the last selected element $("p").eq(1) // Returns the p element with index 1, that is, the second p element $("p").filter(".url"// return the element $(class = url) in the p tag"p").not(".url") // Returns nothing but class="url"Outside of the P tagCopy the code

The load of Ajax ()

Load () loads data directly on the server and places the returned data in the selected element.

$("div").load("demo.txt"// Load the contents of demo.txt into div $("div").load("demo.txt #p1") // add id= to demo.txt"p1"The element content is loaded into the divCopy the code
$(select).load(url,data,callback)
Copy the code

The first parameter is the url (required), the second parameter is data, the key-value pair requested (optional), and the third parameter is callback, the load() callback (optional), which contains the responseTxt result when the call succeeds. StatusTxt, which contains the status of the call. XHR, containing the XMLHttpRequest object. Such as:

$("div").load("demo_test.txt".function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+":"+xhr.statusText);
});
Copy the code