Day02jQuery选择器

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');