The target

  • Ability to write common jQuery selectors
  • Ability to manipulate jQuery styles
  • Be able to write common jQuery animations
  • Ability to manipulate jQuery properties
  • Ability to manipulate jQuery elements
  • Manipulation of jQuery element sizes and positions

directory

  • JQuery selector
  • Jquery-style manipulation
  • Effect of jQuery
  • JQuery attribute Manipulation
  • JQuery text attribute value
  • JQuery element manipulation
  • JQuery size and position operation

1. JQuery selector

1.1 jQuery Basic selector

Element JS can obtain elements in many ways, which are very miscellaneous and inconsistent with compatibility. Therefore, jQuery encapsulates and makes it standard to obtain elements.

$(' selector ') // The selector is written to the CSS selector, but with quotesCopy the code
  • ID selector: $(‘# ID ‘)
  • Full selector: $(‘*’)
  • Class selector: $(‘.class’) // gets elements of the same class
  • Tag selector: $(‘div’) // Gets all elements of the same tag
  • Union selector: $(‘div,p,li’) // Selects multiple elements
  • Intersection selector: $(‘li.current’) // Intersection element

1.2 jQuery Level selector

  • $(‘ul>li’);

Use the > sign to get the parent son level element; Note that grandchild level elements are not retrieved

  • Descendant selector: $(‘ul li’);

Get all li elements under UL, including grandchildren, using Spaces to represent descendant selectors.

Knowledge of bedding

JQuery Settings

$('div').css(' property ',' value ')Copy the code

1.3 Implicit Iteration (Important)

The process of iterating through internal DOM elements (stored as pseudo-arrays) is called implicit iteration.

Simple to understand: to match all elements to loop through, execute the corresponding method, instead of us to loop again, simplify our operation, convenient for us to call.

1.4 jQuery filter selector

  • :first: $(“li:first”)

// Get the first li element

  • : the last: $(‘ li: the last)

// Get the last li element

  • :eq(index): $(‘li:eq(2)’)

// Select the element with index 2, starting with index 0

  • :odd: $(‘li:odd’)

// Select the element whose index number is odd

  • :even: $(‘li:even’)

// Select the element whose index number is even

1.5 JQuery Filter method (key)

  • parent(): $(“li”).parent();

// Find the parent

  • children(selector): $(“ul”).children(“li);

// equivalent to $(“ul>li”), nearest grade (biological son)

  • find(selector): $(“ul”).find(“li”);

// Equivalent to $(“ul li”), descendant selector

  • siblings(selector): $(“.first”).siblings(“li”);

// Find sibling nodes, not including itself

  • nextAll([exprl]): $(“.first”).nextAll()

// Find all the peers after the current element

  • prevtAll([expr]): $(“.first”).nextAll()

// Find all the peers after the current element

  • hasClass(class): $(‘div’).hasClass(‘protected’)

// Checks if the current element contains a specific class, and returns true if it does

  • eq(index): $(‘li’).eq(2);

// equivalent to $(“li:eq(2)”),index starts at 0

Parent () children() find() siblings() eq()

1.6 Exclusivity in jQuery

For the effect of multiple choices, the idea of exclusivity: the current element sets styles, and the rest of the sibling elements clear styles.

$(this).css();
Copy the code
$(this).siblings().css();
Copy the code

2. Jquery-style operations

2.1 Operating the CSS

JQuery can use CSS methods to modify simple element styles. You can also manipulate classes and modify multiple styles.

  1. Parameter writes only the attribute name, which returns the attribute value
$(this).css("color");
Copy the code
  1. The parameters are the name of the attribute, the value of the attribute, separated by commas, and set a set of styles. The attribute must be quoted, and the value may not be quoted if it is a number
$(this).css("color", "red");
Copy the code
  1. Parameters can be in the form of objects, making it easy to set multiple styles. Attribute names and attribute values are separated by colons (;). Attributes can be quoted without quotation marks (;)
$(this).css({width:400, height:400, backgroundColor:"pink");Copy the code

2.2 Setting class style methods

The function is the same as the previous classList, you can manipulate the class style, pay attention to the operation class inside the parameter do not dot.

  1. Add the class addClass ()
$("div").addClass("current");
Copy the code

Note: the className of the original element is overwritten in the className attribute of the native js, whereas addClass() adds the className and does not override the className.

  1. Remove class removeClass ()
$("div").removeClass("current");
Copy the code
  1. Switch class toggleClass ()
$("div").toggleClass("current");
Copy the code

3. JQurey effect

JQuery encapsulates many animation effects. The most common ones are as follows:

Show hidden

  • show()
  • hide()
  • toggle()

sliding

  • slideDown()
  • slideUp()
  • slideToggle()

The fading

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Custom animation

  • animate()

3.1 Display hiding effect

1. Display syntax specifications

show([speed,[easing],[fn]])
Copy the code

2. Display parameter L

(1) Parameters can be omitted and displayed directly without animation

(2) Speed: a string of one of three predetermined speeds (” slow”,”nomal”,or “fast”) or the number of milliseconds (e.g., 1000) in which the animation takes place.

(3) easing:(Optional) specifies the switching effect. The default is “swing” and the parameter “linear” can be used.

(4) FN: callback function, which is executed when the animation is completed, once for each element.

3. Hide syntax conventions

hide([speed,[easing],[fn]])
Copy the code

4. Hide parameters

The value is consistent with the displayed parameters.

5. Switch syntax specifications

toggle([speed,[easing],[fn]])
Copy the code

3.2 Sliding Effect

1. Slide effect grammar specification

slideDwon([speed,[easing],[fn]])
Copy the code

2. Syntax specification of upslide effect

slideUp([speed,[easing],[fn]])
Copy the code

3. Sliding switching effect syntax specification

slideToggle([speed,[easing],[fn]])
Copy the code

3.3 Event Switchover

hover([over],out)
Copy the code
  • Over: function to trigger when the mouse moves over an element (equivalent to a mouseenter)
  • Out: function to trigger when the mouse moves out of the element (equivalent to mouseleave)

Note: If you write only one function, both mouse over and mouse away will be triggered.

3.4 Animation queue and its stopping queuing method

1. Animation or effect queue

Animations or effects are executed once triggered, and if triggered more than once, multiple animations or effects are queued to execute.

2. Stop waiting in line

stopp()
Copy the code
  • The stop() method is used to stop an animation or effect.
  • Note: stop() must be written before the animation or effect to end the previous animation.

3.5 Fade in and out effect

1. Fade-in effect syntax specification

fadeIn([speed,[easing],[fn]])
Copy the code

2. Fade-out syntax specification

fadeOut([speed,[easing],[fn]])
Copy the code

3. Syntax specification for fade-in and fade-out switching effect

fadeToggle([speed,[easing],[fn]])
Copy the code

Adjust gradually to the known opacity

fadeTo([speed].opacity,[easing],[fn]])
Copy the code
Effect of parameters
  • Opacity must be set. The value is between 0 and 1
  • Speed: A string representing one of three predetermined speeds (“slow”,”normal”,or”fast”) or the number of milliseconds in which the animation takes place. He has to write a
  • Easing :(Optional) specifies the switching effect. The default is “swing” and the parameter “linear” is available.

3.6 Custom Animate

1. Grammar

animate(params,[speed],[easing],[fn])
Copy the code

Parameters of 2.

  • Params: Style properties that you want to change, passed as objects, must be written. Attribute names may not be quoted, but for compound attributes, the camel name is borderLeft. Other parameters can be omitted.

4. JQuery attribute operations

4.1 Setting or getting the inherent attribute value prop()

An inherent attribute is an element’s own attribute, such as the href of the element, or the type of the element.

1. Get the attribute syntax

Prop (" property ")Copy the code

2. Set the property syntax

Prop (" property "," property value ")Copy the code

4.2 Setting or Getting the Element custom attribute value attr()

Attributes that the user adds to an element are called custom attributes. For example, add index=”1″ to div.

1. Get the attribute syntax

Attr (" attribute ") // Similar to native getAttribute()Copy the code

2. Get the attribute syntax

Attr (" attribute ", "attribute value ") // Similar to native setAttribute()Copy the code

The change 2 method can also get H5 custom attributes

4.3 Data Cache Data ()

The data() method accesses data on the specified element without modifying the DOM element structure. Once the page is refreshed, the previously stored data is removed.

1. Additional data syntax

Data ("name","value") // Appends data to the selected elementCopy the code

2. Get data syntax

Data ("name") // Retrieves data from the selected elementCopy the code

At the same time, you can also read the HML5 custom attribute data-index, which is a number.

: checked selector
$(" Element: Checked ") looks for the selected form elementCopy the code

5. Text value of jQuery content

The content of the element and the value manipulation of the form.

5.1 Common Element Content HTML () (equivalent to native innerHTML)

HTML () // Gets the content of the elementCopy the code
HTML (" content ") // Sets the content of the elementCopy the code

5.2 Plain Element Text () (equivalent to innerText)

Text () // Gets the content of the element's textCopy the code
Text (" content ") // Sets the content of the element textCopy the code

5.3 Form value val() (equivalent to native value)

Val () // Gets the value of the elementCopy the code
Val (" content ") // Sets the value of the elementCopy the code
Querying ancestor elements
$(this).parents(" ancestor element class name ");Copy the code
Keep the n decimal method
.toFixed(2)
Copy the code

6. JQuery element manipulation

The main operations are to traverse, create, add, and delete elements.

6.1 Iterating over elements

JQuery implicit iteration does the same thing to the same type of element. If you want to do different operations on the same type of element, you need to use traversal.

Grammar 1:

$("div").each(function(index, doEle) {xxx; })Copy the code
  1. The each() method iterates over each matched element. It’s mostly DOM processing. Each each
  2. The inside callback takes two arguments: index is the index number of each element; DemEle is every DOM element object, not a jquery object

**3. To use the jQuery method, you want to convert this DOM element to the jQuery object $(domEle).

Syntax 2:

$.each(function(index, element) {xxx; })Copy the code
  1. The $.each() method can be used to iterate over any object. Mainly used for data processing, such as arrays, objects
  2. The callback takes two arguments: index is the index number of each element, and element traversal content

6.2 Creating Elements

Grammar:

$("<li></li>");
Copy the code

Dynamically create a

  • 6.3 Adding Elements

    1. Add it internally

    Element. Append (" content ")Copy the code

    Put content at the end of the matching element, similar to native appendChild

    Element. The prepend (" content ")Copy the code

    Put the content first inside the matching element.

    2. External configuration

    Element.after (" content ") // Puts the content after the target elementCopy the code
    Element.before (" content ") // Place the content before the target elementCopy the code
    1. Add elements internally. After generation, parent-child relationship
    2. Add an external element, and then generate a sibling

    6.4 Deleting Elements

    $(" element ").remove() // Remove matching element (itself)Copy the code
    $(" element ").empty() // Removes all child nodes in the matching element setCopy the code
    $(" element ").html("") // Clears the content of the matched elementCopy the code

    7. JQuery size and position operation

    JQuery 7.1 size

    Grammar:

    • Width ()/height()
    • InnerWidth ()/innerHeight() gets the width and height of the matching element including the padding
    • OuterWidth ()/outerHeight() gets the width and height of the matching element, including padding and border
    • OuterWidth (true)/outerHeight(true) Gets the width and height of the matching element, including padding, border, and margin
    Console. log($("div").width()); $("div").width(300); $("div").innerWidth(); $("div").innerWidth(); OuterWidth ()/ / 3. OuterWidth ()/outerHeight() gets set elements width and height + padding + border console.log($("div").outerWidth());  OuterWidth (true)/outerHeight(true) Gets the width and height + padding + border + margin size console.log($("div").outerWidth(true));Copy the code
    • If the above parameter is null, the corresponding value will be retrieved and a numeric value will be returned
    • If the parameter is a number, the corresponding value is changed
    • Arguments do not need to be written in units

    7.2 the jQuery position

    Offset (), position(), scrollTop()/scrollLeft()

    1. Offset () Sets or gets the element offset

    1. The offset() method sets or returns the offset coordinates of the selected element relative to the document, regardless of the parent.
    2. This method has two attributes, left and Top. Offset ().top is used to obtain the distance from the top of the document, offset().left is used to obtain the distance from the left of the document.
    3. Offset ({top:10,left:30});

    2. Position () gets the element offset

    1. The position() method is used to return the selected element’s offset coordinates with respect to the parent with the position, or the document if neither parent is positioned.
    2. The position() method can only be used to get, not to set element offsets.

    3. ScrollTop ()/scrollLeft() sets or gets the head and left side of the element to be rolled out

    1. The scrollTop() method sets or returns the rolled out header of the selected element
    2. The scrollLeft() method sets or returns the left side of the selected element that is rolled out
    Example: Back to top with animation
    1. Return to the top using animate animation
    2. The animate function has a scrollTop property that allows you to set the position
    3. But only elements animate, so $(“body, HTML “).animate(scrollTop:0).
    <div class="back"> Return top </div> <div class="container"></div> <script> $(function() {$(window).scroll(function() {// console.log( $(document).scrollTop()); if( $(document).scrollTop() >= $(".container").offset().top) { $(".back").fadeIn(); } else { $(".back").fadeOut(); }}); $(".back").on("click", function() { // $(document).scrollTop(0); $("body, html").stop().animate({scrollTop:0}); }); }); </script> </script>Copy the code