二、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'元素

三、属性选择器

<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<input type="password"/>
<input type="text"/>
<a href="#">简书</a>

$('[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属性的元素，'包含其中一个即可'