jQuery常见的选择器及用法介绍
选择器的意义就是将众多html代码中准确的找出我们想找的单元。
接下来将常见的选择器以及作用列举出来。
基本选择器
$('#test1').css('background','gray');
可以找到id=test1的单元。
$('p').css('background','blue');
所有的P标签都会被选中。
$('.test2').css('background','green');
Class=test2的单元全部被选中。
$('*').css('background','pink');
*指的就是所有元素，慎用。
层次选择器
$('divspan').css('background','orange');
div下的span将全部选中
<div><span>www.zixue.it</span></div>
<div><p><span>www.itbool.com</span></p></div>
这样的也会被选中
$('p~span').css('background','gray');
<div><p></p><span>www.itbool.com</span></div>
像这样的span和P属于同一级别。将被选中。
基础过滤器
例：
<ul> <li>导航1</li> <li>导航2</li> <li>导航3</li> <li>导航4</li> <li>导航5</li> <li>导航6</li> </ul>
例如这样的，你想细致到具体的某一个。则需要加上特殊的说明
$('li:first').css('background','red');
找第1个
$('li:odd').css('background','blue');
找第奇数个,从0计数这里有一个细节，就是我们通常认为的第一个，在这里认为成第0个，就是说如果用这个的话，则是我们经常输出来的2468个将被选中。换成even则是选出所有偶数的li了
$('li:eq(2)').css('background','purple');
同上选出第二个，就是我们通常所属的第三个。
内容过滤器
可以通过内容找到要找的目标
$('td:contains("女")').css('background','blue');
可以选出内容是女的单元
<td>女</td>
但是不会选出
<td>赵云女</td>
这样的
$('td:empty').css('background','green');
Empty是空的意思，所以内容为空的都会选出来，但是，如果内容内有空格的话，就不会选中了
$('td:has(span)').css('background','pink');
td里含有某元素的话，就会被找出来。
<td><span>22</span></td>
被选中的，则整个td都会被选中。比如这样的
<td><span>22</span><p>11</p>24</td>
不是改变span而是改变td这个单元。
$('p:parent').css('background','black');
单元里面有东西的都会被选中，但是空格不算。
表单类型过滤器
$('input[type="text"]').css('background','gray');
$('input:text').css('background','blue');
这两个是一个性质的
<inputtype="text"/>
选中input里的type属性作为目标。
其他属性password则替换text就可以了同理。
可见性过滤器
$('div:hidden').css('display','block');
利用触发器，可以选中原本display属性为hidden的div。
子元素过滤器
$('p:last-of-type').css('background','gray');
可以选中同一级别下最后一个P标签。
<div><p>a</p><p>b</p></div>
这样的话，含有b的p标签就会被涂上颜色。
特殊情况
<div></div> <divclass='a1'> <div></div> <div></div> <divclass='a2'></div> </div>
两个有class名的div会被产生作用。
$('lia:only-child').css('background','blue')
匹配li下作为独生子的a标签。例如
<li><ahref="">导航</a></li>
不能有其他标签，但是可以有内容。
以上所述是小编给大家介绍的jQuery常见的选择器及用法介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！