This is the 13th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

I met the jQuery

JQuery is one of the most widely used libraries in JavaScript, and it greatly simplifies JavaScript programming. Every front-end engineer getting started with JavaScript should know and learn about it.

Why is jQuery so popular?

• Eliminate browser differences: We don’t need as much verbose code to bind events to different browsers as we do with native JS
• A concise way to manipulate the DOM
• Easy to achieve animation, modify CSS and other operations

Using jQuey

You can download it from the jQuery official website. It is just a jquery-xxx. js file. There are two versions, compressed and uncompressed. Then introduce the jQuery file into the page.

Two tools of jQuery

JQuery core functions

What the jQuery library exposes to the outside is
$Or jQuery, which we can use directly after introducing the jQuery library$Can.​

JQury is a function object.

Use the jQuery function: $() or jQuery()

Parameters:

• Function: Executes this callback function when the DOM has finished loading
• Selector characters: Find the matching tags and encapsulate them as jQuery objects
• DOM object: Encapsulates a DOM object as a jQuery object
• HTML tag string: Create tag object and wrap it as jQuery object

JQuery Core Object

Executing a jQuery function returns a jQuery object. This object is an array of pseudo-elements containing any number of DOM elements that match.

Using jQuery objects:
$Obj. XXX (), such as:$obj.length

Basic behavior:

• Size ()/length: the number of CONTAINED DOM elements
• [index]/ GET (index) : obtains the DOM element of the corresponding position
• Each () : traverses all contained DOM elements
• Index () : obtains the subscript of the corresponding element

Supplementary: a pseudoarray is an object object that has the same length attribute as an array, as well as the numeric subscript attribute, but no other special methods for an array such as forEach(), poop(), etc.

The selector

Basic selector

What it does: It is used to find specific page elements

Type:

• #id: id selector
• Element: Element selector
• .class: property selector
• * : Any tag
• Selector1 selector2, selectorN: take multiple selectors and set selector (combination)
• Selector1selector2selectorN: take the intersection of multiple selectors fellowship (selectors)

Example:

$(".myClass");
Copy the code

Hierarchical selector

A selector that looks for child, descendant, or sibling elements.

Filter selector: a selector that filters further elements that the original selector matches

• First () : Gets the first element
• Last () : Gets the last element
• Eq (index/-index) : obtains the NTH element
• Filter (selector) : Filters a collection of elements that match a specified expression
• Not (selector) : Removes elements that match the specified expression
• Has (selector) : Retain elements that contain specific descendants, and remove those that do not
• HasClass () : Checks if the current element contains a particular class and returns true if it does

Find selector: Find child, parent, or sibling elements in a matched set of elements based on the selector

• Children () : Gets a set of elements that contains all children of each element in the matched set of elements
• Find () : searches for all elements that match the specified expression. This function is a good way to find the descendants of the element you’re dealing with
• Parent () : Gets a collection of elements that contain the unique parent of all matched elements
• Parents () : Gets a collection of ancestor elements that contain all matched elements.
• PrevAll () : finds all the peers before the current element
• Next () : Gets a set of elements containing the immediately following siblings of each element in the matched set of elements
• NextAll () : Finds all peers after the current element
• Siblings () : Gets a collection of elements that contain all unique siblings of each element in the matched set of elements. You can filter with an optional expression.

$Tool methods

• $.each() : traverses the data in a group or object
• $.trim() : Removes Spaces at both ends of the string
• $.type(obj) : The type of the data to be obtained
• $.isarray (obj) : determines whether an array is an array
• $.isfunction (obj) : determines whether it is a function
• $.parsejson (JSON) : Parses a JSON string into a JS object/array

attribute

1. Manipulate any attribute

Attr () : sets or returns the attribute value of the selected element (non-Boolean)

$("img").attr({ src: "test.jpg", alt: "Test Image" });
Copy the code

Prop () : Gets the attribute value of the first element in the matched set of elements. (Boolean)

$("input[type='checkbox']").prop({
  disabled: true
});
Copy the code

RemoveAttr () : Removes an attribute from each matched element

$("img").removeAttr("src");
Copy the code

RemoveProp () : Used to remove the set of properties set by the.prop() method

$para.removeProp("luggageCode");
Copy the code

2. Manipulate the class attribute

• AddClass () : Adds the specified class name to each matching element
• RemoveClass () : removes all or the specified class from all matched elements.

3. Manipulate HTML code/text/values

• HTML () : Gets the HTML content of the first matching element
• Val () : Gets the current value of the matched element

CSS

CSS () : Sets CSS styles/reads CSS values

$("p").css("color");
Copy the code

location

• Offset () : coordinates relative to the upper-left corner of the page
• Position () : coordinates relative to the upper-left corner of the parent element

Note: offset() can be set, but position() cannot

• ScrollTop ()/scrollLeft() : reads/sets the Y /X coordinates of the scroll bar

Increases the deletion

1. Add/replace elements

• Append () : Appends to the last content inside each matched element
• AppendTo () : appends all matched elements to another specified set of elements
• Prepend () : appends to the first element inside each matched element
• PrependTo () : Precedes all matching elements to another specified set of elements
• Before () : Inserts content before each matched element
• After () : Inserts content after each matched element
• ReplaceWith () : Replaces all matching elements with the specified HTML or DOM element

2. Delete elements

• Empty () : removes all children of matched elements
• Remove () : remove all matching elements

​