jquery 进阶 bootstrap

    . 样式操作
        . 操作class
        . 操作CSS属性的
            .css("color")
            .css("color", "green")
            .css({"color": "yellow", "border": "1px solid black"})
    . 位置相关
        . .offset()
        . .position()  --> 相对于定位的父标签的偏移

        . .scrollTop() --> 返回顶部
            $(window).scroll(function(){
              ...
              // 判断窗口距离top有多少
              if ($(window).scrollTop() > ){
                 // 把返回顶部的按钮显示出来, removeClass("hide");
              }
            })

            // 返回顶部的按钮,要做的事儿
            $("返回顶部按钮").click(function(){
               // $(window).scrollTop(0);
            })
        . .scrollLeft()

    . 尺寸
        . height
        . width

        . innerHeight
        . innerWidth

        . outerHeight
        . outerWidth

    . 文本操作
        . .html()   --> 子标签和文本内容
            .html("<a href="...">我是a标签</a>")
        . .text()   --> 所有的文本内容

        . .val()
            获取用户输入的值

            $(":text").val()
            $(":checked").val()  --> 默认返回的都是第一个标签的值

            $("#s1").val()       --> select可以直接取选中的值,多选的select返回的是数组格式

            $("#t1").val()       --> textarea和input:text类似
    . 属性操作
        . .attr()   --> $("a").attr("href")
                         $("a").attr("href", "http://www.sogo.com")
                         $("a").attr({"href":"http://www.sogo.com", "title": "aaaa"}) 

        . .prop()   --> 适用于checkbox和radio(返回true或false的属性)

    . 文档操作

    . 事件 *****
        . 目前为止学过的绑定事件的方式
            . 在标签里面写 onclick=foo(this);
            . 原生DOM的JS绑定      DOM对象.onclick=function(){...}
            . jQuery版的绑定事件   jQuery对象.click(function(){...})

        . 我们今后要用的jQuery绑定事件的方式
            .on("click", function(){...})

            $("#t1").on("click", "选择器", function(){...})
            适用于 给未来的元素(页面生成的时候还没有的标签) 绑定事件 (事件委托)

            事件冒泡和事件捕获
                利用事件冒泡,给已经存在的标签绑定事件,用来捕获后代标签的事件.

        . 事件之间
            . 阻止后续事件的执行
                显式的写   return false;
            . for循环,退出当前循环 ---> 用break;

        . 补充一个键盘事件
            示例:批量操作的
        . DOM加载完之后执行
            $(document).ready(function(){
              // 写绑定事件的具体操作
            });
        . 动画(了解即可)

    . jQuery补充
        . .each循环
            . $.each(a1, function(){...})
            . $("div").each(function(){
                console.log(this);   --> this指的是每次进入循环的标签
            })
        . .data
            . 可以存字符串
            . 可以存数字
            . 可以存jQuery对象
        . 插件机制
            . 给具体的jQuery对象添加扩展
                $.fn.extend({
                    "s9": function(){
                      ...
                    }
                  })

            . 给jQuery添加全局扩展
                $.extend({
                  "s9": function(){
                    ...
                  }
                })

    . jQuery
        . 查找标签
            . 选择器
                . 基本   *****
                . 层级   *****
                . 组合   *****
                . 基本的筛选  *****
                . 属性  *****
                . 表单 *****
                . 上一个
                . 下一个
                . 父标签
                . 子标签
                . 兄弟标签

        . 操作
            . 创建标签  --> 添加到文档树中
            . 修改标签(文本,属性,值)
            . 删除标签
            . 修改样式
                . 修改class
                . 直接修改CSS属性
        . 补充
            . .each
                . $.each([,,,],function(k,v){
                     console.log(k,v);
                   })

                . $("div").each(function(){
                     console.log(this);  // 当前循环中的div标签,是一个DOM对象
                   })
            . .data
                我们可以给任意的jQuery对象保存数据.
                $("body").data("k1", "v1");
                $("body").data("k2", "v2");

                $("body").data("k1");

                $("body").removeData("k1")  --> 删除k1的值

            . 插件机制(了解即可)

    . Bootstrap

        . 栅格系统
            . 包含在container里面
            . 每一行（row）均分成12列(col-xx-**）必须放在row中)，
            . 每一个标签可以自定义占的列数（col-xx-**）

            列偏移

            列排序
        . 常用样式
            https://v3.bootcss.com/css/