1. Overview of jQuery

1. Js library

Library is a specific set (functions, methods) that is wrapped

2. The concept of jQuery is a JS library

Advantages: lightweight/compatibility, etc

2. Basic use of jQuery

1,2 download

<head>
<script src="jquery.js"></script>
</head>
Copy the code

3. JQuery entry functions

 $(function() {
            $('div').hide();
        })
Copy the code

4. JQuery’s top-level object $

A window equivalent to a native JS can call a method through $

5. JQuery object and DOM object

  • DOM object native JS object/jQuery object$(' '); To obtain
  • JQuery object is an object generated by wrapping DOM object with $(stored in pseudo-array form).

JQuery objects can only use jQuery methods, whereas DOM objects use native JS properties and methods

Conversion between DOM objects and jQuery objects

  1. DOM object to jQuery object:$(DOM object)
  2. JQuery object to DOM object:$('div')[index] / $('div').get(index)

Commonly used jQuery API

JQuery selector

  1. $(‘ selector ‘)

  2. Hierarchical selectors: child selectors > etc

  3. JQuery implicit iteration (important) —- when performing the same operation on an element

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

  4. JQuery filters the selector

  • $('li:first')Gets the first Li element
  • $('li:last')Gets the last Li element
  • $('li:eq(index)')Select element index numbers starting at 0 from the obtained li element
  • $('li:odd')The element whose index number is odd in the obtained li element
  • $('li:even')The element whose index number is even in the obtained li element
  1. JQuery Filter method (key)
  • $('li').parent()Finding the parent returns the parent of the element at the most recent level
  • $('ul').children('li')The equivalent of$('ul>li')The most recent first-degree son
  • $('ul').find('li')The equivalent of$('ul li')Descendant selector
  • $('.first').siblings('li')Find sibling nodes, not including itself
  • $('.first').nextAll()Find all the peers after the current element
  • $('.first').prevtAll()Finds all the peers of the current element
  • $('div').hasClass('protected')Checks if the current element contains a specific class and returns true if so
  • $('li').eq(index)The equivalent of$('li':eq(index))Index starts at 0
  • $(this) jQueryThe current element this is not quoted

  1. Exclusivity in jQuery

    Apply implicit iteration

$(this).index() $(this).index()

2. JQuery style manipulation

1. Operate the CSS method

  • $(this).css('color')// Write only the attribute name, return the value of the attribute
  • $(this).css('color','red')
  • $(this).css({ ... })// If the object is a compound attribute, it must be humped. If the value is not a number, it must be quoted

2. Set the class style method

  • Add the class:$('div').addClass('current')
  • Delete categories:$('div').removeClass('current')
  • Switch:$('div').toggleClass('current')

Chain programming:

Reason: Since many jQuery methods return the current jQuery object directly, you can continue. The method;

  1. Val (), HTML (),text(),attr(), return a text string;
  2. Next () nextAll() parent() children() prev()…
  3. Most of the rest returns the current jQuery object;

3. Class operations are different from classNames

ClassName overrides the original className in jQuery, but addClass does not

JQuery effects

1. Show hide

  • show([speed],[easing],[fn])
  • hide([speed],[easing],[fn])
  • Switch: toggle (); Under normal circumstances, there is no parameter directly hidden display

Slide 2.

  • Sliding slideDown ();
  • Sliding slideUp ()
  • Toggle slideToggle()

3. Event toggle hover([over],out)

  • Event switch hover if you write only a function that triggers both mouse over and mouse off

4. Animation queue and its stopping queuing method

  • Stop queuing stop() needs to be written at the beginning of the animation

5. Fade in and out

  • Fade in fadeIn ();
  • Fade out fadeOut ();
  • fadeTo(speed,opacity); Opacity must be set to 0~1
  • Switch fadeToggle ();

Customize animate

The animate grammar (params, [speed], [much], [fn])

Params: Style properties that you want to change, passed as objects, must be written. Attribute names can be unquoted, and camel name is required for compound attributes.

Animate returns the top: // Instead of a document, HTML and body animate

$("body,html").stop().animate({
           scrollTop:0
        })  
Copy the code

4. JQuery attribute manipulation

1. Set or get the element’s inherent property value prop()

  • Get attribute syntaxProp (" property ")
  • Set property syntaxProp (" property "," property value ")

2. Set or get the element’s custom attribute attr()

  • Get attribute syntaxAttr (" property ")// Similar to native getAttribute()
  • Set property syntaxAttr (" attribute "," attribute value ")// Similar to native setAttribute()
  • Custom attributes for H5 are also available(data-...)

Data (), where the data is stored in the element’s memory

  • Add-on data syntaxdata("name","value")// Appends data to the selected element
  • Fetch data syntaxdate("name")// Get data from the selected element
  • You can get H5 custom propertiesdata-indexGet a number

$(“.j-checkbox:checked”).length

5. Text value of jQuery content

  1. The normal element content HTML () is equivalent to the native innerHTML
  2. The plain element text content text() is equivalent to the native innerText
  3. Gets the Settings form value val() equivalent to the native value

Other:

  • Intercept the string substr(1)
  • parents(); The selector finds all ancestor elements
  • Praents (” selector “); The selector finds the specified ancestor element
  • Keep two decimal places. ToFiexd (2);

JQuery element manipulation

1. Iterate over elements

  • Grammar 1:$("div").each(function(index,demEle){})Index is the index number, demEle is each DOM element object, not jQuery object (need to convert to jQuery object $(demEle))
  • Syntax 2:$.each($("div"),funciton(index,demEle{}))The method iterates over elements primarily for iterating over data (arrays/objects)

Processing data $. Each (arr / {name: “”, the age:}, funcition (I, ele) {})

2. Create elements

$("<li></li>");

3. Add elements

  • Internal additions: element.append(); // Put it at the end of the content

Element.prepend (); // put it at the top of the content

  • External add: element.after(” content “) // Place the content after the element

Before (” content “) // Put the content before the element

  • Delete element:
  1. element.remove(); // Delete the matched element (itself)
  2. element.empty(); // Remove all child nodes in the set of matched elements
  3. Element.html (“”””) // Empties the content of the matched element

JQuery event

JQuery event registration

Element. Event (function(){})

JQuery event handling

1. Event handling on() binding event

Syntax: element.on(events,[selector: child selector of an element],fn)

Event delegate: Binds events originally assigned to child elements to parent elements

3. Automatically trigger event trigger()

  1. Element. Event ()
  2. Element. Trigger (” event “)
  3. TriggerHandler (” event “) does not trigger the element’s default behavior

JQuery event object

  • Prevent default behavior:event.preventDefault()orreturn false
  • To prevent bubbling:event.stopPropagation()

JQuery Other methods

$.extend([deep],target,object1,[objectN])

  1. Deep :true Indicates deep copy. The default value is false. Shallow copy
  2. Target: indicates the object to copy
  3. Object1: Object to be copied to the first object
  4. Shallow copy is to copy the address of a complex data type to the target object. Modifying the target object will affect the copied object
  5. Deep copy full clone, all data objects, will not be overwritten, if there are no conflicting attributes will be merged together

2. Coexistence of multiple libraries

Solution:

  1. Change the $sign to jquery
  2. The jQuery variable specifies a new name:$.noConflict() var xx=$.noConflict();

JQuery plugin: The home of jQuery

  • Waterfall flow plug-in
  • Image lazy loading: The visual area shows the image JS written at the end of the DOM element
  • Full screen slide
  • The bootstrap plug-in

JQuery size, position operation

JQuery dimensions

  • Width ()/height() //
  • InnerWidth ()/innerHeight() // contains the padding
  • OuterWidth ()/outerHeight() // includes padding, border
  • OuterWidth (true)/outerHeight(true) // Contains padding, border, and margin

Location of jQuery

offset() position() scrollTop()/Left()

  • 1. Offset () Gets the setting position (offset) from the document independent of the parent
  • 2. Position () gets the position(offset) relative to the positioned parent element. If there is no positioned parent, base it on the document
  • 3. ScrollTop ()/scrollLeft() gets the head and left side of the setting to be rolled out