Jquery

jQuery 尽量用双引号
一、jQuery 概述
    1.jQuery 的概念
        jQuery 又称为 JavaScript 库
        j 就是 JavaScript， Query 就是查询的意思
        是对原生JavaScript 的封装，内部都是用JavaScript 实现的
        以前学的js 称为原生js代码
    2.jQuery.min.js
        当使用jQuery 时，先引入
        production 生产过程 代码压缩过
        development 开发过程 保留语法格式
    3.jQuery 的入口函数
        等页面DOM 元素加载完毕之后，再使用script js代码
        1. $(document).ready(function() {
                $("div").hide();
            })
        2. $(function() {
                $("div").hide();
            })
        注意：
            1.等着页面DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成 jQuery实现了封装
            2.相当于原生js 中的DOMContentLoaded
            3.不同于原生js 中的load 事件时等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
    4.jQuery 顶级对象   
        1.$ 是jQuery 的别称
            $(function(){})  = jQuery(function(){})
        2.$ 也是jQuery的顶级对象
            类似于原生原生js 中的window
            把元素利用$包装成jQuery 对象，就可以调用jQuery 的方法
    5.jQuery 对象和DOM 对象
        1.DOM 对象
            用原生js 获取来的对象就是DOM 对象
            // myDiv 是DOM 对象
            var myDiv = document.querySelector("div");  
        2.jQuery 对象
            用原生js 获取来的对象就是DOM 对象
            // $("div") 是一个jQuery 对象
            $("div");
        注意：
            jQuery 对象的本质：是利用$ 对DOM 对象包装后产生的对象（伪数组形式存储）
            jQuery 对象只能使用jQuery 方法，DOM 对象则使用原生的JavaScript 属性和方法
    6.jQuery 对象和DOM 对象的相互转换
        原因：因为原生js 比 jQuery更大，原生的一些属性和方法jQuery 是没有封装的
        1.DOM 对象转换为jQuery 对象：
            （1）$("video");     
            （2）var myVideo = document.querySelector("video");
                $(myVideo);     // 这里不加引号
        2.jQuery 对象转换为DOM 对象
            （1）[] 里面放索引号 索引号从0 开始
                $("video")[0].play();
            （2）get() 里面放索引号 索引号从0 开始
                $("video").get(0).play();

二、jQuery API
    1.jQuery 选择器
        1.选择器
            注意加引号  "" 或者 ""  都可以
            $("#id")                id 选择器
            $(".class")             类选择器
            $("div")                标签选择器
            $("*")                  全选选择器
            $("div,p,li")           并集选择器
            $("li.current")         交集选择器
            $("ul>li")              子代选择器
            $("ul li")              后代选择器   
        2.筛选选择器
            $("ul li:first")        ul 的第一个li
            $("ul li:last")         ul 的最后一个li
            $("ul li:eq(2)")        ul 里的索引号为2的li    索引号从0 开始
            $("ul li:odd")          ul 里的索引号为奇数的li  索引号从0 开始
            $("ul li:even")         ul 里的索引号为偶数的li  索引号从0 开始
        3.筛选方法
            $("li").parent()                查找最近一级的父级元素
            $("li").parents()               查找所有祖先元素
            $("ul").children("li")          相当于$("ul>li") 子代选择器
            $("ul").find("li")              相当于$("ul li") 后代选择器
            $(".first").siblings("li")      查找兄弟节点，不包括自己本身
            $(".first").nextAll()           查找当前元素之后的所有的同辈元素
            $(".last").prevAll()            查找当前元素之前的所有的同辈元素
            $("div").hasClass("protected")  查找当前元素是否含有某个特定的类，如果有则返回true
            $("ul li").eq(2)                相当于$("ul li:eq(2)"), index从0 开始
        4.隐式迭代（重要）
            遍历内部DOM 元素（伪数组形式存储）的过程叫做隐式迭代
            给匹配到的<所有元素>进行循环遍历，执行相应的方法，而不是再用for 循环进行
        5.排他思想
            // 让相应索引号的图片显示
            $("#content div").eq(index).show();
            // 让其余的图片隐藏起来
            $("#content div").eq(index).siblings().hide();
        6.链式编程
            $(this).css("color", "red");
            $(this).siblings().css("color", "");
            等同于
            $(this).css("color", "red").siblings().css("color", "");
    2.jQuery 样式操作
        1.css属性操作
            1.参数只写属性名，则是返回属性值
                $(this).css("color");
            2.通过("属性名","属性值") 来修改该属性的值
                $("div").css("width","300px");
                注意：
                    1.属性名要加引号
                    2.属性值如果是数字可以不用加单位，也可以不用加引号
            3.可以通过对象的方式修改多个属性
                $("div").css({
                    width: 300,
                    height: 300,
                    backgroundColor: "red"     // 不是数字，需要加引号，
                })
                注意：
                    1.参数是对象的形式
                    2.属性名和属性值用冒号隔开
                    3.属性与属性之间用逗号隔开
                    4.属性名可以不用加引号
                    5.属性值如果是数字可以不用加单位，也可以不用加引号
                    6.如果是复合属性，必须采取驼峰命名法 如：backgroundColor
                    7.如果值不是数字，需要加引号
            $("div").css("background","pink");
        2.类样式方法
            1.添加类
            $("div").addClass("current");
            2.删除类
            $("div").removeClass("current");
            3.切换类  （如果已经有该类，则移除；如果没有，则添加该类）
            $("div").toggleClass("current");
            注意：
                1.Class 的C 必须用大写
                2.操作类里面的参数不要加点
        3.jQuery类操作addClass、removeClass、toggleClass 与原生js 中className 的区别
            1.原生js 中className 会覆盖元素原先里面的类名
               

                var one = document.querySelector(".one");
                one.className = "two";    // two 会覆盖 one    
            2.jQuery 里面类操作是对指定类进行追加、删除、切换类名，不影响原先的类名
                $(".one").addClass("two");    // 同时具有one 和 two 两个类名
    3.jQuery 效果
        参数都可以省略，省略表示无动画，直接显示
        -------------------------------------------------------------
        speed:      速度：       slow 、 normal 、 fast 或表示动画时长的毫秒数值（如：1000）
        easing:     方式：       Optional 用来指定切换效果，默认是swing ，可用参数linear
        fn:         回调函数：    在动画完成时执行的函数，每个元素执行一次
        -----------------------------------------------------------------
        1.显示隐藏：    
            1. show( [speed] [,easing] [,fn] )            // 显示
            2. hide( [speed] [,easing] [,fn] )            // 隐藏
            3. toggle( [speed] [,easing] [,fn] )
        2.滑动：
            1.slideDown( [speed] [,easing] [,fn] )        // 下滑动
            2.slideUp( [speed] [,easing] [,fn] )          // 上滑动
            3.slideToggle( [speed] [,easing] [,fn] )
        3.淡入淡出：
            1.fadeIn( [speed] [,easing] [,fn] )           // 淡入
            2.fadeOut( [speed] [,easing] [,fn] )          // 淡出
            3.fadeToggle( [speed] [,easing] [,fn] )  
            渐进的方式调整指定的不透明度
            1.fadeTo( speed,opacity,[easing],[fn] )
            如：
                $("div").fadeTo(100, .5);   // 速度 和 透明度必须要写
            注意：
                1.opacity 透明度必须写，取值 0~1 之间
                2.speed: slow 、 normal 、 fast 或表示动画时长的毫秒数值（如：1000）必须写         
        4.自定义动画
            animate( params, [speed], [easing] ,[fn]);
            如：
                $("div").animate({
                    left: 500,
                    width: 500,
                    height: 500
                }, 500)
            --------------------------------------------------------------
            params: 想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号
                    如果是复合属性则需要采取驼峰命名法borderLeft，其余参数都可以省略
            ----------------------------------------------------------------
        5.鼠标经过与离开
            mouseover()
            mouseout()
            mouseenter()
            mouseleave()
        6.事件切换:  hover()
            表示鼠标经过和离开所触发函数
            1.hover(function(){})
                只写一个函数，表示鼠标经过和离开都会触发该函数
                如：
                    $("button").hover(function(){
                        $("div").slideToggle();
                    })
            2.hover( function(){},function(){} )
                写两个函数，第一个函数表示鼠标经过触发的函数，第二个函数表示鼠标离开触发的函数
                如：
                    $("button").hover(function(){
                        $("div").slideDown();
                    },function(){
                        $("div").slideUp();
                    })
        7.动画队列及其停止排队方法
            动画或者效果一旦触发就会执行，如果在短时间内多次执行，就造成了多个动画或者效果排队执行的情况
            停止动画或者效果： stop()
                如：
                    $(this).children("ul").stop().slideToggle();
                注意：
                    stop()必须写在动画的前面，相当于结束上一次的动画
    4.jQuery 属性操作
        1.设置或获取元素固有属性值 prop()
            1.获取属性值
                element.prop("属性名")
                如：
                    $("a").prop("href")
            2.设置属性值
                element.prop("属性名","属性值")
                如：
                    $("a").prop("title","我们都挺好")
        2.设置或获取元素的自定义属性 attr()
            1.获取属性值
                element.attr("属性名")    // 类似原生的 getAttribute()
                如：
                    $("div").attr("index")
            2.设置属性值
                element.attr("属性名","属性值")    // 类似原生的 setAttribute()
                如：
                    $("div").attr("index",4)
        3.数据缓存   date()
            date() 可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将
            被移除
    5.jQuery 内容文本值
        主要针对元素的内容 还有 表单的值的操作
        1.普通元素内容html()    （相当于原生innerHTML）
            html()          // 获取元素的内容   （获取元素中的标签和文本）  （包含标签）
            html("值")      // 设置元素的内容
        2.普通元素文本内容text()    （相当于原生innerText）
            text()          // 获取元素的内容   （只获取元素中的文本）
            text("值")      // 设置元素的内容
        3.获取设置表单值val()
            val()           // 获取表单元素的值
            val("值")       // 设置表单元素的值   
    6.jQuery 元素操作
            隐式迭代：是对同一类元素做了同样的操作
            遍历元素：如果想给同一类元素做不同的操作，就需要用到遍历
        1.遍历元素  each() 和 $.each()
            语法1：
                $("div").each(function(index,domEle){})
            注意：
                1.each() 方法遍历匹配的每一个元素，主要用于dom 元素的处理 如：标签元素
                2.里面的回调函数有2个参数：index 是每个元素的索引号；domEle 是每个dom 元素对象，不是jQuery对象
            语法2：
                var arr = ["red", "green", "blue"];
                $.each(arr,function(index,element){
                    console.log(index);
                    console.log(element);
                });

                $.each({
                    name: "andy",
                    age: 18
                }, function(index, element) {
                    console.log(index);
                    console.log(element);
                })
            注意：
                1.$.each() 方法可用于遍历任何对象，主要用于数据处理， 比如数组、对象
                2.里面的函数有两个参数：index 是每个元素的属性，domEle 是遍历内容（属性值）
        2.创建元素  
            $("

");     // 动态的创建了一个li 标签
        3.添加元素
            var li = $("

内容

")
            1.内部添加 （父子关系）
                1. $("ul").prepend($("

前面

"))
                注意：
                    把内容放入匹配元素内部的最前面，类似原生的 appendChild
                2. $("ul").append($("

后面

"));
                注意：  
                    把内容放入匹配元素内部的最后面，类似原生的 appendChild
            2.外部添加 （兄弟关系）
                1. element.after("内容")     // 把内容放在目标元素的后面
                2. element.before("内容")    // 把内容放在目标元素的前面
        4.删除元素
            1.$("ul").remove();           // 可以删除所匹配的元素  直接删除

标签
            2.$("ul").empty();            // 删除匹配元素的子元素  只清空
标签
            3.$("ul").html("");           // 清空
标签
    7.jQuery 尺寸、位置操作
        1.尺寸
            -------------------------------------------------
            width() / height()                      取得或修改元素的宽度和高度，只算width和height，
                                                    不包含padding 和 border
            innerWidth() / innerHeight()            取得或修改元素的宽度和高度，包含padding
            outerWidth() / outerHeight()            取得或修改元素的宽度和高度，包含padding 和 border
            outerWidth(true) / outerHeight(true)    取得或修改元素的宽度和高度，包含padding 和 border 和 margin
            -----------------------------------------------------
            注意：
                1.以上参数为空，则是获取响应的值，返回的是数字型
                2.如果参数为数字，则是修改相应值
                3.数字参数可以不用写单位
        2.位置
            --------------------------------------------------
            1.设置或获取元素偏移
                1.offset()    // 设置或获取相对于文档的偏移坐标，top 和 left
                    如：    
                        $("div").offset();            // 获取元素偏移  返回的是对象 {top,left}
                        $("div").offset().top;        // 获取元素偏移的top 属性值
                        $("div").offset({             // 设置元素偏移的属性值  
                            top: 200,
                            left: 200
                        });
                    注意：  
                        1.相对于文档的距离
                        2.offset() 返回的是对象
                        3.通过 offset().top  或者 offset().left 来修改单个属性值
                        4.可以通过对象的方式修改多个属性值
                2.position()   // 获取元素相对于带有定位的父级的偏移坐标
                               // 如果没有带有定位的父级，则以文档为准
                    注意：  
                        1.相对于带有定位的父级的偏移
                        2.如果所有祖先都没有定位，则以文档为准
                        3.只能获取，不能设置
                3.scrollTop() / scrollLeft()   // 设置或获取元素被卷曲的头部或左侧
                    如：
                        $(document).scrollTop();   // 获取页面被卷去的头部大小
                        $(document).scrollTop(0);  // 设置页面被卷去的头部大小

                    页面有动画的回到顶部：
                        $("body,html").stop().animate({
                            scrollTop: 0
                        });

                    $(window).scroll(function(){        // 页面滚动事件触发  
                    })

三、jQuery 事件
    1.jQuery 事件注册（单个事件绑定）
        语法：
            element.事件(function(){});
        如：
            $("div").click(function(){
                $(this).css("background","pink");
            })
    2.jQuery 事件处理（单个或多个事件绑定）
        1.事件绑定
            1.语法：
                element.on(events,[selector],fn);
            如：   
                1.  给同一个元素绑定不同的事件，且执行不同的操作
                    $("div").on({
                        mouseenter: function(){
                            $(this).css("background","skyblue");
                        },
                        click: function(){
                            $(this).css("background","purple");
                        }
                    })
                2.  给同一个元素绑定不同的事件，且执行相同的操作
                    $("div").on("mouseenter mouseleave",function(){
                        $(this).toggleClass("current");
                    })
            
            2.注意：
                1.events: 一个或多个用空格分隔的事件类型，如"click" "keydown"
                2.selector: 元素的子元素选择器
                3.fn: 回调函数,即绑定在元素身上的侦听函数
            3.优势：
                1.可以给同一个元素绑定多个事件
                2.可以实现事件委派操作   
                3.可以给未来动态创建的元素绑定事件
                    如：
                        $("ol").on("click","li",function(){
                            alert("11");
                        })
                        var li = $("

• 后来创建的
• ");
                          $("ol").append(li);
              4.动态生成元素的优势：
                  程序不会等到点击事件完才执行后面的代码，会先执行不需要进行操作的代码
                  所以点击之后才生成的标签，在后面代码是无法使用的，此时需要动态创建
          2.事件委派：
              事件委派的定义：把原来给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
              如：
                  $("ul").on("click","li",function(){});
                  给ul 绑定点击事件，通过ul 里面的li 来触发，li通过事件冒泡传给父元素
                  此时的$(this) 是指向li 的
          3.事件解绑
              1.off()
                  $("div").off();                 // 解绑div 的所有已绑定事件
                  $("div").off("click");          // 解绑div 的click 事件
                  $("ul").off("click","li");      // 解绑事件委托
              2.one()
                  $("p").one("click",function(){  // 只能触发一次
                      alert(11);
                  })
          4.自动触发事件 trigger()
              自动触发事件
              1.element.事件()
                  如：
                      // 先绑定事件
                      $("div").on("click",function(){
                          alert(11);
                      })
                      // 自动触发
                      $("div").click();
              2.element.trigger("事件")
                  如：    
                      // 先绑定事件
                      $("div").on("click",function(){
                          alert(11);
                      })
                      // 自动触发
                      $("div").trigger("click");
              3.element.triggerHandler("事件")
                  不会触发元素的默认行为
                  如：    
                      // 先绑定事件
                      $("input").on("focus",function(){
                          $(this).val("你好吗");
                      })
                      // 自动触发
                      $("input").triggerHandler("focus");  // 不会触发光标的闪烁   
      3.jQuery 事件对象
          element.on(events,[selector],function(event){})
          如：   
              $("div").on("click",function(e){
                  console.log(e);
              })
          阻止默认行为： event.preventDefault() 或者 return false
          阻止冒泡： event.stopPropagetion()

  四、jQuery 其他方法
      1.对象拷贝
          把某个对象拷贝给另一个对象使用
          语法： $.extend([deep],target,object1,[objectN]);
          注意：
              1.deep：如果设为true 为深拷贝，默认为false 浅拷贝
              2.target：要拷贝的目标对象
              3.object1：待拷贝到目标对象的对象
              4.将object1 的值拷贝给 target
              5.有相同的内容时，会进行覆盖； 内容不同的会进行相加
              6.浅拷贝：是把原来的对象里面的复杂数据类型的地址拷贝给目标对象，修改目标对象会影响拷贝对象（指向同一个对象）
              7.深拷贝：完全克隆（拷贝的是对象，而不是地址），修改目标对象不会影响拷贝对象（重新开辟了一个空间，指向不同的对象）
      2.多库共存
          1.如果是$ 符号冲突，就使用jQuery
          2.如果$ 和jQuery 都会发生冲突，就使用自定义变量的方式
              var myJQuery = jQuery.noConflict();
              console.log(myJQuery("div"));   // 此时的myJQuery 就相当于$ 和jQuery
      3.jQuery插件
          1.jQuery插件库 http://www.jq22.com/
            jQuery之家 http://www.htmleaf.com/（推荐）
          2.图片懒加载技术
              当页面滑动到可视区域，再显示图片
              使用jQuery插件库 EasyLazyload 注意：此时的js引入文件和js调用必须写到DOM元素（图片）最后面
              （品优购案例已引入）
          3.全屏滚动
              gitHub: http://github.com/alvarotrigo/fullPage.js
              中文翻译网站: http://www.dowebok.com/demo/2014/77/

  ToDoList案例：
      本地存储：页面刷新或关闭，不会丢失保存的数据
          $(function(){
              var todolist = [{
                  title: '第一天',
                  done: false
              },{
                  title: '第二天',
                  done: false
              }];
          // 1.本地存储里面只能存储字符串的数据格式  把数组对象转换为字符串格式 JSON.stringify()
              localStorage.setItem("todo", JSON.stringify(todolist));
          // 2.获取本地存储的数据，需要把字符串数据转换为 js对象格式 JSON.parse()
              var data = localStorage.getItem("todo");
              // console.log(data[0].title);    data 现在是字符串 是没有title 属性的
              data = JSON.parse(data);
          })

  :checked  表示选中的个数  输出length
      如：
          if ($(".j-checkbox:checked").length === $(".j-checkbox").length)
          判断被选中的个数是否等于全部复选框的个数
  .substr(1)      从索引号为1 的位置截取字符串
  .toFixed(2)     保留两位小数
  parseInt()      将字符串的值转换为数值型
  parseFloat()    字符串转浮点型
  .addClass()     添加类名
  .removeClass()  删除类名