选择器（二）：结构选择器、过滤选择器

结构选择器

层级选择器
层级选择器根据元素间的结构关系进行匹配，主要包括包含选择器、子选择器、相邻选择器、兄弟选择器

• 包含选择器：
  例：匹配form标签中的所有input标签

$(function(){
  	$('form input').css('background','blue')
  })

• 子选择器：匹配直接孩子
  虽然子选择器与包含选择器在匹配结果上有重合的部分，但是包含选择器能够匹配的范围更大，除了子元素还包括所有嵌套的元素
  例：匹配div标签中的img子标签

$(function(){
	$('div>img').css('border', 'solid 2px red')
})

• 相邻选择器：匹配同级的一个相邻元素
  与子选择器和包含选择器不同，从结构上分析相邻选择器是在同级结构上进行匹配和过滤元素，而子选择器和包含选择器是在包含的内部结构中过滤元素
  例：匹配div标签后相邻的img同级标签

$('div+img')

• 兄弟选择器：匹配具有同一个父元素的所有同级元素
  例：匹配和div标签同级的所有img标签

$('div~img')

子元素选择器

:nth-child      //匹配其父元素下第n个或奇偶个元素
:first-child    //匹配第一个子元素。:first选择器只匹配一个元素，而:first-child将为每一个父元素匹配一个子元素
:last-child    //匹配最后一个子元素。:last只匹配一个元素，而:last-child为每一个父元素匹配一个子元素
:only-child   //如果某个元素是父元素中唯一的子元素，将会被匹配；如果父元素中还含有其他元素，将不会被匹配

实例

//用于css样式设置，将第一个li标签字体设置为红色
ul li:nth-child(1){
	color: red;
}

//获取元素
console.log($("ul li:nth-child(2)").text())

：eq(index) 只能够匹配一个元素，而 :nth-child能够为每一个父元素匹配子元素。nth-child是从下标1开始的，:eq是从0开始的

:nth-child(even)    //匹配偶数位元素
:nth-child(odd)    //匹配奇数位元素

过滤选择器

过滤选择器根据需求可以分为定位过滤器、内容过滤器和可见过滤器
定位过滤器

:first    匹配找到的第一个元素
:last     匹配找到的最后一个元素
:not      去除所有与给定选择器匹配的元素，如:not(div a)或$("input:not(:checked)")
:even     匹配所有索引值为偶数的元素，从0开始计数
:odd      匹配所有索引值为奇数的元素，从0开始计数
:eq       匹配一个给定索引值的元素，从0开始计数
:gt       匹配所有大于给定索引值的元素，从0开始计数
:lt       匹配所有小于给定索引值的元素，从0开始计数
:header   匹配如h1、h2之类的标题元素
:animated 匹配所有正在执行动画效果的元素

实例

console.log($("ul li:first").text())
$("ul li:even").css("color","red")
$("ul li:odd").css("color","blue")

内容过滤器

:contains 匹配包含给定文本的元素,如：$("div:content('图片')")匹配所有包含‘图片’的div元素
:has      匹配含有选择器所匹配的元素的元素，如$("div:has(p)")匹配包含p元素的div元素
:empty    匹配所有不包含子元素或者文本的空元素
:parent   匹配含有子元素或者文本的元素

可见过滤器

:hidden  匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素