Day17 -- JQuery selector,

Day17 -- JQuery selector,

When operating on HTML tags, we first need to find the location of the HTML tags and then perform the operations. Next we will look at the method for searching tags in a centralized manner, as shown below:

1. Id Selector-- Id is unique in HTML and searched by Id. Id corresponds to # id = "#

<! DOCTYPE html> 
In the preceding HTML code, $ ("# i10") is used to search for the Id = "i10" tag, as shown below:
> Obj = $ ('# i10 ')> [Div # i10.c1, context: document, selector: "# i10"] <! -- The <div> tag of id = "i10" is found, and the sub-tag is under the div tag. You can locate the sub-tag through searching. -->> 0: div # i10.c1 <! -- Content in the above label --> context: document> length: 1> selector: "# i10"> _ proto __: Object (0)
2. c1 selector class selector, The class selector corresponds to. class =. (point)
Pass
> Obj = $ ('. c1')> [div # i10.c1, context: document, selector: "# i10"] <! --. C1 finds the <div> tag, which has the same content, because the <div> tag contains the id and class --> 0: div # i10.c1 <! -- The div tag contains a sub-tag. You can obtain the sub-tag through some methods --> context: document> length: 1> selector: "# i10"> _ proto __: Object (0)
3. Tag Selector, Select through the tag itself
Select all the <a> labels in the preceding HTML, as follows:> obj = $ ("a") <! -- Select all the tags in HTML. We can see that five <a> tags and all the tags are found. --> (5) [, prevObject: jQuery. fn. init (1), context: document, selector: "a"]
> Obj [4] <! -- Select the top 5th a tags -->
> <A> f </a>
4. Combined QueryThe combined query uses commas (,), $ ('a ,. c2, # i10) means to find all <a> labels, class = c2 labels and id = "i10" labels, as follows:
> Obj = $ ("a,. c2, # i10") <! -- Combined Query: Query all <a> tags, class = "c2" tags, id = "i10" tags for Combined Query --> (7) [div # i10.c1, a, div. c2, prevObject: jQuery. fn. init (1), context: document, selector: ",. c2, # i10 "]
5. Hierarchical QueryFind the tag under a tag, which I like very much. Perform a layer-by-layer search, as shown below:
<! DOCTYPE html> ========================================================== =========Find the label class is equal to the label class under c1 is equal to the label of c2 ================== ======================================
> Obj = $ ('. c1. c2 ')<! -- Search for all labels whose label class is equal to the label class of c1 is equal to that of c2. Zi sun -->
> [Div. c2, prevObject: jQuery. fn. init (1), context: document, selector: ". c1. c2"]
> Obj [0]
> <Div class = "c2"> it's you, your mom, level selector </div>
The parent> child> symbol indicates that only child tags are found, as follows:
> Obj = $ ("# i10 a") <! -- Search for all the <a> tags under the id = "i10" tag, including the sub-tag and grandson tag, and all the tags --> (4) [, a, prevObject: jQuery. fn. init (1), context: document, selector: "# i10 a"]> con = $ ("# i10> a") <! -- Search for the sub-tags under the tag id = "1o" <a>, and only search for the sub-tags to see if they are <a> tags --> (3) [, prevObject: jQuery. fn. init (1), context: document, selector: "# i10> a"]
">" Indicates that only the sub-tags under the level label are searched. "" Space indicates that all the sub-tags that meet the conditions under the sub-tag are searched.
6. Filter SelectorFor example, the first filter that meets the conditions is as follows:
> Obj = $ ('# i10 a: first') <! -- Filter the first tag that meets the conditions --> [a, prevObject: jQuery. fn. init (1), context: document, selector: "# i10 a: first"]

> Obj = $ ('# i10 a: odd') <! -- Filter odd tags that meet the conditions -->
> (2) [a, a, prevObject: jQuery. fn. init (1), context: document, selector: "# i10 a: odd"]

> Obj = $ ('# i10 a: even') <! -- Filter even tags that meet the conditions -->
> (2) [a, a, prevObject: jQuery. fn. init (1), context: document, selector: "# i10 a: even"]

> Obj = $ ('# i10 a: last') <! -- Filter the last tag that meets the condition tag -->
> [A, prevObject: jQuery. fn. init (1), context: document, selector: "# i10 a: last"]

> Obj = $ ('# i10 a: eq (0)') <! -- Filter tags that meet the condition that the index is equal to 0 -->
> [A, prevObject: jQuery. fn. init (1), context: document, selector: "# i10 a: eq (0)"]
> Obj = $ ("# i10 a: gt (2)") <! -- Filter tags that meet the condition index greater than 2 -->
> [A, prevObject: jQuery. fn. init (1), context: document, selector: "# i10 a: gt (2)"]

> Obj = $ ('# i10 a: lt (2)') <! -- Filter tags that meet the condition index smaller than 2 -->
> (2) [a, a, prevObject: jQuery. fn. init (1), context: document, selector: "# i10 a: lt (2)"]Search for all unselected input ElementsHTML code:<Input name = "apple"/> <input name = "flower" checked = "checked"/>JQuery code:$ ("Input: not (: checked )")
Result:
[ <input name="apple" /> ]
7. Content (text) Selector
(1): contains (text) -- search for labels whose nominal values contain text.
: Contains (text)An example of matching the Element Parameter text String containing the given text:Find all"John"Div ElementHTML code: <div> John Resig </div> <div> George Martin </div> <div> Malcom John Sinclair </div> <div> J. ohn jQuery code: $ ("div: contains ('john')") Result: [<div> John Resig </div>, <div> Malcom John Sinclair </div>]
(2): empty-- Search for tags that contain empty tags, which are often used in tables. For example, when searching for empty cells
: EmptyOverviewMatch All null elements that do not contain child elements or textExample description:Search for HTML code for all empty elements that do not contain child elements or text: <table> <tr> <td> Value 1 </td> </tr> <td> Value 2 </td> <td> </td> </tr> </table> jQuery code: $ ("td: empty ")Result:[<Td> </td>, <td> </td>]
(3): has (selector) -- determines whether a tag has addClass and adds class attributes to the tag.
 
: Has (selector)OverviewMatches the element containing the element matched by the selector.ParametersSelector Selector A selector Used for filteringExampleDescription:    Add a text class to all div elements containing p elementsHTML code:<Div> <p> Hello </p> </div> <div> Hello again! </Div>JQuery code:$ ("Div: has (p)"). addClass ("test"); <! -- Add the class = "test" attribute to the <div> label containing the <p> label, obj = $ ('div div: has ()'). addClass ('test') -->Result:[<Div class = "test"> <p> Hello </p> </div>]
 
(4): parent-- Search for the element whose tag contains sub-content is to find non-empty tags with content or nested other tags
 
: ParentOverview    Match an element containing child elements or textExampleDescription:        Search for all td elements containing child elements or textHTML code: <table> <tr> <td> Value 1 </td> </tr> <td> Value 2 </td> <td> </td> </tr> </table> jQuery code: $ ("td: parent") Result: [<td> Value 1 </td>, <td> Value 2 </td>]
 
8. Visible: Hidden: visible
(1): hidden matches tags containing display: none.
: Hidden overview match all invisible elements, or example description of an element whose type is hidden: Find the HTML code of the hidden element whose tr Matches type is hidden: <table> <tr style = "display: none "> <td> Value 1 </td> </tr> <td> Value 2 </td> </tr> </table> jQuery code: $ ("tr: hidden") Result: [<tr style = "display: none"> <td> Value 1 </td> </tr>]
(2): visableVisible. The display attribute is not equal to none.
: VisibleOverview    Match all visible elementsExampleDescription:        Search for all visible tr ElementsHTML code: <table> <tr style = "display: none "> <td> Value 1 </td> </tr> <td> Value 2 </td> </tr> </table> jQuery code: result: [<tr> <td> Value 2 </td> </tr>]
9. Attributes
[Attribute]: Search for tags with an attribute in a tag, as shown in the following code:
<! DOCTYPE html> Perform the following query:
(1) [attribute] query tags where the attribute value is an attribute tag
> Obj = $ ('[alex]') <! -- Search for tags with the attribute value "alex". For example, if the attribute value of alex = "sb" is the same as that of alex -->
> (2) [a, a, prevObject: jQuery. fn. init (1), context: document, selector: "[alex]"]

(2) [attribute = value] query tags Whose tag attribute value is equal to value
>Obj = $ ('[alex = "123"]') <! -- Query tags with properties equal to alex and property values equal to 123
> [A, prevObject: jQuery. fn. init (1), context: document, selector: "[alex =" 123 "]"

[Attribute! = Value] tag whose property value is not equal to value
[Attribute ^ = value] tag with a property value not equal to value
[Attribute $ = value] Tag where the attribute value ends with attribute and the value is equal to the value
[Attribute * = value] Tag where the attribute value starts with attribute and the value is equal to the value