jQuery选择器和DOM操作

1.认识jQuery
    JQ是JS库，是对JavaScript的一个封装，也即是说JQ提供了大量的API，在开发时，以最少代码实现最多的功能。
    于2006年开源，现在已经发展成为集JS、CSS、DOM、Ajax于一体的强大的框架体系。
    宗旨：write less,do more!（写的少，做得多）
2.学习文档
    中文文档：https://www.jquery123.com/
    API学习或查询：https://jquery.cuishifeng.cn/
3.JQ功能
    1）控制页面样式
    2）访问和操作DOM
    3）事件处理
    4）提供了大量的插件
    5）Ajax技术的封装
    6）提供了大量的动画处理
    ……
4.使用JQ
    1）本地引入
        <script src="./js/jquery-3.3.1.min.js"></script>
    2）CDN引入
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>

    注意：JQ必须先引入，然后才能调它的API。可以在head标签中引入，也可以在最后引入，一般在最后引入。
5.选择器
    1）基本选择器
        id: #id
        class: .class
        element: element
        *   选择所有标签（项目开发时，不要用，因为它要匹配完所有的标签，性能差）
        ,   选择多个DOM
    2）层次选择器
        选择器1 选择器2：选择选择器1的所有的后代元素（选择器2）
        选择器1>选择器2：只选择选择器1的子元素
        选择器1+选择器2：选择紧挨着选择器1的第一个相邻元素（兄弟元素）
        选择器1~选择器2：选择选择器1的所有兄弟元素
    3）过滤选择器
        a.简单过滤选择器
            :first或first()  第一个元素
            :last或last()    最后一个元素
            :not(selector)  除selector之外的元素
            :even   偶数元素
            :odd    奇数元素
            :eq(index)  第n个元素
            :gt(index)  大于第n个后的元素
            :lt(index)  小于第n个后的元素
            :header     选择h1-h6所有标题元素
        b.内容过滤选择器
            :contains(text) 获取包含指定文本内容的元素
            :empty  获取不包含子元素或文本内容的元素
            :has(selector)  获取含有选择器所匹配的元素
            :parent 获取含有子元素或文本的元素
        c.可见性过滤选择器
            :hidden     选择display:none或隐藏文本域(hidden)的元素
            :visible    选择display:block的元素
        d.属性过滤选择器
            [attr]      获取含有指定属性的元素
            [attr=value]    获取属性值为value的元素
            [attr!=value]   获取属性值不为value的元素
            [attr^=value]   获取属性值以value开头的元素
            [attr$=value]   获取属性值以value结尾的元素
            [attr*=value]   获取属性值含有value的元素
            [attr1][attr2][attr3]    获取含有指定多个属性的元素
    4）表单选择器
        :input
        :button
        :submit
        :text
        :password
6.DOM操作
    1）属性操作
        a.获取属性值
            attr(属性名)
        b.设置属性
            attr(属性名,属性值)
        c.删除属性
            removeAttr(属性名)
    2）文本内容操作
        a.获取文本及表单组件内容
            html()  可以操作标签
            text()  只能操作文本内容，不操作标签
            val()   只能用于表单组件
        b.设置（修改）文本及表单组件内容
            html(内容)
            text(内容)
            val(内容)
        c.删除文本及表单组件内容
            html('')
            text('')
            val('')
    3）元素样式操作
        a.设置样式
            css('属性名','属性值')  设置一个样式
            css({'属性名1':'属性值1','属性名2':'属性值2',...}) 设置多个样式
        b.操作类
            i)添加类
                addClass('类名')    添加一个类名
                或：
                addClass('类名1 类名2 ....')    添加多个类名
            ii)删除类
                removeClass()       清空类名
                或：
                removeClass('类名')   清除指定的类名
                或：
                    removeClass('类名1 类名2 ....')     清除指定的多个类名
    4）页面元素操作
        a.创建DOM节点
            $(dom节点内容)
        b.在内部添加DOM节点
            append()        在内部的最后添加DOM
            appendTo()      将DOM添加到内部的最后
            prepend()       在内部的最前面添加DOM
            prependTo()     将DOM添加到内部的最前面
        c.在外部添加DOM节点
            before()        在当前DOM前添加（同级添加）
            insertBefore()  把DOM添加到当前元素之前（同级添加）
            after()         在当前DOM之后添加（同级添加）
            insertAfter()   把DOM添加到当前元素之后（同级添加）
        d.复制DOM节点
            clone()         只复制DOM元素
            clone(true)     复制DOM及绑定在它上面的事件
        e.删除DOM节点
            remove()        删除当前DOM及子元素
            remove(dom节点)   在同级DOM中删除指定的DOM
            empty()         删除当前DOM下的子元素，保留当前DOM