Basic JQuery and basic jquery tutorials

Basic JQuery and basic jquery tutorials

Note: "//" single line comment, "/**/" multi-line comment

$ And $ ()

$: Abbreviation of a JQuery object

$ (): Returns the JQuery object.

This indicates the current object provided by javascript. You can use this. style to modify the style of the object.
$ (This): indicates the current object encapsulated with jquery. You can use the method provided by jquery to access the style.

Concatenation: JQuery objects returned by JQuery methods can be used as objects of other methods.

$ (Document). ready () and window. onload ()

	Window. onload	$ (Document). ready ()
Execution time	You must wait until all the web pages are loaded, including images, and execute the code	You can execute the code after the DOM structure in the webpage is loaded.
Number of executions	It can only be executed once. If there is a second request, it overwrites the first request.	It can be executed multiple times without being overwritten
Shorthand	None	$ (Function ()){ });

Get DOM elements

JS: document. getElementById ('box'): gets the element whose ID is "box ".

JQ :( '# box '). get (0): get the element whose ID is box ;('. box '). get (0): gets the first element of the Class as the box.

Multi-Database Operations

When a program requires multiple libraries, the abbreviation "$" is the last included library. JQuery uses JQuery instead of "$". JQuery can be used. noConflict () releases JQuery's ownership of "$"

 

Regular selector: simulates CSS syntax to quickly and accurately select DOM tags, attribute names, and States.

Simple Selector

ID selector: the fastest selector. Obtain the id name as an object.

Element name selector: obtains the element name as an object.

Class selector: obtains the Class name as an object.

Advanced Selector

Group selector: Multiple selectors share the same style, which are separated by commas,

Descendant selector: There is a generational relationship between the selector. The parent selector and the descendant selector are separated by spaces.

You can use the find () method to select the specified descendant. A relatively fast Writing Method

Wildcard selector: "*", indicating all selectors

You can add a prefix before the class selector and id selector. The prefix is the element name or class name, indicating that the element or class and class or id are selected.

Each selector can be used interactively to facilitate JQuery

Advanced Selector

Child selector: the parent node and the child node are connected by ">". The child node can be connected by using the children () method.

Next selector: two nodes of the same level are connected with "+". The next node has an effect.

NextAll selector: two nodes on the same node use "~ "Connection, all the nodes with the same name have an effect

You can also use the next () method to connect to the next node. Use the nextAll () method to connect to the next node.

Use the prev () method to connect. The previous node has an effect. Use the prevAll () method to connect. All nodes with the same name and same level above have an effect.

Use the siblings () method to connect the nodes with the same name in the upper and lower layers.

Use the nextUntil () method to connect to a specified node at the same level. Use the prevUntil () method to connect to a specified node at the same level.

Attribute selector:

Selector [property ].

Selector [property = value], select this element and set the attribute value to value

Selector [property ^ = value], select this element and the attribute value starts with value

Selector [property $ = value], select this element and the attribute value ends with value

Selector [property! = Value], select this element and the attribute value is not value

Selector [property * = value], select this element and the property value contains the value

Selector [property $ = value], select this element and the attribute value ends with value

Selector [property1 = value1] [property2 = value2]..., multi-attribute selector

Length and size () are available to obtain the number of selectors.

Theoretically, methods such as next () and perv () are faster than advanced selectors.

Filter selector: filters the required DOM elements based on specific filter rules, starting ":".

Basic filter:

: First: select the first element on the page.

Available first () method

: Last: select the last element of the page.

Last () method available

: Not (selector): select an element that is not the specified selector.

Available not () method

: Even: All even elements

: Add: All elements with Odd Numbers

: Eq (index): select an element that is equal to or equal to the specified base object.

Available eq () method

: Gt (index): select an element greater than the specified subscript.

: Lt (index): select an element smaller than the specified subscript

: Header: select the title element, h1 ~ H6

: Facus: select the element to be focused

Content Filter:

: Contain (text): select an element that contains the specified text

: Empty: select an element that does not contain child elements or empty text

: Has (selector): select an element that contains the specified selector.

Available has () method

: Parent: select an element that contains child elements or text

Parent (): gets the parent element of an element.

Parents (): gets the ancestor node of an element.

ParentsUntil (): gets the element before the specified ancestor element.

Visibility filter: the CSS style is "display: none", the form type is "type =" den ", and the visibility: hidden element.

: Hidden: select all invisible elements

: Visible: select all visible elements

Child element selector:

: First-child: select the first child element of all parent elements.

: Last-child: select the last child element of all parent elements.

: Only-child: select an element with only one child element.

: Nth-child (even | odd | index | xn + m): Select sub-elements in the Custom position. The subscript starts with 1. The even is an even number, and the odd is an odd number, index is a custom position, and xn + m represents x times + m.

Is (): Checks Matching Element Sets Based on selectors, elements, or jQuery objects. if at least one element matches a given parameter, true is returned.

HasClass ("class"): determines whether an element has this class.

Slice (): reduces the set of matching elements to a subset of the specified exponential range.

End (): gets the previous status of the current element.

Contents (): obtains the number of all element nodes (including text) under an element)

Filter (): combines multiple selectors to achieve precise selection.