1.基本选择器(重点)
ID选择器 $("#ID值")//通过id获取标签对象
元素选择器 $("标签名")//通过标签名获取对象
类选择器 $(".样式类名") 即 $(".class值") //通过样式名获取对象
$('#id')
$('div').css('background-color','red');
$('.class').css('background-color','red');
2.层级选择器
1)后代选择器 $(‘selA selB’) //获取selA标签所有后代中selB标签(只要是后代都可以,选择的包括子代,孙子代等等)
$('#tb div').css('background-color','yellow');
2)(直接)子代选择器 $(‘selA>selB’) //获取直接子对象标签(选择的仅子代,不包括子代孙子代等等)
$('#tb>div').css('background-color','green');
3)兄弟(紧邻后续)选择器 $(selA+selB) //选中紧邻selA标签的后续兄弟对象
$('#d1+div').css('background-color','gray');
4)兄弟(所有后续)选择器 $(selA~selB) //选中以selA后续所有弟弟标签
$('#d1~div').css('background-color','purple');
3.简单过滤选择器
1):first $(sel:first) //当前所选择的所有标签选择第一个
$('div:first').css('background-color','maroon');
2):last $(sel:last) //当前所选择的所有标签选择最后一个
$('div:last').css('background-color','maroon');
3):eq(i) $(sel:eq(3)) //当前所选择的所有标签选择下标等于3的那个
$('div:eq(3)').css('background-color','maroon');
4):gt(i) $(sel:gt(3)) //当前所选择的所有标签选择下标大于3的那个
$('div:gt(3)').css('background-color','aqua');
5):lt(i) $(sel:lt(3)) //当前所选择的所有标签选择下标小于3的那个
$('div:lt(3)').css('background-color','fuchsia');
6):even $(sel:even) //当前所选择的所有标签选择下标为偶数的元素
$('div:even').css('background-color','maroon');
7):odd $(sel:odd) //当前所选择的所有标签选择下标为奇数的元素
$('div:odd').css('background-color','maroon');
8):not $(sel:not(selector)) //当前所选择的所有标签排除掉selector所对应的标签
$('div:not(#d1)').css('background-color','maroon');
4.内容过滤选择器
1):empty //选取空标签
/*注意:<div></div> 为空标签
<div>
</div> 不为空标签*/
$('div:empty').css('background-color','yellow');
2) :contains(text) 选择包含特定文本的标签
$('div:contains(div1)').css('background-color','maroon');
3): has(selector) 选择包含特定选择器的标签
//选择div中包含span标签的div
$('div:has(span)').css('background-color','maroon');
4):parent 选择是父亲的标签(即有子标签)
$('div:parent').css('background-color','maroon');
5.可见性过滤选择器(display :none|block|inline)
1):hidden 当前页面中被隐藏的元素
$('div:hidden').css('background-color','maroon').css('display','block');
2):visible 当前页面中没有被隐藏的元素
$('div:visible').css('background-color','maroon');
6.属性过滤选择器
1) [attribute] 是否存在这个属性
//选择input标签中含有class属性的标签
$('input[class]').css('background-color','maroon');
2) [attribute=value] 这个属性的值是否为value
//选择input标签中含有class属性且属性值为tt2的标签
$('input[class=tt2]').css('background-color','maroon');
3) [attribute!=value] 这个属性的值是否不为value
//选择input标签中含有class属性且属性值不为tt2的标签
$('input[class=tt2]').css('background-color','maroon');
4)表单特有的过滤
:checked 只适用于radio按钮和checkbox
$('input:checked').css('background-color','maroon');
:selected 适用于option元素
$('option:selected').text();
7.表单过滤选择器
1):text //获得所有的文本输入框
$('input:text').css('background-color','maroon');
2):checkbox //获得所有的复选框
$('input:checkbox').css('display','none');
3):radio //获得所有的单选钮
$('input:radio').css('display','none');