Juqery learning of three selector visibility element properties _jquery

: Hidden

Matches all invisible elements, the INPUT element's Type property is "hidden" and is also matched to

Matches all elements that are hidden, or input elements of type "hidden".

return value

Array<element>

Example

Find all non-visible TR elements

HTML Code:

<table>
<tr style= "Display:none" ><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>

JQuery Code:

$ ("Tr:hidden")

Results:

[<tr style= "Display:none" ><td>value 1</td></tr>]

---------------------------------------------------------------------------------------

: Visible

Match all the visible elements

Matches all elements that are visible.

return value

Array<element>

Example

Find all the visible TR elements

HTML Code:

<table>
<tr style= "Display:none" ><td>value 1</td></tr>
<tr><td>value 2</td></tr>
</table>

JQuery Code:

$ ("tr:visible")

Results:

[<tr><td>value 2</td></tr>]

---------------------------------------------------------------------------------------

[Attribute]

Matches the element that contains the given property

Matches elements that have the specified attribute.

return value

Array<element>

Parameters

attribute (String): Property name

Example

Find all DIV elements that contain ID attributes

HTML Code:

<div>
<p>Hello!</p>
</div>
<div id= "Test2" ></div>

JQuery Code:

$ ("Div[id]")

Results:

[<div id= "Test2" ></div>]

---------------------------------------------------------------------------------------

[Attribute=value]

Match the given property is an element of a particular value

Matches elements that have the specified attribute with a certain value.

return value

Array<element>

Parameters

attribute (String): Property name

value (String): property value. Quotation marks are optional in most cases. However, you avoid conflicts when you encounter such things as property values containing "]".

Example

Find the INPUT element for all name properties that are newsletter

HTML Code:

' <input type= ' checkbox ' name= ' newsletter ' value= ' hot Fuzz '/>
<input type= "checkbox" name= "Newsletter" value= "Cold Fusion"/>
<input type= "checkbox" Name= "Accept" value= "Evil plans"/>

JQuery Code:

$ ("input[name= ' newsletter ']"). attr ("Checked", true);

Results:

[<input type= "checkbox" name= "Newsletter" value= "Hot Fuzz" checked= "true"/> <input type= "checkbox" Name= " Newsletter "value=" Cold Fusion "checked=" true "/>]

---------------------------------------------------------------------------------------

[Attribute!=value]

Match the given property is an element that does not contain a specific value

Matches elements that don ' t have the specified attribute with a certain value.

return value

Array<element>

Parameters

attribute (String): Property name

value (String): property value. Quotation marks are optional in most cases. However, you avoid conflicts when you encounter such things as property values containing "]".

Example

Find input elements that all name properties are not newsletter

HTML Code:

' <input type= ' checkbox ' name= ' newsletter ' value= ' hot Fuzz '/>
<input type= "checkbox" name= "Newsletter" value= "Cold Fusion"/>
<input type= "checkbox" Name= "Accept" value= "Evil plans"/>

JQuery Code:

$ ("input[name!= ' newsletter ']"). attr ("Checked", true);

Results:

[<input type= "checkbox" Name= "Accept" value= "Evil plans" checked= "true"/>]

---------------------------------------------------------------------------------------

[Attribute^=value]

Matches the given property as an element starting with some value

Matches elements that have the specified attribute and it starts with a certain value.

return value

Array<element>

Parameters

attribute (String): Property name

value (String): property value. Quotation marks are optional in most cases. However, you avoid conflicts when you encounter such things as property values containing "]".

Example

Find all input elements with the ' news ' Start name

HTML Code:

<input name= "Newsletter"/>
<input name= "Milkman"/>
<input name= "Newsboy"/>

JQuery Code:

$ ("input[name^= ' News ']")

Results:

[<input name= "Newsletter"/> <input name= "Newsboy"/>]

---------------------------------------------------------------------------------------

[Attribute$=value]

Matches a given property as an element that ends with some value

Matches elements that have the specified attribute and it ends with a certain value.

return value

Array<element>

Parameters

attribute (String): Property name

value (String): property value. Quotation marks are optional in most cases. However, you avoid conflicts when you encounter such things as property values containing "]".

Example

Find all input elements with ' letter ' ending in name

HTML Code:

<input name= "Newsletter"/>
<input name= "Milkman"/>
<input name= "Jobletter"/>

JQuery Code:

$ ("input[name$= ' letter ']")

Results:

[<input name= "Newsletter"/> <input name= "Jobletter"/>]

---------------------------------------------------------------------------------------

[Attribute*=value]

Matches the given property to be an element that contains some values

Matches elements that have the specified attribute and it contains a certain value.

return value

Array<element>

Parameters

attribute (String): Property name

value (String): property value. Quotation marks are optional in most cases. However, you avoid conflicts when you encounter such things as property values containing "]".

Example

Find all input elements that name contains ' man '

HTML Code:

<input name= "Man-news"/>
<input name= "Milkman"/>
<input name= "Letterman2"/>
<input name= "Newmilk"/>

JQuery Code:

$ ("input[name*= ' Man ']")

Results:

[<input name= "Man-news"/> <input name= "Milkman"/> <input name= "letterman2"/>]

---------------------------------------------------------------------------------------

[Selector1] [Selector2] [Selectorn]

A composite property selector that needs to be used when multiple conditions are met.

Matches elements that have the specified attribute and it contains a certain value.

return value

Array<element>

Parameters

Selector1 (Selector): Property Selector

Selector2 (Selector): Another property selector to further narrow the range

Selectorn (Selector): Any number of property selectors

Example

All the ID attributes are found, and its Name property ends with a man

HTML Code:

<input id= "Man-news" name= "Man-news"/>
<input name= "Milkman"/>
<input id= "Letterman" name= "New-letterman"/>
<input name= "Newmilk"/>

JQuery Code:

$ ("input[id][name$= ' Man ']")

Results:

[<input id= "Letterman" name= "New-letterman"/>]