JQuery summary and jquery Summary
I. Overview 1. What is JQuery?
JQuery is a JavaScript library that simplifies JS operations and extends JS functions.
2. separation principle
JQuery follows the principle of separation of import and use, that is, using one <script> Import and another <script> label.
3. Basic syntax
$(selector).action();
Obtain the HTML element and perform the specified operation on the element.
Two selector 1. Basic Selector
Similar to the CSS selector, The JQuery basic selector selects HTML elements based on tags, categories, and IDs.
2. Combination Selector
- $ (Selector01, selector02, selectorN): gets a set of elements that meet any of the conditions.
- $ (Selector01selecctor02): gets the elements that meet multiple conditions at the same time.
- $(Selector01 selector02): gets the child element that meets the second condition of the element that meets the first condition.
3. Attribute Selector
Select an element based on the attribute.
- $ ("[Attr]"): gets all the elements with the attr attribute.
- $ ("[Attr = 'value']"): gets all elements with the specified property value.
- $ ("[Attr! = 'Value'] "): gets all elements with a specified attribute whose value is not equal to the specified value.
- $ ("[Attr $ = 'value']"): gets all elements with the specified attribute and Its value ends with the specified value.
- $ ("[Attr ^ = 'value']"): gets all elements with the specified attribute and whose value starts with the specified value.
4. $ (this)
It is usually used inside a method to obtain the current object, that is, the caller of the method.
Three-element operation 1. Element Creation
$("<tag>")
The HTML tag used by JQuery to create an object can only start with <tag>, or contain both the beginning and end <tag> </tag>, and contain details, as shown in figure
<Tag> you cannot directly create an object using the tag name, that is, $ ("tagName") cannot create an object, which is different from JavaScript.You cannot use tags to end object creation. That is, $ ("</tag>") cannot create an object.2. Get content
- Text (): set or return the text content of the selected element.
- Html (): sets or returns the content of the selected element (including HTML tags ).
- Val (): set or return the value of the selected field.
3. Internal insertion
- Append (): Add a child element to the end (backend.
- Prepend (): Add child elements at the beginning (front-end.
- AppendTo (): add the operation object as a sub-object to the end of the parameter object.
4. External insertion
- Before (): Add a sibling element.
- After (): Add siblings to the backend.
- InsertBefore (): insert the sibling element in front.
- InsertAfter (): Insert a sibling element to the end.
5. Delete Elements
- Remove (): deletes itself and its child elements.
- Empty (): deletes child elements.
- Remove ("select specified element based on the Basic selector"): deletes the specified element from the basic selector.
6. obtain child elements
- Children (): gets all child elements.
- Children ("basic combo selector"): gets child elements with custom tags and specified attributes.
7. Filter
If the result returned by a selector is not an object but a collection composed of multiple objects, you can use the following method to obtain the specified object in the Set:
- Eq (index): gets the object at the specified index position in the set. The index starts from 0.
- Filter (": even"): obtains all objects with an odd number of indexes in the set.
- Filter (": odd"): obtains all objects with an even index in the set.
- Slice (index): gets the object whose index is greater than the specified value.
- Slice (0, index): gets the object whose index is smaller than the specified value.
- Not (selector): select all objects other than the specified object.
Four attribute operations
- Attr ("attrName"): gets the attribute value.
- Attr ("attrName", "attrValue"): modifies the attribute value.
- RemoveAttr ("atrrName"): deletes an attribute.
Five common operations
- Traversal object: $. each (obj, function (I, n), I is the index, and n is the current traversal sub-object.
- Obtain the selection status of the single-choice button and check box: $ (this). is (": checked ").
Six common labels and their operations 1. select (1) Add options
$ (Selector ). options [index] = new Option (name, value); // Add $ (selector) according to the index ). add (option, before); // add according to the specified position
(2) Delete Option
$ (Selector). length = 0; // delete all $ (selector). remove (index); // Delete by index
(3) option
- Option. index: Set and return the index attribute value.
- Option. text: Set and return text.
- Option. value: Set and return value.
- Option. selected: Set and return the selection status, true/false.
