jquery回顾

一：项目

阿里云地址：

http://47.94.45.85//liupenggengen/index.html

github地址

https://github.com/liupeng1128/jiazhengxitong

二：知识梳理

0. 特点
    兼容性
    简化dom操作（批量操作）
    链式操作（dom操作方法返回值为当前jQuery对象）
    不污染顶级变量 $/jQuery

    vue/react/angular(禁止使用jQuery)
    jQuery

1. jQuery构造函数
    $ = jQuery
    
    1) $(回调函数)
        文档加载完毕后执行该回调函数
        window.onload = function(){}
    2) $(css3选择器)
        将选择到的dom元素加入到jquery类数组对象
    3) $(标签)
        $("<div>hello world</div>")
        将参数中的标签转化dom对象，再封装为类数组对象
    4) $(dom)
        将dom对象转换为jQuery对象

2. jQuery对象
    jQuery对象，类数组对象。数组中的元素是DOM对象

    var one = document.getElementById("one")
    one是Element的实例，可以调用Element、Node
        one.children()
        one.childNodes()

    var $one = $(one)
    $one是jQuery的实例，可以调用jQuery
        $one.children()
        $one.find();
        ...

    <div class="one">one</div>
    <div class="one">two</div>
    <div class="one">three</div>
    $(".one")

3. 选择器
    核心选择器
    层次选择器
    属性选择器
    伪类选择器
    伪元素选择器

4. 属性、csss
    attr()
        获取或者设置attribute（核心、自有、自定义）
        参数    
            1) attr(key)
            2) attr(key,val)
    prop()
        获取或者设置property（核心、自有）
            1) prop(key)
            2) prop(key,val)
    removeAttr(attrName)
    removeProp(propName)
    val()
        获取或设表单元素的值
    css()
        获取或者设置样式
        1) css(key)
        1) css(key,val)
    addClass()
    removeClass()
    hasClass()
5. DOM操作
    clone()
        克隆jQuery对象
        参数
    wrap()
        为选中元素添加一个父元素
    append()
        为选中元素追加一个子元素    
    prepend()
        为选中元素插入一个子元素    
    after()
        在当前元素后添加一个兄弟元素
    before()
        在当前元素前添加一个兄弟元素
    empty()
        清空子元素
    remove()
        移除当前元素
    replace()
        替换元素
    html()
        获取或设置一个元素的html内容
    text()
        获取或试着一个元素的text内容

6. 遍历
    each(function(index,item){})
    map(function(index,item){});
    eq()
        获取类数组中的某一个jQuery对象
        $("div")[0]
        $("div").eq(0)
    filter()
        $("div:first-child")
        $("div").filter(":first-child")
    first()
    last()
    
    not(selector)
    parent([selector])        父元素
    parents(selector)     父元素
    children([selector])     子元素
    find(selector)             后代元素
    next()
    prev()
    siblings()

7. 事件机制
    on(eventType[,代理],handler)
    off(eventType[,代理],handler)
    on({
        eventType1:handler1,
        eventType2:handler2,
        ....
    }[,代理])

    click(handler);
        速写 on("click",handler)
    mouseover()
    mouseout()
    focus()
    blur()
    ...
8. ajax
    1) 底层接口
        ajax(url,{
            async
            data
            processData
            method
            dataType
                响应结果 responseType json/xml/text/script...
            contentType
                application/x-www-form-urlencoded
                text/plain
                multipart/form-data
                如果取其他值，在请求之前先发送一个options请求
            beforeSend
            success
                xhr.status === 200
            error
                xhr.status !== 200    // 404 403 401 500
            complete
        });
        ajaxSetup({});
    2) 快捷应用
        get(url[,data][,handler][,dataType]);
        post(url[,data][,handler][,dataType]);

9. bom
    alert()         警告框
    prompt()         询问框，允许输入，并且将输入的结果返回
    confirm()     确认框，用户选择点击确认或者取消，如果点击确认返回true       

    间歇调用
        var id = setInterval(function(){},毫秒数);
        clearInterval(id)
    超时调用
        var id = setTimeout(function(){},毫秒数);
        clearTimeout(id)

        1. 间歇与后台交互
        2. 动画
            呼吸灯

10. jquery动画
    animate()
    fadeIn
    fadeOut
    slideUp
    slideDown

    第三方库 velocityjs

day02 bootstrap
    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。

1. 版本
    v4.3.1
    布局系统（12栅格系统）
    css工具样式
    组件库（结构，样式，行为）
        模态框（事件）
        下拉下单
2. 内容
    1) css
        bootstrap.css             未经压缩（注释，缩进）
        bootstrap.min.css     压缩（体积小，传输速度快）
        bootstrap.js
        bootstrap.min.js

    2) js,依赖jQuery

3. helloworld
    1) 添加依赖
        cdn
        本地
        模块化（es6）
    2) 使用
4. 特点
    1) 用于开发响应式的移动优先的网站
        @media screen and (min-width:960px){
            xxx
        }
    2) 提供了大量组件，可以简化开发

5. 布局
    注意：
        如果开发响应式网站，务必在head中添加如下代码
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        目的，使用相对单位解释px

    网格系统，容器/行/列。一行分为12列（12栅格系统）
    1) container/ container-fluid
        容器，容器中包含多行
    2) row
        由于container具有padding，所有row中定义margin取值为负数，用于抵消父元素padding
    3) col
        col         极小屏        screen< 576px
        col-sm     小屏            576px<screen<768px
        col-md     中屏            768px<screen<992px
        col-lg     大屏         992px<screen<1200px
        col-xl     特大屏        1200px < screen

        移动优先：
            默认体现移动端（极小屏）的样式，如果想要覆盖这些样式，那需要添加对应大屏样式

        .col-1 {
          -ms-flex: 0 0 8.333333%;
          flex: 0 0 8.333333%;
          max-width: 8.333333%;
        }
        @media (min-width: 1200px){
            .col-xl-1 {
            -ms-flex: 0 0 8.333333%;
            flex: 0 0 8.333333%;
            max-width: 8.333333%;
          }
          .col-xl-2 {
            -ms-flex: 0 0 16.666667%;
            flex: 0 0 16.666667%;
            max-width: 16.666667%;
          }
        }

        <div class="col-1 "></div>
    4) 盒子上的padding
        px-1 ~ px-5
        pl pr
        py-1 ~ py-5
        pt pb
    5) 伸缩盒元素的纵向排列
        align-items-start
        align-items-center
        align-items-end
    6) 伸缩盒元素的横向排列
        justify-content-start
        justify-content-center
        justify-content-end
    7) 排序
        order-序号
    8) 偏移
        offset-x
    9) 自动外边距
        ml-auto
        mr-auto
6. 内容
    1) reboot
        重置样式
    2) Typography
        排版印刷
        h1~h6 
        list-unstyled 
    3) 图片 
            img-fluid
            img-thumbnail
    4) 表格
        table
        table-dark、table-light
        thead-dark、thead-light
        table-striped
        table-bordered
        table-borderless
        table-hover
        table-sm
        table-success、table-danger、table-info
        table-responsive

7. 工具
    1) 颜色
        text-primary
        text-danger
        text-success
        text-info
        text-warning
        text-light
        text-dark

        bg-danger
        ...
    2) 边框
        border
        border-bottom、border-top、border-left、border-right
        border-primary、border-danger、border-success
        rounded-sm、 rounded-lg、rounded-0
    3) 显示与隐藏
        d-none、 d-block 、d-inline
        d-lg-none、 d-sm-none 、d-md-none
    4) 阴影
        shadow-none
        shadow-sm
        shadow-lg
    5) 文本
        text-left、text-right、text-center
        font-weight-bold
        text-monospace
    ...

8. 组件
    1) button
        按钮
        类：
            btn 、
            btn-outline-primary、btn-outline-success、...
            btn-primary、btn-success、...
            btn-lg 、btn-sm
    2) alerts
        提示框
        类：
            alert
            alert-primary
            alert-dismissible 
        属性：
            data-dismiss="alert"
            通过将元素从dom树中移除的方式来关闭alert

        方法：
            $().alert("close")
    3) carousel
        轮播图
            data-interval=""     轮播时间
            data-keyboard=""
            data-pause=""
        直接复制粘贴，然后修改路径即可（图片尺寸应该要有标准）
    4) modal
        模态框
        类：
            modal     容器（层罩）
                modal-dialog     modal-xl（模态框）
                    modal-content     (模态框的内容容器)
                        modal-header     （头）
                            modal-title     标题
                        modal-body             模态框内容区域
                        modal-footer         底部（关闭.提交）
        属性：
            data-dismiss=""
            data-toggle="modal" 
            data-target="#exampleModal"
        方法
            $().modal("show")
            $().modal("hide")
    5) form

        类：
            form-group
            form-control 、form-control-sm、form-control-lg
            form-check、form-check-inline 、form-check-input、form-check-label

    6) badge     
        徽章
        类：
            badge
            badge-dark 、badge-light
    7) breadcrumb
        面包屑导航
        breadcrumb
        breadcrumb-item
    8) collapse
        折叠
        类
            collapse
            show
        $().collapse("toggler")
        $().collapse("show")
        $().collapse("hide")
    9) Dropdown
        下拉菜单
        使用dropdown之前要先确保popper导入成功
        <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>

        类
            dropdown
                dropdown-menu
                    可以放任意其他的元素（自定义）
                    dropdown-item
                    dropdown-item
        属性：
             data-toggle="dropdown"
    10) navs
        导航
        类
            nav nav-tabs nav-pills
                nav-item
                nav-link nav-active