Add a class to the div whose id is box, click to execute the function, and then the function content is to add fontsize30 (class name) to perform the operation of one more class name
$("#addclass").click(function(){ $("# box").addclass("fontsize30") }) There is also a removal method, removeClass (without connecting the class name, all class names will be removed) to determine whether the element has the class name, use hasClass, if there is one If the words return true, otherwise false switch, toggleClass, if the element has a certain class, remove it, and add it if it doesn’t
The selected attribute specifies that the option is preselected when the page loads.
active-the
tab bar is switched when the link is clicked . Requirements: set the "mouse in" event for each li tag in the tab bar, add the active value to the current li, and remove the active value of other sibling elements li to
find the same subscript in the current tab bar div, add selected, remove other sibling elements selected
$(".wrapper>ul>li").mouseenter(function(){ $(this(dom object is turned into JQ object, where this is locked when the mouse is moved in dom object).addClass("active") adds active .siblings("li ") to the current li (after converting it into a JQ object, it will not change back here, and you can continue to use it).removeClass("active") to Remove the sibling element of li active var idx = $(this).index() Get the subscript of the current li $(".products>.main").eq(idx) (pass in the subscript of the locked object).addClass ("Selected").siblings("div").removeClass("selected") })
Webpage animation: If the
show function does not pass parameters, there will be no animation effect. If you want an animation effect, pass the parameter
1. Represents the duration of the animation, milliseconds, or a string representing the duration: fast (200) (200 milliseconds are displayed) ), normal(400), slow(600)
2. Callback function, after adding milliseconds, you can call back some content (2000, function() {alert("······")})
The hide function itself is hidden, it must be displayed before the operation can be performed.
The parameters passed in are the same as show, which belongs to the reverse contraction.
The toggle function is for switching. If it is hidden, it will be displayed, and if it has been displayed, it will be hidden. The function passed in is the same as hide or show.
The slideDown function is the same as the slideUp function, but instead of shrinking, it is the
fadeIn and fadeOut functions that slide in and out (from shallow to deep). The
css can also perform the above operations, but a lot of coordinate changes are required to fill in the code , Quite complicated
Use timer to substitute, and meet the requirements to automatically end the animation.
Condition: extract a function that can perform simple animation.
Parameter 1: obj: the object to be animated.
Parameter 2: speed: the speed of movement (can be positive or negative, so that it can avoid being in the function Change the plus and minus signs)
Parameter 3: target: the target position to execute the animation (you cannot rely on positive and negative here, so you need to add the speed condition at the same time && which target (|| or type) can be performed in order to perform which operation)
if not Change the positive and negative of speed, and only take positive values. You can add a function to judge. When the current position is greater than target, you can make speed=-speed
. When multiple objects share the same timer function, in order not to conflict,
1. Clear the timer of the global variable first.
2. Then add the specified object to the function of clearing the timer, otherwise it will affect other objects.
3. Add the specified object to the timer start.
Above is to add a timer attribute to the object in the execution animation to save the timer identifier
attr: To implement the style in the animation, such as: left top width, etc., it cannot be stlye.attr when quoted. This will treat it as an attribute in stlye, but it does not have it, so it must be stlye[attr] He sees it as a variable
callback: a callback function, which can execute the content of a global assignment function, and the shared function body where the callback is located is a local function
Let the div move to the 800 position, the animate method can effectively replace the complexity of the timer, one line of code can be
animate ({left: 800}, 2000, "swing", function () {alert ("executed") }), {inserted properties}, "inserted method"
parameter 1: must be passed in: object: the properties of the animation that needs to be done
Parameter 2: Optional, representing the duration of the animation
Parameter 3: Optional, slow swing uniform speed Linear
parameter 4: Optional, the callback function after the animation is executed, the callback function can also add nested animate, unlimited nesting, unlimited changes
If the html function
$("#box").html()
does not take parameters, it means to get all the content (including tags).
If parameters are passed in, it is the setting content (the content contains tags, and the tags will be parsed) , Will overwrite the original content of the
append function.
KaTeX parse error: Expected'EOF', got'#' at position 3: ("# ̲box"). ()
With parameters, you can create a label, but the created label only exists in memory , It can’t be displayed like html().
If you want to display it on the page, you have to append it. It becomes KaTeX parse error: Expected'EOF', got'#' at position 3: ("#̲box").append( ( "#box").$("Content"))
empty function
Clear the label, and clear the events bound to the current label together
$("#box").empty()
attr function
Change the attribute value
$("img").attr("src","images/aj2.jpg")
If the tag does not have this attribute, add
$("img").attr("aaa","aaaaa ") If there is no aaa change, it will be added.
You can also operate multiple attributes at the same time. Write aaa and src in parentheses.
Adding attributes without adding attribute values is to get attributes. Getting attributes that do not have will return the undefind
removeAttr function to remove the attributes
$ ("Img").removeAttr("attribute") can be removed,
or multiple attributes can be removed at the same time, but the space should be opened in the same "" in
addition to the selected attributes of the label itself, when the user chooses After getting the undefined
JQ1.6 version, properties that are of boolean type (only selected or not set by their own settings) such as checked, selected, disabled do not use the attr function, but use the prop function