jQuery 学习文档

• 参数都可以省略，无动画直接显示。
• speed:三种预定速度之一的字符串（'slow','normal',or 'fast') 或表示动画时长的毫秒数值（如：1000).
• easing:(optional)用来指定切换效果，默认是'swing',可用参数 'linear'.
• fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

        
            div{
                width: 300px;
                height: 500px;
                background:pink;
                display: none;
            }

            <button>显示</button>
            <button>隐藏</button>
            <button>切换</button>
            <div></div>
           
           $('button').eq(0).click(function(){
              $('div').show(1000,function(){
                alert(1)
               })
            })
           $('button').eq(1).click(function(){
               $('div').hide(1000)
           })
           $('button').eq(2).click(function(){
               $('div').toggle(1000)
           })
           //一般情况下不给参数
        
    

• 参数都可以省略，无动画直接显示。
• speed:三种预定速度之一的字符串（'slow','normal',or 'fast') 或表示动画时长的毫秒数值（如：1000).
• easing:(optional)用来指定切换效果，默认是'swing',可用参数 'linear'.
• fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

        
            div{
                width: 300px;
                height: 500px;
                background:pink;
                display: none;
            }

            <button>下拉滑动</button>
            <button>上拉滑动</button>
            <button>切换滑动</button>
            <div></div>
           
           $('button').eq(0).click(function(){
              $('div').slideDown(1000,function(){
                alert(1)
               })
            })
           $('button').eq(1).click(function(){
               $('div').slideUp(1000)
           })
           $('button').eq(2).click(function(){
               $('div').slideToggle(1000)
           })
           //一般情况下不给参数
        
    

• 参数都可以省略，无动画直接显示。
• speed:三种预定速度之一的字符串（'slow','normal',or 'fast') 或表示动画时长的毫秒数值（如：1000).
• easing:(optional)用来指定切换效果，默认是'swing',可用参数 'linear'.
• fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
• opacity:透明度必须写，取值0～1之间;
  speed:三种预定速度之一的字符串（'slow','normal',or 'fast') 或表示动画时长的毫秒数值（如：1000).

        
            div{
                width: 300px;
                height: 500px;
                background:pink;
                display: none;
            }

            <button>淡入效果</button>
            <button>淡出效果</button>
            <button>淡入淡出切换</button>
            <button>修改透明度</button>
            <div></div>
           
           $('button').eq(0).click(function(){
              $('div').fadeIn(1000,function(){
                alert(1);
               })
            })
           $('button').eq(1).click(function(){
               $('div').fadeOut(1000);
           })
           $('button').eq(2).click(function(){
               $('div').fadeToggle(1000);
           })
           $('button').eq(3).click(function(){
            //透明度和速度必须写；
            $('div').fadeTo(1000,0.5);
        })
           //一般情况下不给参数
        
    

• params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，
• speed:三种预定速度之一的字符串（'slow','normal',or 'fast') 或表示动画时长的毫秒数值（如：1000).
• easing:(optional)用来指定切换效果，默认是'swing',可用参数 'linear'.
• fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

        
            $(function(){
                var toolTop = $('.recomend').offset().top;
                $(window).scroll(function(){
                    if($(document).scrollTop()>=toolTop){
                        $('.fixedtool').fadeIn();
                    }else{
                     $('.fixedtool').fadeOut();
                    }
                })
            })
        
    

        
            $(function(){
               $('.fixedtool li').click(function(){
                   console.log($(this).index());
                   //当我们每次点击小li 就需要计算出页面要去往的位置
                   //选出对应索引号的内容区的盒子，计算它的.offset().top
                   var current = $('.floor .w').eq($(this).index()).offset().top;
                   //页面动画滚动效果
                   $("body,html").stop().animate({
                       scrollTop:current;
                   }
               })
            })
        
    

        
            $(function(){
                var toolTop = $('.recomend').offset().top;
                toggleTool()

                //封装显示隐藏的函数
                function toggleTool(){
                    if($(document).scrollTop()>=toolTop){
                        $('.fixedtool').fadeIn();
                    }else{
                     $('.fixedtool').fadeOut();
                    }
                }

                $(window).scroll(function(){
                    toggleTool()
                })
               $('.fixedtool li').click(function(){
                   console.log($(this).index());
                   //当我们每次点击小li 就需要计算出页面要去往的位置
                   //选出对应索引号的内容区的盒子，计算它的.offset().top
                   var current = $('.floor .w').eq($(this).index()).offset().top;
                   //页面动画滚动效果
                   $("body,html").stop().animate({
                       scrollTop:current;
                   });
                   //点击之后，让当前的小li 添加current 类名，姐妹移除current 类名，姐妹移除current
                   $(this).addClass('current').siblings().removeClass()
               })
            })
        
    

        
            $(function(){
                var toolTop = $('.recomend').offset().top;
                toggleTool()

                //封装显示隐藏的函数
                function toggleTool(){
                    if($(document).scrollTop()>=toolTop){
                        $('.fixedtool').fadeIn();
                    }else{
                     $('.fixedtool').fadeOut();
                    }
                }

                $(window).scroll(function(){
                    toggleTool();
                    //当页面滚动到某个内容区域，左侧电梯导航小li 相应添加和删除 current类名
                    $('.floor .w').each(function(i,ele){
                        if($(document).scrollTop()>=$(ele).offset().top){
                            console.log(i)
                            $('.fixedtool li').eq(i).addClass("current").siblings().removeClass("current");
                        }
                    })
                })
               $('.fixedtool li').click(function(){
                   console.log($(this).index());
                   //当我们每次点击小li 就需要计算出页面要去往的位置
                   //选出对应索引号的内容区的盒子，计算它的.offset().top
                   var current = $('.floor .w').eq($(this).index()).offset().top;
                   //页面动画滚动效果
                   $("body,html").stop().animate({
                       scrollTop:current;
                   });
                   //点击之后，让当前的小li 添加current 类名，姐妹移除current 类名，姐妹移除current
                   $(this).addClass('current').siblings().removeClass()
               })
            })
        
    

        
            $(function(){
                //当我们点击了小 li 此时不需要执行页面滚动事件里面的li 的背景选择 添加current
                //节流阀 互斥锁
                var flag =true;
                //1.显示隐藏电梯导航
                var toolTop = $('.recomend').offset().top;
                toggleTool()

                //封装显示隐藏的函数
                function toggleTool(){
                    if($(document).scrollTop()>=toolTop){
                        $('.fixedtool').fadeIn();
                    }else{
                     $('.fixedtool').fadeOut();
                    }
                }

                $(window).scroll(function(){
                    toggleTool();
                    //3.当页面滚动到某个内容区域，左侧电梯导航小li 相应添加和删除 current类名
                    if(flag){
                        $('.floor .w').each(function(i,ele){
                            if($(document).scrollTop()>=$(ele).offset().top){
                                console.log(i)
                                $('.fixedtool li').eq(i).addClass("current").siblings().removeClass("current");
                            }
                        })
                    }
                })

                //2.当我们每次点击小li 就需要计算出页面要去往的位置
               $('.fixedtool li').click(function(){
                   flag=false;
                   console.log($(this).index());
                   
                   //选出对应索引号的内容区的盒子，计算它的.offset().top
                   var current = $('.floor .w').eq($(this).index()).offset().top;
                   //页面动画滚动效果
                   $("body,html").stop().animate({
                       scrollTop:current;
                   },function(){
                       flag=true;
                   });
                   //点击之后，让当前的小li 添加current 类名，姐妹移除current 类名，姐妹移除current
                   $(this).addClass('current').siblings().removeClass()
               })
            })
        
    

• 1.deep: 如果设为true 为深拷贝，默认false 浅拷贝
• 2.target: 要拷贝的目标对象
• 3.object1:待拷贝到第一个对象的对象
• 4.浅拷贝

            
               $.extend(target,obj);
               //浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象，会覆盖原来的
            
        

• 5.深拷贝

            
               $.extend(true,target,obj);
               //深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起
            
        

• 1.如果$ 符号冲突 我们使用 jQuery
• 2.让jquery 释放对$ 控制权， 让用户自己决定

            
                var suibian = jQuery.noConflict();
            
        

1⃣️直接获取视频，得到就是jQuery对象

        
            $('video');
        
    

2⃣️我们已经使用原生js,获取过来 Dom对象

        
            var myvide = document.querySelector('video');
            $(myvideo);
        
    

• 1.瀑布流
• 2.图片懒加载
• 3.全屏滚动
http://www.dowebok.com/demo/2014/77/
• 4.bootstrap组件
• 5.bootstrapJS组件

• 1.刷新页面不会丢失数据，因此需要用到本地存储 localStorage
• 2.核心思路:不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
• 3.存储的数据格式：var todolist =[{title:'xxx',done:false}]
• 4.注意点：

a.本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON.stringify(data)

b.获取本地存储的数据，我们需要把里面的字符串数据转换为 对象格式 JSON.parse(),我们才能使用里面的数据;

            
                localStorage.setItem('todo',JSON.stringify(todolist));
                var data = localStorage.getItem('todo');
                data=JSON.parse(data);
            
        

• 1.切记：页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以要先把数据保存到本地存储里面;
• 2.利用事件对象.keyCode判断用户按下回车键（13）
• 3.声明一个数组，保存数据
• 4.先要读取本地存储原来的数据(声明函数getData()）,放到这个数组里面
• 5.之后把最新从表单获取过来的数据，追加到数组里面
• 6.最后把数组存储给本地存储（声明函数savaDate())

            
                $(function(){
                   //键盘按下事件
                    $('#title').on('keydown',function(event){
                        if(event.keyCode===13){
                           //先要读取本地存储原来的数据
                           var local = getDate();
                           //把local数组进行更新数据，把最新的数据追加给local数组；
                           local.push({title:$(this).val(),done:false});
                           //把这个数组local 存储到本地存储
                           saveDate(loacl);
                           //本地存储数据渲染加载到页面
                           load();

                        }
                    })
                    //读取本地存储的数据
                    function getDate(){
                        var data = localStroge.getItem('todolist');
                        if(data !==null){
                            //本地存储里面的数据是字符串格式的，但是我们需要的是对象格式的
                            return JSON.parse(data)

                        }else{
                            return [];
                        }
                    }

                    //保存本地存储数据
                    function saveDate(data){
                        localStroge.setItem('todolist',JSON.stringify(data));
                    }

                    //渲染加载数据
                    function load(){
                        //读取本地存储的数据
                        var data = getDate();
                        //遍历之前先要清空ol里面的元素内容
                        $("ol").empty();
                        //遍历这个数据
                        $.each(data,function(i,n){
                           $('ol').prepend('<li> <input type="checkbox" > <p></p> <a href="javascriot:;">
                           </a></li>')
                        })
                    }
                })
            
        

• 1.因为后面也会经常渲染加载操作，所以声明一个函数load，方便后面调用
• 2.先读取本地存储数据（数据不要忘记转换为对象格式）
• 3.之后遍历这个数据（$.each())，有几条数据，就生存几个小li 添加到ol里面
• 4.先要读取本地存储原来的数据(声明函数getData()）,放到这个数组里面
• 5.之后把最新从表单获取过来的数据，追加到数组里面
• 6.最后把数组存储给本地存储（声明函数savaDate())

            
            代码如上