jQuery--选择器

选择器分类

1、简单选择器：标签名+过滤器

常规过滤器：标签选择符、类选择符、id选择符

$(function() {
$('p').css('color','red');//标签
$('.add').css('color','red');//类
$('#app').css('color','red');//id
});

 属性过滤器：属性放入[]中

$(function() {
//1、属性过滤
    $('[title]').css('color','red');
//2、完全匹配属性值
    $('[title="属性值"]').css('color','red');
//3、指定属性值的起始字符串
    $('[title^="部分属性值"]').css('color','red');
//4、指定属性值的结尾字符串
    $('[title$="部分属性值"]').css('color','red');
//5、属性值中不等于某个值：完全匹配
    $('[title$="部分属性值"]').css('color','red');
//6、模糊匹配
    $('[title*="部分属性值"]').css('color','red');
//7、单词匹配，字符串前或后有空格分隔的认为是单词
    $('[title~="部分属性值"]').css('color','red');
//8、多个属性同时存在的
    $('[title][class]').css('color','red');
});

 表单过滤器

	<form action="">
		<input type="text" name="" value="">
		<input type="password" name="" value="" placeholder="至少6到8位">
		<input type="checkbox" name="" value="">
                <input type="checkbox" name="" value="">
		<button type='sbumit'>提交</button>
		<input type="text" disabled placeholder="禁用">
	</form>

$(function() {
//1、选择所有文本域
    $('input:text').css('color','red');
//2、修改密码提示框的文本内容
    $('input:password').css('placeholder','至少8到10位');
//3、选择所有的复选框
    $('input:checkbox').css('box-shadow','8px 8px 5px red');
//4、选择按钮
    $('button').css('backgroud-color','red');
//5、选择禁用元素
    $(':disabled').css('backgroud-color','red');
});

位置过滤器

$(function() {
//1、相等eq(n)
    $('li:eq(0)').css('color':'red');
//2、大于gt(n)
    $('li:gt(0)').css('color':'red');
//3、小于lt(n)
    $('li:lt(0)').css('color':'red');
//4、选择第一个：first
    $('li:first').css('color':'red');
//5、选择最后一个：last
    $('li:last').css('color':'red');
//6、选择所有偶数行
    $('li:even').css('color':'red');
//7、选择所有奇数行
    $('li:odd').css('color':'red');
//8、通用过滤器：nth-child()匹配父节点的第n个元素，可以是first,odd等
//8-1、全选”参数n,n取值（1~max），注意n从1开始取值
    $('li:nth-child(n)').css('color':'red');
//8-2、直接取某一个，直接用整数指定，从1开始取值
    $('li:nth-child(1)').css('color':'red');
//8-3、选取偶数：2n或even
    $('li:nth-child(2n)').css('color':'red');
    $('li:nth-child(even)').css('color':'red');
//8-4、选取奇数：2n+1或odd
    $('li:nth-child(2n+1)').css('color':'red');
    $('li:nth-child(odd)').css('color':'red');
});

2、组合选择器

2-1、后代组合符：空格和'>'

A 空格 B：在A元素所有子孙元素中查询B元素

$('ul.list *').css('color','red');
$('ul.list li').css('color','red');//只选择某一种元素

A > B：仅在A元素中的子元素中查询B，不含孙元素

$('ul.list > li').css('color','red');

2-2、兄弟组合符：'~'和'+'

A~B：查找A元素后面所有与A有着共同父级的兄弟元素

$('ul.list ~ li').css('color','red');

A+B：查询A元素后面的第一个兄弟元素

$('ul.list + li').css('color','red');

3、选择器组

用','分隔的 选择器列表

列表元素支持简单选择器和组合选择器

如：$('h2,h3,h4'),$('li:eq(2),p.red'),$('div span,p>em')

$(function() {
//1、支持直接使用标签
    $('h2,h3,h4').css('color','red');
//2、支持带过滤器的简单选择器
    $('p.green,div.red').css('color','red');
//3、支持组合选择器
    $('p>span,div strong').css('color','red');
});