二、jQuery选择器高级用法

本节我们将学习以下内容:
1、多项选择器
2、层级选择器
3、属性选择器

一、多项选择器

$('选择器1, 选择器2,....')
$('h3, i') // 获取所有'h3'元素和所有'i'元素
$('.title, .author') // 获取所有class='title'的元素和class='author'的元素
$('h3, .author, #time') // 获取所有'h3',所有class='author',所有id='time'的元素

二、层级选择器

1、后代选择器
$('祖先 后代')
$('.container h3') // 获取class='container'的所有后代元素中的'h3'元素
$('.container .title') // 获取class='container'的所有后代元素中class='title'的元素
2、子选择器
$('parent child') 
$('.container > h3') // 获取class='container'的所有直接子元素中的'h3'

注意:是直接子元素,不包括孙元素以及更深入的后代元素

3、兄弟选择器1
$('pre + next')
$('span + p') // 获取同级元素中紧跟在在'span'标签后面的第一个'p'元素,如果紧跟在'span'标签后的第一个元素不是p元素,则获取不到
4、兄弟选择器2
$('pre ~ sibling')
$('span ~ p') // 获取跟在'span'标签后面的所有同级'p'元素

三、属性选择器





$('[type]') // 获取包含type属性的所有元素
$('[type=password]')  // 获取所有包含type属性,并且type属性值等于'password'的元素
$('[type!=password]') // 获取所有包含type属性,并且type属性值不等于'password'的元素
$('[type^=tex]') // 获取所有包含type属性,并且属性值以'tex'开头的元素,例如'text', 'text/javascript'
$('[type$=script]') // 获取所有包含type属性,并且属性值以'script'结尾的元素,例如:'text/javascript'
$('[type*=p]') // 获取所有包含type属性,并且属性值中包含'p'的元素,例如:'text/javascript', 'password'
$('[type][src][href]') // 获取所有包含type或src或href属性的元素,'包含其中一个即可'

你可能感兴趣的:(二、jQuery选择器高级用法)