JQuery framework-1. Basic Knowledge, jquery framework-1

JQuery framework-1. Basic Knowledge, jquery framework-1
JQuery Introduction

JQuery, as its name implies, is JavaScript and Query. jQuery is free and open-source. It can simplify the process of querying DOM objects, processing events, making animations, and processing Ajax interactions. It is compatible with javascript libraries of multiple browsers. The core idea is to write less and do more (write less, more ).

JQueryAdvantages

Introduce jQuery

Version Selection

• 1. x: compatible with ie678, which is the most widely used. It only performs BUG maintenance and does not add any new features. Therefore, for general projects, you can use version 1.12.4 (December 4, May 20, 2016)
• 2. x: This product is not compatible with ie678 and is rarely used. It is only officially used for BUG maintenance and features are not added. If you do not consider compatibility with earlier versions of browsers, you can use 2.x. Final Version: 2.2.4 (January 1, May 20, 2016)
• 3. x: not compatible with ie678. Only the latest browser is supported. Unless otherwise specified, version 3.x is generally not used. Many old jQuery plug-ins do not support this version. Currently, this version is officially updated and maintained.

Relationship between jQuery and $:

I. jQuery Selector

• ID selector: $ ("# box ");
• Class name selector: $ (". box ");
• Tag selector: $ ("div ");
• Descendant selector: $ ("# box p ");
• : First: obtain the first element.
• : Last: Get the last element.
• : Even: matches all elements with an even index value and starts counting from 0.
• : Odd: matches all elements with an odd index value and starts counting from 0.
• : Eq (index): matches an element with a given index value and starts counting from 0.
• : Not (selector): removes all elements that match the given selector.
• : Has (selector): matches the elements that contain the elements matched by the selector.

Ii. jQuery attributes and style CSS

Operation attributes:

Attr (name | properties | key, value | fn): sets or returns the attribute value of the selected element.

RemoveAttr (name): deletes an attribute from each matching element.

Prop (name | properties | key, value | fn): gets the attribute value of the first element in the matched element set.

RemoveProp (name): Used to delete the property set by the. prop () method.

Difference: attr can operate (add, delete, modify, and query) custom node attributes, but prop cannot (add, delete, modify, and query ). Attr and prop return different values for the disabled attribute of input. attr returns disabled or undefined, while prop returnsBoolean Value.

Operation Class:

AddClass (class | fn): add the specified class name for each matching element.

RemoveClass ([class | fn]): deletes all or specified classes from all matching elements.

ToggleClass (class | fn [, switch]): If there is (does not exist), delete (ADD) a class.

Operation content:

Html ([val | fn]): obtains the html content of the First Matching Element. This function cannot be used in XML documents. But it can be used in XHTML documents.

Text ([val | fn]): obtains the content of all matching elements. The result is a combination of text content contained by all matching elements. This method is effective for both HTML and XML documents.

Val ([val | fn | arr]): obtains the current value of the matching element. If multiple values are selected, an array containing the selected values is returned.

Operation CSS:

Css (name | pro | [, val | fn]): Access the style attributes of matching elements.

Operation location:

Offset ([coordinates]): obtains the relative offset of the matching element in the current document. The returned object contains two integer attributes: top and left, in pixels. The method is only valid for visible elements.

Position (): obtains the offset between the matching element and the parent element. The returned object contains two integer attributes: top and left. For precise calculation results, use the pixel unit in the padding, border, and fill attributes. This method is only valid for visible elements.

ScrollTop ([val]): obtains the offset of the matching element relative to the top of the scroll bar. This method is effective for both visible and hidden elements.

ScrollLeft ([val]): obtains the offset of the matching element to the left of the scroll bar. This method is effective for both visible and hidden elements.

Operation size:

Height ([val | fn]): obtains the current calculated height (px) of the matching element ).

Width ([val | fn]): obtains the current calculated width (px) of the First Matching Element ).

InnerHeight (): gets the height of the inner area of the First Matching Element (including padding and not border ). This method is effective for both visible and hidden elements.

InnerWidth (): gets the width of the inner area of the First Matching Element (including padding and not border ). This method is effective for both visible and hidden elements.

OuterHeight ([options]): gets the external height of the First Matching Element (including padding and border by default ). This method is effective for both visible and hidden elements.

OuterWidth ([options]): gets the external width of the First Matching Element (including the padding and border by default ). This method is effective for both visible and hidden elements.

NOTE: If options is set to true, margin is included.

3. Filter and search

Filter element:

Eq (index |-index): obtains the nth element. The position of this element is counted from 0. If it is a negative number, it is counted from the last element in the set.

First (): gets the first element.

Last (): gets the last element.

HasClass (class): checks whether the current element contains a specific class. If so, true is returned.

Has (expr | ele): retains elements that contain specific offspring and removes those that do not contain specific offspring.

Not (expr | ele | fn): deletes elements that match the specified expression.

Search element:

Children ([expr]): gets a set of all child elements in each element of a matched element set.Only child elements are considered, not all child elements.

Find (expr | obj | ele): searches for all child elements that match the specified expression.

Parent ([expr]): gets a set of elements that contain a unique parent element that matches all elements.

OffsetParent (): returns the parent node that the first matching element is used to locate.

Next ([expr]): gets a set of elements next to each element in the matched element set.

NextAll ([expr]): searches for all peer elements after the current element.

Prev ([expr]): gets a set of elements that match the previous generation element next to each element in the element set.

PrevAll ([expr]): searches for all peer elements before the current element.

Siblings ([expr]): gets a set of elements that contain all unique peer elements of each element in a matched element set. You can use an optional expression for filtering.

Series Operation:

Add (expr | ele | html | obj [, con]): add the elements matching the expression to the jQuery object. This function can be used to connect the element result set that matches the two expressions respectively. The returned results are always sorted by the order in which elements appear in the HTML document, instead of simply adding elements.

AndSelf (): add the previously selected element to the current element.

End (): Return to the latest "destructive" operation. That is, the list of matched elements is changed to the previous state. If no destructive operation is performed before, an empty set is returned. The so-called "destructive" refers to the operation of any change to the matching jQuery element.

Iv. jQuery events

Page loading events:

Ready (fn): binds a function to be executed when the DOM is ready for query and operation. This is the most important function in the event module, because it can greatly improve the response speed of web applications. Simply put, this method is purely an alternative to registering an event with the window. load event.

Bind event:

On (events, [selector], [data], fn): An event handler that binds one or more events to the selected element.

Off (events, [selector], [fn]): The event handler function that removes one or more events from the selected element.

Bind (type, [data], fn): bind an event handler for a specific event of each matching element.

Unbind (type, [data | fn]): This is a reverse operation of bind () to delete the Bound event from each matching element. If no parameter exists, all bound events are deleted.

One (type, [data], fn): binds a one-time event handler function to a specific event (like click) that matches each element.

Hover ([over,] out): When you move the cursor over a matching element, the specified first function is triggered. When you move the cursor out of this element, the specified second function is triggered.

Click ([[data], fn]): triggers the click event of each matching element. This function calls and executes all the functions bound to the click event.

Note: The usage of other event methods is the same. For example: mouseover, mouseout, dblclick, change, blur, focus, keydown, keyup, keypress, mousedown, mouseup, mousemove, mouseenter, mouseleave, resize, scroll, select, submit, unload, etc.