Introduction to common jQuery selector and usage, and jquery selector usage

Introduction to common jQuery selector and usage, and jquery selector usage

The significance of selector is to accurately find the units we are looking for in a large number of html code.

Next, we will list common selectors and their functions.

Basic Selector

(('{Test1'}.css ('background ', 'Gray'); you can find the unit with id = test1. Labels ('p'background .css ('background', 'blue'); All P labels will be selected. Optional ('.test2'background .css ('background ', 'green'); All units of Class = test2 are selected. $ ('* 'Background .css ('background', 'pink '); * refers to all elements. Use them with caution.

Level Selector

$ ('Div span'mirror.css ('background', 'Orange '); All spans under the div are selected <div> <span> www. zixue. it </span> </div> <p> <span> www.itbool.com </span> </p> </div> is also selected $ (' p ~ Span'background .css ('background', 'Gray '); <div> <p> </p> <span> www.itbool.com </span> </div> the span and P types belong to the same level. Will be selected.

Basic Filter

Example:

<Ul> <li> Navigation 1 </li> <li> navigation 2 </li> <li> navigation 3 </li> <li> navigation 4 </li> <li> Navigation 5 </li> <li> Navigation 6 </li> </ul>

For example, you want to look at a specific one. Special instructions must be added.

$('li:first').css('background','red');

Search for 1st

$('li:odd').css('background','blue');

Find the odd number, and count from 0. Here we usually think of the first one as 0th, that is, if this is used, the 2, 4, 6, and 8 items that we often output will be selected. If it is changed to even, all even numbers of li are selected.

$('li:eq(2)').css('background' , 'purple');

Select the second one, that is, the third one.

Content Filter

You can find the target through the content

$ ('Td: contains ("female" Women's 'background .css ('background', 'blue ');

The selected content is a female unit.

<Td> female </td>

But not selected

<Td> Zhao yunnv </td>

Such

$('td:empty').css('background' , 'green');

Empty is Empty, so all blank content will be selected. However, if there is a space in the content, it will not be selected.

$('td:has(span)').css('background' , 'pink');

If td contains an element, it will be found.

<td><span>22</span></td>

The entire td is selected. For example

<td><span>22</span><p>11</p>24</td>

Instead of changing the span, we change the unit of td.

$('p:parent').css('background' , 'black');

All items in a cell are selected, but spaces are not counted.

Form Type Filter

$('input[type="text"]').css('background' , 'gray');$('input:text').css('background' , 'blue');

These two are of the same nature.

<input type="text" />

Select the type attribute in input as the target.

Replace text with the password of other attributes.

Visibility Filter

$('div:hidden').css('display','block');

You can use the trigger to select the div whose original display attribute is hidden.

Child element filter

$('p:last-of-type').css('background','gray');

You can select the last P tag at the same level.

<div><p>a</p><p>b</p></div>

In this way, the p tag containing B will be colored.

Special Cases

<div></div><div class='a1'><div></div><div></div><div class='a2'></div></div>

Two divs with class names will be used.

$('li a:only-child').css('background','blue')

Matches the tag under li as the only child. For example

<Li> <a href = ""> navigation </a> </li>

There cannot be other tags, but there can be content.

The above is a general introduction to jQuery selector and usage in small series. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!