This is the second day of my participation in the August More Text Challenge.

Effect of jQuery

Show hidden

● Show ([speed,[easing],[fn]])

● 1, inside the parameters can be omitted, no animation directly display (generally do not add parameters, because these animations are too ugly)

● Speed. The value can be a string (slow,normal,fast) or the number of milliseconds (such as 1000) in which the animation took place

3, Negativity Used to specify the switching effect. The default is Swing (slow, fast, slow), and optionally linear(uniform).

● 4, FN callback function, when the animation is completed to execute the function, each function is executed once

Hide hide ([speed, [much], [fn]])

● Parameters are the same as show

Toggle switch ([speed, [much], [fn]])

● Parameters are the same as show

● Element switching: element display is hidden, element hidden is displayed

sliding

● Slide up slideDown([speed,[easing],[fn])

● Slide down slideUp([speed,[easing],[fn])

● Switch sliding slideToggle([speed,[easing],[fn])

Fade in and out (slow change in transparency)

● fadeIn([speed, [easing], [fn])

● Same parameters as above

● fadeOut([speed, [easing], [fn])

● fadeToggle([speed, [easing], [fn])

● fadeTo(speed, opacity, [easing], [fn])

● Adjust opacity gradually to the specified opacity (0~1, speed and opacity cannot be omitted)

Custom animation

●   animate(params, [speed], [easing], [fn] )

● Params: Style properties that you want to change are passed as objects. Attribute names may not be quoted, and compound attributes should use camel name (this parameter cannot be omitted, other parameters can be omitted).

Mouse after, leave the event complex writing method -> event switch hover

$(‘ selector ‘).hover(over, out);

● Over: Function to trigger when the mouse moves over an element (equivalent to a mouseenter)

● Out: The function to start when the mouse leaves the element (equivalent to mouseleave)

$(‘ selector ‘).hover(fn); If you write only one function, it will be triggered by both mouse over and mouse away

jQuery Stop animation/effect queuing stop

● jQuery animation and effect queue: Animation or effects are executed once triggered. If fired multiple times, multiple animations and effects are queued to execute

Stop queuing stop()

● The stop() method is used to stop an animation or effect

● Note: Stop () is written before an animation or effect, which is equivalent to stopping or ending the last animation or effect.

4. JQuery attribute operation

Sets or gets the inherent attribute value of the element

● An inherent attribute is an element’s inherent attribute, such as the type in href

->$(” selector “).prop(” Property name “)

● Set properties –> $(” selector “).prop(” Property name “, “property value “)

Sets or gets a custom property

● Attributes added by the user to an element are custom attributes, such as adding index to an element

Low access attributes – > $(” selector “). Attr (” attribute name “) (similar to the native js getAttribute ())

● (Note: H5 custom attributes start with data-) Return value is a string

Low set properties – > $(” selector “). Attr (” attribute name “, “attribute value”) (similar to the native js setAttribute ())

● Data cache data.(” attribute name “, “attribute value “)

● You can use this method to store data in the cache of elements

Low output Andy

● This method can also get H5 custom properties

● H5 custom attributes start with data-, such as data-index

● $(” selector “).data(” attribute name “)

● Different from attR method, data(” attribute name “) can obtain H5 custom attribute: 1, can not prefix data-; 2. The result is numeric

5. Text value of jQuery content

Operation on normal element content (equivalent to innerHtml() of native JS)

–> $(” selector “).html()

–> $(” selector “).html(” content “)

Operations on plain element text content (equivalent toInnerText () of native JS )

● Get the text content of the element –> $(” selector “).text()

● Modify the text content of the element –> $(” selector “).text(” content “)

● Operations on the text properties of the form

● Get the form text (value attribute value)–>$(” selector “).val()

● Set the literal value of the form element –> $(” selector “).val(” value “)

● The text in the form is set by the value property

6. JQuery element manipulation

1- Iterate over elements

● Although jQuery has implicit iteration, implicit iteration is the same operation done on the same type of elements. If you want to do different operations on the same type of element, you use traversal

$(” selector “). Each (function(index, domEle){})

● The 1– each() method iterates over each matched element, mainly for DOM processing

● 2– Two arguments to the callback function

● Index is the index number of the currently traversed element

● domEle is the DOM object currently traversed (note not the jQuery object)

To use jQuery’s methods, convert the DOM object to $(domEle)

$. Each (obj, function(index, value){})

● 1– the $.each() method can iterate over any object. Mainly used for data processing, such as arrays, objects

● 2– OBj is the traversal object

● 3– Arguments to the callback function

● index Indicates the index number of the current traversal

● Value is the element content currently traversed

2- Create elements

● Just wrap the element tag you want to create around it, e.g. Varli =(“

  • “);

    ## 3- Add elements

    Internal add

    ● Element.append (” content “), which adds content to the very end of the matching element, similar to native JS appendChild

    $(“ul”).append(“li”)

    ● Element.prepend (” content “), which adds the content to the first of the matched elements

    External add

    ● Element.after (” content “), put the content after the target element

    ● Element. before(” content “), place the content before the target element

    4- Delete elements

    ● Remove the matching element itself –> element.remove()

    Remove () $(“ul”).remove()

    ● Delete all child nodes in the matching set of elements –> element.empty()

    ● Clear matched element content (including child nodes, not including itself) –> element.html(“”)

    $(” selector “).html(); This is getting text content

    7. JQuery dimensions

    $(” selector “).width()/.height(); Gets/sets the width/height of the matched element

    ● If the parameter is empty, it is to get the corresponding value, the return is a number; If the parameter is a number, the corresponding value is modified (the parameter can be without a unit).

    $(” selector “).innerWidth()/.innerheight (); Gets/sets the width/height + padding value of the element

    $(” selector “).outerWidth()/.outerheight (); Gets/sets the width/height + padding + border of the element

    $(” selector “).outerWidth(true)/.outerheight (true); Gets/sets the width/height + padding + border + margin value for the element

    8. JQuery location

    ● $(” selector “).offset(); Gets/sets the offset coordinates of the matching element corresponding to the document, regardless of the parent

    ● The return value is an object containing the top and left values. To obtain one of these attributes, call the object –> $(” selector “).offset().top

    ● If you want to set the offset coordinate, also write parameters in the form of an object

    $(” selector “).position(); Gets the offset coordinate of the matched element relative to the parent with location, or the document if the parent has no location

    ● Note: The position method can only obtain data and cannot modify it

    ● $(” selector “).scrollTop() /.scrollLeft(); Gets/sets the distance by which the matched element is rolled by the scrollbar (the write argument is the setting)

    $(document).scrollTop(100) will jump to 100px when the page is loaded