JQuery+Bootstrap总结

================JQuery===========

JQuery
        1. jQuery是什么？
            一个js插件， 相比较原生的DOM操作更简单、开发效率更高
        2. jQuery使用
            1. jQuery版本
                1. 版本号 1.x/2.x/3.x
                    1.x 兼容IE6/7/8
                2. jquery.min.js和query.js的区别
            2. jQuery的导入
                1. 先导入后使用
                2. 导入方式：
                    1. 自己下载到本地使用
                    2. 使用CDN方式
            3. jQuery的调用
                1. $
                2. jQuery
            4. jQuery对象和DOM对象
                1. 注意事项
                    jQuery对象才能调用jQuery的方法，DOM对象只能调用DOM方法
                2. 互相转换
                    1. jQuery对象 --> DOM对象
                        $("div")  --> $("div")[0]
                    2. DOM对象    --> jQuery对象
                        this      --> $(this)
            5. jQuery语法
                $("选择器").方法()
                支持链式操作
            6. jQuery选择器
               1）选择器
                1. 基本选择器
                    1. $("div")
                    2. $("#d1")
                    3. $(".c1")
                    4. $("*")
                2. 组合选择器
                    1. $("div, .c1")      --> 找到所有div标签和有c1样式类的标签
                3. 层级选择器
                    1. $("#d1 span")      --> id是d1标签下面所有的span标签（子子孙孙）
                    2. $("#d1>span")      --> id是d1标签下面一层的span标签（子代儿子）
                    3. $("label+input")   --> 找到紧挨着label标签的input标签（紧挨着的兄弟）
                    4. $(".c1~div")       --> 找到c1样式类下面的div标签（不挨着也行的兄弟）
                4. 属性选择器
                    1. $("[s14]")
                    2. $("[type='text']")
                    3. $("[type!='text']")
                    4.$(“[type!='text’][id=‘name’]”)(通过双重属性来筛选)
               2）筛选器
                5. 基本筛选器
                    1. :first/:last（拿到一堆中的第一个/最后一个）
                    2. :eq()/:gt()/:lt()（根据一堆中的索引筛选）
                    3. :even/:odd（根据索引的奇偶筛选）
                    4. $("div:not(.c1)")  --> 找到没有c1样式类的div标签
                    5. $("div:has(.c1)")  --> 找到后代中有c1样式类的div标签
                6. 表单筛选器
                    1. $(":text")
                    2. $(":password")
                    3. ...
                    4. $(":disabled")
                    5. $("input:checked")
                    6. $(":selected")
                7. 筛选器方法
                    1. .next()/.prev()/nextAll()/nextUntil()/prevAll()/prevUntil()
                    2.
                        .parent() (一直向外找)
                        .children()（找儿子这层）
                        .siblings()（所有兄弟上下都找，不包括自己）
                    3. .find('选择器条件')      --> 在后代查找符合要求的（子子孙孙）
                    4. .filter('选择器条件')    --> 根据条件对已经找到的结果进行二次过滤
                    5. .first()/.last()         —>一堆中找复合条件的（和基本筛选器一样）
                    6. .not()/.has()
                    7. .eq()
            7. jQuery操作样式
                1. 操作class
                    1. .addClass()
                    2. .removeClass()
                    3. .hasClass()
                    4. .toggleClass()
                2. 操作样式
                    1. 操作class
                    2. 操作CSS
                        $("").css("color")            --> 获取选中标签的颜色值
                        $("").css("color", "yellow")  --> 设置选中标签的颜色值
                3. 位置操作
                    1. position()          --> 获取相对定位过的祖先元素的偏移
                    2. offset()            --> 获取相对当前窗口的偏移
                    3. scrollTop()         --> 相对顶部的偏移
                    4. scrollLeft()        --> 相对左侧的偏移
                    返回顶部示例！
                4. 尺寸操作
                    1. height/width              元素
                    2. innerHeight/innerWidth    元素 + 内填充
                    3. outerHeight/outerWidth    元素 + 内填充 + 边框
                    5.HTML代码/文本/值
                            没有参数就是获取对应的值，
                            有参数就设置对应的值
                            - .html()  添加html标签    .html("<span>啦啦啦。</span>")
                            - .text()  添加文本        .text("啦啦啦。")
                             - .val()
                                   input :一个参数,获取的是input框里面的值
                                    checkbox :一个参数，获取的是value的值
                                    select :
                                        单选：获取值
                                        多选：得到的是一个数组，设置的时候也要是数组

                6. 属性操作
                    1. attr    (属性,可以设置值)
                    2.removeAttr
                    3. prop    （属性，true/false）
                    4.removeProp
8. 文档操作
        创建标签用：document.createElement("div")

        1. 内部添加
            1. 前面加
                1. $(A).prepend(B)
                2. $(A).prependTo(B)
            2. 后面加
                1. $(A).append(B)
                2. $(B).appendTo(A)
        2. 外部添加
            1. 前面加
                1. $(A).before(B)
                2. $(B).insertBefore(A)
            2. 后面加
                1. $(A).after(B)
                2. $(B).insertAfter(A)

        3. 移除和清空
            1. remove()   --> 把选中过的标签从文档树中移除
            2. empty()    --> 把选中的标签内部的元素都移除
        4. 替换
            1. $(A).replaceWith(B)
            2. $(B).replaceAll(A)
        5. clone
            clone()/clone(true)
            注意参数true,加上true会把标签绑定的事件也复制

    2. 事件
        1. jQuery绑定事件的方式
            1. 给标签绑定事件的方式
                1. 在标签上写 onclick=函数();
                2. 在js代码中 标签对象.onclick = function(){}
            2. jQuery绑定事件
                1. $("选择器").click(function(){...});
                2. $("").on("click", "子选择器", function(){...})--> 事件委托--> 原理是事件冒泡
                        常用事件
                               blur([[data],fn])   失去焦点
                               focus([[data],fn])  获取焦点（ 搜索框例子）
                               change([[data],fn]) 当select下拉框中的元素发生改变的时候触发change事件(select例子)
                               click([[data],fn])  点击
                               dblclick([[data],fn]) 双击
                               scroll([[data],fn])   滚动
                               submit([[data],fn])   提交
            3. 事件委托
                原理：事件冒泡
                    1. 如何阻止事件冒泡（向上传递）
                        e.stopPropagation()
                目的：解决未来的标签如何绑定事件！
                语法：
                    $("祖先标签").on("click", "选择器", function(){...})

                    注：
                        1. 阻止事件冒泡
                            event.stopPropagation()
                        2. 阻止默认事件的执行（通常用于阻止form表单的提交）
                            event.preventDefault()
                        3. 阻止后续事件的执行
                            return false
9.动画效果
    基本（隐藏）
           show([s,[e],[fn]])
           hide([s,[e],[fn]])
           toggle([s],[e],[fn])
    滑动
           slideDown([s],[e],[fn])
           slideUp([s,[e],[fn]])
           slideToggle([s],[e],[fn])
    淡入淡出
           fadeIn([s],[e],[fn])
           fadeOut([s],[e],[fn])

           fadeTo([[s],o,[e],[fn]])
                  - 淡出到0.66透明度
           fadeToggle([s,[e],[fn]])
                  - .fadeToggle(3000, function () {
                        alert("真没用3");
                });
自定义
animate(p,[s],[e],[fn])1.8*
   - css属性值都可以设置
    - 图片变小（漏气）

10.补充
        1. each
            1. $.each(要遍历的对象, function(){...})
            2. $("").each(function(){
              // this 是进入循环体的当前标签
              console.log(this);
            })
            3. 退出本层循环
                return
            4. 退出each循环
                return false
        2. .data()
            1. .data(key, value) --> 存值
            2. .data(key)        --> 根据key取值
            3. .data()           --> 取所有键值对
            4. .removeData(key)  --> 根据key删除值
            5. .removeData()     --> 删除所有键值对
        3. 扩展
            1. $.extend()        --> 给jQuery扩展自定义方法
            2. $.fn.extend()     --> 给jQuery对象扩展自定义方法
用法1、$.xxx()
   $.extend({
      "GDP": function () {
         console.log("戴小红花");
      }
   });
   - 给jQuery添加扩展
   - $.GDP()

用法2、$("").xxx()
   $.fn.extend({
      "BJG": function () {
         console.log("英语八级就是好！");
      }
   })
   - 给jQuery对象添加扩展
   - $(":input").BJG()

总结：

1. 页面加载完之后才执行的JS代码
        1. DOM方式
            window.onload = function(){}
        2. jQuery方式
            $(document).ready(function(){...})    

2.Bootstrap的使用
            1. 下载
                https://v3.bootcss.com/

            2. 导入
                link标签导入 bootstrap.css或者bootstrap.min.css
            3. 图标
                1. Bootstrap内置的： https://v3.bootcss.com/components/
                2. font-awesome图标：http://www.fontawesome.com.cn/
                3. 阿里图标：        http://iconfont.cn/
            4. 面板
            5. ...
            4. jS插件
                1. 模态框
                2. 轮播图

3. 插件
        弹出插件SweetAlert：http://mishengqiang.com/sweetalert/