JQuery selector and DOM operations

jquery Selector

1. Basic Selector

The basic selector is the most commonly used selector in jquery and the simplest selector, which finds DOM elements by element ID, class, and tag name. This is very important, the following content is based on this, the gradual improvement.

1). " $ ("#id"), gets the ID of the specified element, the ID is globally unique, so it has only one member.

2). " $ (". Class") ", gets the element specified by class, the different elements can have the same class attribute, so it may have more than one member.

3). " $ ("element"), gets the element specified by element (such as div, table, etc.), which may have multiple members.

4). " $ ("*") ", gets all the elements equivalent to document.

5). " $ ("Selector1,selector2,..., Selectorn"), which merges the elements that each selector matches to return together. Returns a Selector1 matching collection of +selector2 matching collections +...+selectorn matching collections.

2. Hierarchy Selector

What is a hierarchy? Hierarchy is the node of parent-child relationship and sibling relationship. Therefore, the hierarchy selector is used to get the parent-child node of the specified element, the sibling node.

1). " $ ("ancestor descendant"), gets all the elements underneath the ancestor element.

2). " $ ("Parent > Child"), which gets all the child elements underneath the parent element (only the first layer of children).

3). " $ ("Pre + Next"), gets the next sibling element immediately following the pre element.

4). " $ ("Pre ~ siblings") "to get all the sibling elements behind the pre element.

3. Filter Selector

Filter? Must be added to the filter condition. Add a filter by ":", such as "$ (" Div:first ") to return the first DIV element of the DIV element collection, the filter condition.

According to different filtering rules, filter selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering and Form object property filter selectors.

1). Basic Filter Selector

A) ": First", select the initial element, and don't forget that it is also placed in a collection Oh! Because jquery is a collection of Dom objects. For example, "$ (" Tr:first ")" returns the first TR element of all TR elements, which is still stored in the collection.

b) ": Last", select the final element. For example, "$ (" Tr:last ")" returns the last TR element of all TR elements, which is still stored in the collection.

c) ": Not (selector)", removes all elements that match the given selector. For example, "$ (" Input:not (: Checked) ")" returns all input elements, but removes the selected element (radio box, multi Box).

d) ": Even", select an even-numbered element of all elements. Because the jquery object is a collection, where even numbers refer to the index of the collection, the index starts at 0.

e) ": Odd", select the odd-numbered elements in all elements, starting with the 0 index.

f) ": eq (Index)", select the element with the specified index, starting at 0.

g) ": GT (Index)", select an element with an index greater than the specified index, starting at 0.

h) ": LT (Index)", select the element with index less than the specified index, starting at 0.

i) ": Header", select all the title elements, such as HQ, H2, etc.

j) ": Animated", select all the animation elements that are currently executing.

2). Content Filter Selector

It is the manipulation of elements and text content.

A) ": Contains (text)", select the element that contains text content.

b) ": Empty", select an empty element that does not contain child elements or text nodes.

c) ": Has (selector)", select the element that contains the element that the selector matches.

d) ":p arent", select the element that contains the child element or text node. (It is a parent node)

3). Visibility Filter selector

Selects an element based on the visible and invisible state of the element.

": Hidden", select all invisible elements.

": Visible", select all visible elements.

Visible selector: Hidden contains not only elements that have the Style property display as none, but also elements such as text-hidden fields (<input type= "hidden" >) and Visible:hidden.

4). Attribute Filter Selector

Select the element by its attributes.

a) "[attribute]", select the element that owns this property.

b) "[Attribute=value]", select all elements that specify the value of the property.

c) "[Attribute!=value]", select all the elements of the property value that are not of value.

d) "[attribute ^= value]", select all elements of the property value starting with value.

e) "[attribute $= value]", select all elements of the property value ending with value.

f) "[attribute *= value]", select the property value that contains all the elements of value.

g) "[Selector1] [Selector2] ... [Selectorn] ", the composite selector, first by [Selector1] Select return set a, set a and then [Selector2] Select return set B, set B and then [Selectorn] Select return result collection.

5). child element filter Selector

The name is a selection of the child elements of an element.

A) ": Nth-child (index/even/odd)", select an element indexed as index, an even-numbered element, and an odd-numbered element.

L Nth-child (even/odd): Allows you to select an element that has an even (odd) number of index values under each parent element.

L Nth-child (2): You can select an element with an index value of 2 under each parent element.

L Nth-child (3n): an element that can pick the index value under each parent element is a multiple of 3.

L Nth-child (3n + 1): The index value under each parent element can be selected as an element of 3n + 1.

b) ": First-child", select the first child element.

c) ": Last-child", select the last child element.

d) ": Only-child", select the unique child element whose parent element is only one of its child elements.

6). Form Filter Selector

Select the filter selector for the form element.

A) ": Input", select all <input>, <textarea>, <select > and <button> elements.

b) ": Text", select all the text box elements.

c) ":p Assword", select all the Password box elements.

d) ": Radio", select all the Radio box elements.

e) ": CheckBox", select all the multi-marquee elements.

f) ": Submit", select all the Submit button elements.

g) ": Image", select all the image button elements.

h) ": Reset", select all reset button elements.

i) ": Button", select All button elements.

j) ": File", select all file upload domain elements.

k) ": Hidden", select all invisible elements.

7). Form object property Filter Selector

Select the filter selector for the form element properties.

": Enabled", select all available elements.

":d isabled", select all the unavailable elements.

": Checked", select all selected elements, such as a radio box, check box.

": Selected", select all selected item elements, such as drop-down list box, list box.

Four, JQuery in the DOM Damn made

An interface that is independent of the browser, platform, and language. This interface makes it easy to access all the standard components in the page.

Dom Core:dom Core is not specifically intended for JavaScript, and can be used by any programming language that supports the DOM. Its purpose is not only to process Web pages, but also to handle any kind of document written in markup language, for example: XML.

HTML DOM: When scripting HTML files with JavaScript and Dom, there are many attributes that are specifically html-dom.

Css-dom: For CSS operations, in JavaScript, Css-dom is primarily used to get and set various properties of a style object.

1. Finding Nodes

See "Basic selector" above.

2. Create a node

Using the jquery factory function, create a new node: var $newNode = $ ("<p> Hello </p>"), and then insert the new node at the specified element node.

3. inserting Nodes

Inserts the newly created node, or gets the node into the specified location.

$node. Append ($newNode), append the end to the end of each matching element. For example, "$ (" P "). Append (" <b>Hello</b> ");" Add "<b>Hello</b>" to the end of "P" inside.

$newNode. AppendTo ($node), appends the new element to the end of each matching element.

$node. Prepend ($newNode), append the beginning to the end of each matching element. For example, "$ (" P "). Prepend (" <b>Hello</b> ");" Add "<b>Hello</b>" to the beginning of the "P" inside.

$newNode. Prependto ($node), appends the new element to the beginning of each matching element.

"$node. After ($newNode)", which inserts the contents after each matching element, is a parallel sibling. For example, "$ (" P "). After (" <b>Hello</b> ");" Insert "<b>Hello</b>" behind "P". They are brotherly relationships.

"$newNode. InsertAfter ($node)" To insert a new element after each matching element.

"$newNode. Before ($node)" To insert content before each matching element. For example, "$ (" P "). Before (" <b>Hello</b> ");" Insert "<b>Hello</b>" in front of "P", which is a sibling relationship.

"$node. InsertBefore ($newNode)" To insert a new element before each matching element.

Note: If the inserted node is not newly created, the insert will become a move operation. Therefore, you should use the clone node before inserting such a node.

4. Delete a node

Removes all matching elements from the DOM. For example, "$ (" P "). Remove (". Hello ");" Delete the P element that is the value of the Class property, and all the elements below it.

Clears all matching elements from the DOM. For example, "$ (" P "). empty ();" Clears all P elements, as well as all elements underneath it.

5. Copying Nodes

Clones a matching DOM element. For example, "$ (" P "). Clone ();" Returns the cloned copy, but does not have any behavior. If you want to clone the events of the DOM together, you should use "$ (" P "). Clone (True);".

6. replacing Nodes

Replaces all matching elements with the specified HTML or DOM element. For example, $ ("P"). ReplaceWith ("<b>paragraph. </b> "), replace all p elements with" <b>paragraph. " </b> ".

Return with ReplaceWith: $ ("<b>paragraph. </b> "). ReplaceAll (" P ");.

7. Parcel Nodes

Wrap (): Wraps the specified node with other tokens. This method is useful for inserting additional structured markup into a document without destroying the semantics of the original document. For example, "$ (" P "). Wrap (" <div class= ' wrap ' ></div> ");". Each P element is wrapped in a <div>.

Wrapall (): Wraps all matching elements with one element. The Wrap () method is to wrap all the elements individually. For example, "$ (" P "). Wrapall (" <div></div> ");", wrap all p elements into <div>.

Wrapinner (): Wraps the child content of each matching element (including the text node) with other structured tags. For example, "$ (" P "). Wrapinner (" <b></b> ");", <b> is wrapped by each P element.

8. Property Settings

attr (): Gets the property and sets the property.

When a parameter is passed for the method, the property is specified for the acquisition of an element. For example, "$ (" img "). attr (" src ");", gets the SRC attribute value of the IMG element.

When you pass two parameters for the method, the value of the specified property is set for an element. For example, "$ (" img "). attr (" src "," test.jpg ");", set the SRC attribute value of the IMG element to test.jsp.

There are many ways to get and set a function implementation in JQuery. such as: attr (), HTML (), text (), Val (), Height (), Width (), CSS (), etc.

Removeattr (): Deletes the specified attribute for the specified element.

9. Style Actions

You can set or get CSS styles through attr ().

Append style: AddClass (). For example, "$ (" P "). AddClass (" selected ");", append the "selected" style to all p elements.

Remove style: removeclass ()---Remove all or the specified class from the matching element. For example, "$ (" P "). Removeclass (" selected ");", deleting "selected" in all P elements.

Toggle Style: Toggleclass ()---Controls the repetition of the switch on the style. If the class name exists, delete it and add it if the class name does not exist. For example, "$ (" P "). Toggleclass (" selected ");", in all P elements, remove the "selected" style if there is a "selected" style, or add the "selected" style.

Determine if a style is included: Hasclass ()---Determines if the element contains a class, returns True, or false. For example, "$ (this). Hasclass (" protected ") to determine whether the current node has a" protected "style.

set or get HTML, text, and values

Reads and sets the HTML content in an element: HTML (), which can be used in XHTML, but not in an XML document.

Reads and sets the text content in an element: text (), which can be used both for XHTML and for XML documents.

Reads and sets the value in an element: Val (), which is similar to the Value property in JavaScript. For text box, drop-down list box, radio This method returns the value of the element (the multi box can only return the first value). If it is a multi-select drop-down list box, returns an array that contains all the selected values.

One . Common methods for traversing nodes

Gets the collection of all child elements that match the element: children (). This method only considers the first layer of child elements, regardless of any descendant elements.

Gets the collection of sibling elements immediately following the matching element (but only one element in the collection): Next ().

Gets the collection of sibling elements immediately preceding the matching element (but only one element in the collection): Prev ().

Get all the sibling elements before and after the matching element: siblings ().

12.css-dom Operation

Gets and sets the style properties of the element: CSS ().

Gets and sets the element transparency: opacity () property.

Gets and sets the height of the element, Width: height (), widths (). When setting a value, the default unit is PX if only the number is passed. If you need to use a different unit, pass a string, for example "$ (" P:first "). Height (" 2em ")";

Gets the relative displacement of the element in the current window: offset (). The object it returns contains two properties: Top,left. This method is only valid for visible elements.

Five, JQuery the events in

1. loading the DOM

After the page is loaded, the browser adds events to the DOM element via JavaScript. In regular JavaScript code, you typically use the Window.onload method, in jquery, using the $ (document). Ready () method. The simplified notation in jquery is "$ ()". When registering an event in window.onload, it can only be registered in a single window.onload body. But with jquery, you can register in multiple $ (document). Ready () or $ ().

2. Event Binding

Binds the specified event to the matched element. For example, yesterday we bound the event in the Window.onload method: "$ (" P "). OnClick (function () {

Alert (This). text ());

});”

In jquery, the $ (document). Ready () can be bound in this way:

"$ (" P "). Click (function () {

Alert (This). text ());

});”

With bind (), you can bind like this:

$ ("P"). Bind ("click", Function () {

Alert (This). text ());

});

3. Synthetic Events

Hover (): simulates the cursor hover time. When the cursor moves over an element, the first specified function is triggered, and when the cursor moves out of the element, the specified second function is triggered. For example, hover effect:

$ ("TD"). Hover (

Function () {$ (this). addclass ("hover");},

Function () {$ (this). Removeclass ("hover");}

);

Toggle (): Used to simulate a mouse continuous click event. The first time the element is clicked, the first specified function is triggered, and when the same element is clicked again, the specified second function is triggered, and if there are more functions, it is triggered sequentially until the last one. For example, set the selection and unchecked effects of an element:

$ ("TD"). Toggle (

Function () {$ (this). AddClass ("selected");},

Function () {$ (this). Removeclass ("selected");}

);

Using toggle () without passing parameters, the effect is to toggle the visible state of the element.

4. bubbling of events

Events follow the DOM hierarchy as if it were blisters upward, just as the top ends.

Workaround: Returning false in the event handler will stop bubbling the event. You can also stop the default behavior of the element.

This feature is supported for all current UI interactions or their events. Returning false in its own event handler will abort the continuation of the event down pass. Returns true if the event continues to pass down.

5. Properties of the event object

Event object: The event object is created when the event is triggered. Using events in a program requires only adding a parameter to the handler function. Use some parameters in the event handler function. For example, when the Get event occurs, relative to the position of the page: Event.pagex, Event.pagey,event is the parameter of the event handler function.

6. Removing events

Remove all click events from a button: $ ("btn"). Unbind ("click")

Removes all events on a button: $ ("btn"). Unbind ();

One (): This method can bind the handler function to an element. When the handler fires once, the event is immediately deleted. That is, on each object, the event handler is executed only once.

Six, JQuery in the DOM Animation

You can animate a DOM object by setting how it is displayed and hidden.

1. No animation effect of the hidden and display

Hide (): In an HTML document, calling the Hide () method for an element changes the display style of the element to none. The code functions with CSS ("display", "none");

Show (): Changes the display style of an element to its previous state.

Toggle (): Toggles the visible state of an element: Toggles to hidden if the element is visible, and toggles to visible if the element is hidden.

2. animate the fade by setting the transparency effect hidden and displayed

FadeIn (), FadeOut (): Changes the transparency of the element only. FadeOut () reduces the opacity of the element for a specified period of time until the element disappears completely. FadeIn () is the opposite. For example, use 600 milliseconds to fade the paragraph slowly: $ ("P"). FadeIn ("slow");.

FadeTo (): Adjusts the opacity in an asymptotic manner to the specified value (between 0–1). and optionally trigger a callback function after the animation is complete. For example, with 200 milliseconds to quickly adjust the transparency of a paragraph to 0.25, after the animation finishes, a "Animation done" message box is displayed: "$ (" P "). FadeTo (" Fast ", 0.25, function () {alert (" Animation Done. ");});".

3. by setting the height effect of the hidden and display, to achieve the slide down and the animation effect of the collection

Slidedown (), Slideup (): Only the height of the element is changed. If the display property of an element is none, the element will be extended from top to bottom when the Slidedown () method is called. The Slideup () method is just the opposite, and the elements are hidden from bottom to top. For example, slide the paragraph down in 600 milliseconds slowly: $ ("P"). Slidedown ("slow");.

Slidetoggle (): Toggles the visibility of matching elements by a height change. For example, 200 milliseconds to quickly slide the paragraph up or down, after the animation finishes, a "Animation done" message box is displayed: "$ (" P "). Slidetoggle (" Fast ", function () {alert (" Animation done. ");});".

With JavaScript, jquery can handle the dynamic update of the current page, and the CSS style can make a very beautiful UI, even more beautiful than the desktop software UI. JavaScript is cumbersome to write and debug, so there are some companies that have developed streamlined development specifically for JavaScript applications, such as GWT from Google, which can write JavaScript as you would write swing in Java. It provides users with the UI interface and events like swing and supports the core library of Java. With GWT's own compiler, you can compile Java code into JavaScript code, CSS style files, and HTML.

JQuery selector and DOM operations