jQuery选择器

1.可以官网下载jQuery源文件，在script中引用
2.可以直接跨域引用
3.如果在vue中可以 npm i jquery --save 下载使用
这里我们就使用第一种方法使用，在这之前需要先下载jQuery

(一、层次选择器)

html结构如图

 <div>
        <span class="one">5</span>
        <p>6</p>
        <span>66</span>
        <p>88</p>
 </div>

script结构
1.+选择一个同辈元素

<script src="../jQuery/jquery-1.7.2.min.js"></script>
<script>
        $(document).ready(
            $('.one + p').click(function(){
                alert(1)
            })
        )	

//点击6的时候会弹出1 只选择一个 
</script>

2.~表示所有被选择了的同辈元素

        $(document).ready(
            $('.one ~ p').click(function(){
                alert(1)
            })
        )
        //点击所有的p元素都会弹出1

（二、过滤选择器）

1.基本过滤器
就以下的例子，选取的是div自生，不是子元素
$(‘div :frist’)
$(‘div :last’)
$(‘div :not(.mydiv)’)
$(‘div :event’)
$(‘div :odd’)
$(‘div :eq(index)’)
$(‘div :gt(index)’)
$(‘div :lt(index)’)
$(‘div :focus’)

2.内容过滤器

$(‘div :contains(‘影久’)’) //选择包含有影久文本内容的div

$(‘div :empty’) //选择空的div 空标签的意思

$(‘div :has( p)’) //选择含有p元素的 div元素

$(‘div :parent’) //选择拥有子元素(包含文本元素)

$(‘div :hidden’) // 选择所有的div为hidden的元素

3.属性过滤器选择

$(‘p[id=p]’) $(‘p[id]’) //选取id为p的p标签 以及 选取有id的p标签

$(‘div[class!=mydiv]’) //选取class不为mydiv的div标签

$(‘div[class^=mydiv]’) //选取class为mydiv开头的div标签

$(‘div[class $=mydiv]’) //选取class以mydiv结束的div标签

$('div[class=mydiv]’)* //选取class有mydiv的div标签

$(‘div[class][title $=‘test’]’) //选取有class且有title属性而且title属性值是以test结尾的div元素

$(’[class=mydiv]’)* //选取所有的class为mydiv的元素

4.子元素过滤器

:first-child
:last-child
:nth-child(even)
:nth-child(odd)
:nth-child(index)

5.表单过滤元素
:enabled
:disable
:checked
:selected
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset