二、jq强大的选择器

一、基础选择器

$里面填写的就是css选择器的选择方法

$('#list1').css('background','green')//通过id选取
$('.red').css('background','red')//通过class选取
$('li').css('background','grey')//通过元素名选取
$('li,p').css('font-size','20px')//选取li和p

二、层级选择器

$('div a').css('color', 'green'); //div下子元素中的全部a标签
$('div>a').css('color', 'red'); //选中div的子元素a
$('div a.link + a').css('color', 'purple'); //选中a标签后面的一个a元素
$('div a.link ~ a').css('color', 'blue'); //选中a标签后面所有的同级a元素

三、属性选择器

$('#ulColor li[class]').css('background', 'pink'); // li中含有class的标签
$('#ulColor li[title=blue]').css('background', 'grey'); //li中title的值为blue的标签
$('#ulColor li[title!=blue]').css('background', 'yellowgreen'); //同级中除了title=blued的其它所有元素
$('#ulColor li[title|=css]').css('background', 'darkgreen'); //前缀是用-隔开的
$('#ulColor li[id^=color]').css('background', 'hotpink'); //以属性值为开始（不需要-隔开）
$('#ulColor li[id$=color]').css('background', 'purple'); //以属性值为结尾（不需要-隔开）
$('#ulColor li[lang*=cn]').css('background', 'olive'); //属性中包含cn字符串
$('#ulColor li[lang~=cn]').css('background', 'skyblue'); //属性中包含cn单词，用空格隔开
$('#ulColor li[class=cl][name=kaivon]').css('background', 'teal'); //属性中包含cn单词，用空格隔开

四、基础过滤选择器，冒号前面就是选中的，冒号后面就是排除的条件

$('#olColor li:eq(1)').css('border', '5px solid pink'); //下标为1的标签
$('#olColor li:gt(1)').css('border', '5px solid grey'); //大于下标为1的标签
$('#olColor li:lt(3)').css('border', '5px solid yellowgreen'); //小于下标为3的标签
$('#olColor li:not(#olColor li:eq(2))').css('border', '5px solid darkgreen'); //除了选中的那个标签，其他的全部选中
$('#olColor li:even').css('border', '5px solid hotpink'); //偶数
$('#olColor li:odd').css('border', '5px solid purple'); //奇数
$('#olColor li:first').css('border', '5px solid olive'); //第一个
$('#olColor li:last').css('border', '5px solid skyblue'); //最后一个
$('#olColor li:lang(en)').css('border', '5px solid teal'); //lang属性
$('#olColor li:target(tar)').css('border', '5px solid yellow'); //tatget属性
$(':root').css('border', '2px solid blue'); //根节点
$(':header').css('border', '5px solid darkgreen'); //所有的h标签

五、子元素过滤器

$('#paragraph p:first-child').css('color', 'pink'); //第一个子元素必需是p标签
$('#paragraph span:first-of-type').css('color', 'yellowgreen'); //选择到第1个span标签
$('#paragraph span:last-child').css('color', 'darkgreen');
$('#paragraph p:last-of-type').css('color', 'hotpink');
$('#paragraph p:nth-child(2)').css('color', 'blue'); //选择到第2个子元素，并且这个子元素必需是p标签
$('#paragraph span:nth-of-type(2)').css('color', 'olive');//选择到第二个span标签
$('#only p:only-child').css('color', 'skyblue'); //选择到只有一个子元素的标签
$('#only-two span:only-of-type').css('font-size', '30px'); //选择到只有一个span子元素的标签

六、内容过滤选择器

$('#content:contains(kaivon)').css('color', 'blue');//选择内容为kaivon的标签
$('div:empty').css({
	width: '100px',
	height: '100px',
	background: 'green'
});//选中所有没有内容的div标签
$('#has:has(p)').css('border', '1px solid #000');//判断是否含有p标签
$('#title:parent').css('border', '1px solid #f00');

七、表单过滤选择器

$(':button').css('border', '2px solid #f0f'); //选择到所有的按钮
$('#sex input:checkbox').wrap('<span></span>').parent().css('border', '2px solid purpLe');//让所有的选中的标签我们加一个span标签，然后给父级加上css属性 
$(':checked').wrap('<span></span>').parent().css('border', '2px solid blue');