Limited stator node selector: $("mix1 [mix2]"): returns the mix1 node containing mix2. For example: $ ("div [a]"): div containing the tag.
This is not the same as $ ("div a"). The latter indicates the tag in the div and returns the tag object. The former returns the div tag object.
Colon limit node selector: $ ("mix: condition"): mix label, and meet the conditions.
E: root: the type is E and is the root element of the document.
E: nth-child (n): A child element whose nth type is E. The base number starts from 1.
E: first-child: it is the first child element of its parent element of Type E.
E: last-child: A child element whose last type is E.
E: only-child: And is the only child element of its parent element of the Type E.
E: empty: Elements of the E type without child elements (including text nodes)
E: enabled
E: disabled: user interface elements that are allowed or prohibited if the type is E.
E: checked: selected user interface elements (such as single-choice buttons or check boxes) of the E type)
E: visible: select all visible elements (the display value is block or visible, and the visibility value is visible, excluding the hide field)
E: hidden: select all hidden elements (elements with a non-Hide field and a display value of block or visible and a visibility value of visible)
E: not (s): Type E, unmatched selector s
E: eq (n), E: gt (n), E: lt (n): element limitation
E: first: equivalent to E: eq (0)
E: last: The last matched element.
E: even: obtains an element whose ordinal number is an even number from the Matching Element Set.
E: odd: obtains an odd number of elements from the Matching Element Set.
E: parent: select all elements that contain child elements (including text nodes)
E: contains ('test'): select all elements containing the specified text
Form selector:
E: input: select form elements (input, select, textarea, button)
E: text: select all text fields (type = "text ")
E: password: select all password domains (type = "password ")
E: radio: select all radio buttons (type = "radio ")
E: checkbox: select all check boxes (type = "checkbox ")
E: submit: select all submit buttons (type = "submit ")
E: image: select all image domains (type = "image ")
E: reset: select all clearing fields (type = "reset ")
E: button: select all buttons (type = "button ")
Of course, this includes E: hidden.
8. xPath path query:
First, we will introduce the xPath Syntax:
/: Select the root node
// Select all qualified nodes in the document, no matter where the node is located
.: Select the current node
...: Select the parent node of the previous Node
@: Select attributes. As mentioned earlier (attribute selector)
Nodename: select all nodes under the node
Applications in jQuery:
The root node is rarely used. The following examples are commonly used:
$ ("Div/p") is equivalent to $ ("div> p ")
$ ("Div // p") is equivalent to $ ("div p ")
$ ("// Div/../p"): p tag under the parent node of all div nodes
There are also relative paths and supported Axis selectors, which will not be applied yet. I will not introduce them anymore...
Other usage of $:
$ (Html node): dynamically creates DOM elements encapsulated by jQuery Objects Based on the supplied original HTML Tag string. For example:
$ ("Hello"). appendTo ("# body"); // Add Hello to the body element.
$ (Document): webpage document Object
$ (Document. body): The webpage body object, which is the same as $ ("body ").
$ (Function): this function is executed after DOM is loaded. Therefore, $ (document). ready () can be written as $ ()
$ (Selector part, selector source): This example
$ ("Input: radio", document. forms [0]): In the first form of the document, search for all radio buttons.
$ ("Div", xml. responseXML): queries all div elements in a specified XML document.
The selector source can be a DOM element as the context, a document or jQuery object.
There are two more: $. extend (prop) and $. noConflict () are compatible with plug-ins and other libraries, and will be written later
Drop-down box, single-choice, multi-choice box sorting
1. drop-down box:
Var C0 = $ (". formc select [@ name = 'country'] option [@ selected] "). text (); // get the text of the selected item from the drop-down menu (note that there is a space in the middle)
Var cc2 = $ ('. formc select [@ name = "country"]'). val (); // obtain the value of the selected item from the drop-down menu.
Var cc3 = $ ('. formc select [@ name = "country"]'). attr ("id"); // obtain the ID attribute value of the selected item from the drop-down menu
$ ("# Select"). empty (); // clear the drop-down box // $ ("# select" example .html ('');
$ ("1111"). appendTo ("# select") // Add the option in the drop-down box
A little explanation:
1. select [@ name = 'country'] option [@ selected] indicates that the name attribute exists,
In addition, the select element with the selected attribute in the 'country' select element has the selected attribute;
It can be seen that the attribute is followed by the @ parameter.
2, single region:
$ ("Input [@ type = radio] [@ checked]"). val (); // obtain the value of the selected item of a single sequence (note that there is no space in the middle)
$ ("Input [@ type = radio] [@ value = 2]"). attr ("checked", 'checked'); // set single checked value = 2 to the selected status. (Note that there is no space in the middle)
3. Check box:
$ ("Input [@ type = checkbox] [@ checked]"). val (); // obtain the value of the first check box.
$ ("Input [@ type = checkbox] [@ checked]"). each (function () {// Since multiple check boxes are selected, You can output them cyclically.
Alert ($ (this). val ());
});
$ ("# Chk1"). attr ("checked", ''); // do not check
$ ("# Chk2"). attr ("checked", true); // check
If ($ ("# chk1"). attr ('checked') = undefined) {}// you can check whether a check has been performed.