Shulou(Shulou.com)06/01 Report--

What are the knowledge points of this article "jQuery Zero basic knowledge points?" most people do not understand, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "jQuery Zero basic knowledge points" article.

JQuery = JavaScript + Query is a class library that assists JavaScript development. Its core idea is to write less and do more. Note: when using jQuery, you must first introduce the jQuery library through the src attribute of the script tag.

When the parameter passed in is a function, the function is executed automatically after the HTML document has been loaded

Create a label object (jQuery object) when the parameter passed in is HTML language

When the parameter passed in is a selector string:

$("# attribute value"): id selector, query tag object (jQuery object) $("tag signature") according to id: tag name selector, query tag object (jQuery object) $("attribute value") according to specified tag signature): class selector, query tag object (jQuery object) based on class attribute value

When the parameter passed in is a DOM object, the DOM object is converted to a jQuery object

The tag object obtained through getElement (s) Byxxx or createElement () is a DOM object. The effect of Alert is: [object HTML signature Element]

The object created by the $function is a jQuery object, such as two (2): the DOM object wrapped by jQuery is a jQuery object, for example, two (4) the object queried by the $function is also a jQuery object, for example, the effect of two (3) jQuery object Alert is: [object Object]

JQuery object is an array of DOM objects + a series of functions provided by jQuery.

Convert a DOM object to a jQuery object:

The DOM object $(DOM object) can be converted to jQuery object first.

Convert a jQuery object to a DOM object:

First, the jQuery object jQuery object [subscript] can be extracted from the corresponding DOM object.

3.

JQuery object. Click (function () {}); add the click response function jQuery object. Css ("background-color", "xxx"); the background color jQuery object can be set. Val (); you can get and assign the value property jQuery object of the form item. Each (function () {}); the method of traversing an array of DOM objects. The method to be executed for each traversed object is written in function, and this is used in function to represent the DOM object currently traversed.

Code example:

For details, please refer to the jQuery documentation. The document can be obtained at the end of the article.

# id: find tag object based on id element: find tag object based on tag name. Class: find tag objects according to class *: find tag objects selector1,selector2 for all elements. SelectorN: merge selector 1, selector 2... The label object of selector N and returns

Ancestor descendant: match all descendant elements parent > child under a given ancestor element: match all child elements prev + next under a given parent element: match all next elements immediately after the prev element prev-- siblings: match all siblings elements after the prev element at the same level

Note: the signature is preceded by the colon.

: first: get the first element of the match: last: get the last element of the match: not (selector): remove all elements that match the given selector: even: match all elements with even index values, counting from 0: odd: match all elements with odd index values Count from 0: eq (index): match elements with a given index value (index counts from 0): gt (index): match all elements greater than the given index value (index counts from 0): lt (index): match all elements less than the given index value (index counts from 0): header: match such as H2, h3, Title elements such as H4: animated: matches all elements that are animating

Note: the signature is preceded by the colon.

: contains (text): match the element that contains the given text: has (selector): match the element that contains the element matched by the selector: empty: match all empty elements that do not contain child elements or text: parent: match elements that contain child elements or text

5. Attribute filter selector

Note: the signature is preceded by the square bracket.

: match elements that contain a given attribute: match elements where a given attribute is a specific value: match all elements that do not contain a specified attribute or whose attributes are not equal to a specific value: match elements that start with certain values for a given attribute: match elements that end with certain values for a given attribute: match a given attribute with an element that contains certain values: compound attribute selector Use when multiple conditions need to be met

Note: the signature is preceded by the colon.

: input: matches all input tag elements Regardless of the type of type: text\: password\: radio\: checkbox\: submit\: image\: reset\: button\: file\: hidden: match all elements of the specified type type in the input tag: enabled: match all available elements (disabled attribute is set to disabled is not available: cannot fill in content or selected): disabled: match all unavailable elements: checked: match all selected elements (check box, check box, Check boxes, etc. Does not include option in select): selected: matches all selected option elements

For details, please refer to the jQuery documentation. The document can be obtained at the end of the article.

Last (): get the last element (function is the same as: last) first (): get the first element (function is the same as: first) eq (): get the element of the given index (function is the same as: eq ()) filter (exp): leave the matching element is (exp): determine whether to match the given selector As long as there is a match, return truehas (exp): return the element containing the element of the matching selector (function is the same as: has) not (exp): delete the element matching the selector (function is the same as: not) children (exp): return the child element matching the given selector (function is the same as parent > child) find (exp): return the descendant element matching the given selector (function like ancestordescendant-) next () : returns the next sibling element of the current element (function is the same as prev + next function) nextAll (): returns all sibling elements after the current element (function is the same as prev-- siblings function) nextUntil (): returns the following element of the current element until the specified matching element parent (): returns the parent element prev (exp): returns the previous sibling element of the current element prevAll (): returns the current All sibling elements in front of the element prevUnit (exp): returns the previous element siplings (exp) from the current element to the specified matching element: returns all sibling elements add (): adds the element of the add matching selector to the current jquery object

If you don't pass a parameter, you get it, and you pass a parameter that sets

Html () method: you can set and get the content in the start and end tags (including the tags on both sides) text () method: you can set and get the text in the start and end tags (excluding the tags on both sides) val () method: you can set and get the value attribute value of the form item

Code example: the val () method sets the selected status of multiple form items at the same time

The attr () method: you can set and get the value of the property. Operations such as checked, selected, disabled, readOnly are not recommended, and you can also manipulate custom properties. Prop () method: you can set and get the value of the property. Only checked, selected, disabled and readOnly are recommended.

Code example:

Code example: select all, deselect all, invert

AppendTo (): a.appendTo (b) inserts an into the end of all b child elements, becoming the last child element prependTo (): a.prependTo (b) inserts an in front of all b child elements, becoming the first child element

InsertAfter (): a.insertAfter (b) get ab when bainsertBefore (): a.insertBefore (b) is the same level.

ReplaceWith (): a.replaceWith (b) replace all areplaceAll () with one b: a.replaceAll (b) replace all b with a (several times if there are several b)

Remove (): a.remove () deletes a tag and all its contents (including text or sub-tags, etc.) empty (): a.empty () clears the contents of a tag (including text or sub-tags, etc.), leaving the tag

Code example: left-to-right, right-to-left exercises for two check boxes

Dynamically add and delete table records

AddClass (): adding styl

RemoveClass (): deleting styl

ToggleClass (): delete if you have it, add a style if you don't

Offset (): gets and sets the coordinates of the element, which must be set with two attributes, top and left

Format when setting: jQuery object. Offset ({top: value, left: value})

The following animation methods can add parameters:

The first parameter is the length of time for the animation to execute, in milliseconds

The second argument is the callback function: function () {}, that is, the function that is automatically executed after the animation is completed.

Basic animation:

Show (): show hidden elements

Hide (): hides the displayed element

Toggle (): hide when shown, and show if hidden

Fade in and out animation:

FadeIn: fade in fadeOut (): fade out fadeToggle (): fade in / fade out toggle fadeTo (): change transparency to a specified value within a specified period of time. 0 means transparent, 1 means visible, and 0.5 represents translucency.

The first parameter specifies the duration (ms), the second parameter sets the transparency, and the third parameter sets the callback function

Trigger time:

JQuery is the kernel of the browser that parses the tag of the page (such as the tag in body). After the DOM object is created, it will be executed immediately. At this time, there is nothing on the page. JS is executed after the browser kernel parses the tag and creates the tag. After the tag is created, the content (such as pictures, web pages, etc.) is loaded. At this time, the page already has the trigger order of the content in body: the number of times when jQuery is executed first and JS is followed by multiple times:

JQuery all function functions execute sequentially JS only executes the last function function

Click (): you can bind a click event (function () {} in the parameter), trigger a click event (no function in the parameter) mouseover (): mouse move in event mouseout (): mouse move out event bind (): you can bind an element to one or more events at a time, with the first parameter in double quotes, with multiple events separated by spaces, and the second parameter is function () {} That is, the code one () after the event response is the same as bind, but the event bound by the one method only responds to unbind () once: the operation opposite of the bind method, unbinding the event live (): used to bind the event, even if the element is not previously bound, but is automatically bound when it is dynamically created later

Event bubbling means that when a parent and child element binds to the same event, when the child element's event is triggered, the same event of the parent element automatically responds, such as:

Prevent bubbling of events: return false in the event function of the child element

Event object: how an object that contains all the information about the triggered event gets the event object: when binding the event to an element, the function format is function (event) {}, and the name in the parameter is arbitrary. It is generally named event, and this event is the event object.

The above is the content of this article on "what are the zero basic knowledge points of jQuery". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.