================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/