关于浏览器中的各高
页面可视区域的高：document.body.clientHeight 
页面可视区域的高：document.body.offsetHeight 
对象顶部距离页面顶部的偏移量：offsetTop 
被滚动条卷入的高度：document.documentElement.scrollTop; 
屏幕分辨率的高： window.screen.height; 
屏幕高 - 任务栏的高： window.screen.availHeight;

jQuery图片懒加载
html 部分
// html
<img src="./img/pic_loading.jpg" class="img_delay" data-src="./img/img01.jpg">

src 属性放置加载时显示的图片 
data-src 属性显示带有原始URL地址的图片

<script>
        $(function () { 
            $(window).on('scroll',function () {//当页面滚动的时候绑定事件
                $('.img_delay').each(function () {//遍历所有的img标签
                    if (checkShow($(this)) && !isLoaded($(this)) ){
                        // 需要写一个checkShow函数来判断当前img是否已经出现在了视野中
                        //还需要写一个isLoaded函数判断当前img是否已经被加载过了
                        loadImg($(this));//符合上述条件之后，再写一个加载函数加载当前img
                    }
                })
            })
            function checkShow($img) { // 传入一个img的jq对象
                var scrollTop = $(window).scrollTop();  //即页面向上滚动的距离
                var windowHeight = $(window).height(); // 浏览器自身的高度
                var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置
        
                if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
                    return true;
                    console.log("出现")
                }
                return false;
            }
            function isLoaded ($img) {
                return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
                    console.log("已经加载过了")
            }
            function loadImg ($img) {
                setTimeout(function(){
                    $img.attr('src',$img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
                    console.log("加载")
                },300)
            }
        });
    </script>

select下拉框取值

function jsSelectToggle(){
            $(".js-title-select select").change(function(){
                var jsSelectToggleTwo = $(".js-select-toggle-two");
                var jsSelectToggleOne = $(".js-select-toggle-one");
                var val = $(this).val();
                if(val==0){
                    jsSelectToggleOne.show();
                    jsSelectToggleTwo.hide();
                }
                if(val==1){
                    jsSelectToggleOne.hide();
                    jsSelectToggleTwo.show();
                }
            });
        }

$("li").index(".one");

$(".one").index();

$("li").get(2);//获取第几个

$('div').attr('{'data':'num','age':'18'})

$('div').attr('class',function(index,val){

console.log（index,val）

return 'list'

})

$(".wrap").data('age',18);//两个参数就是存储数据

$(".wrap").data('age');//一个参数就是取得数据

$(".wrap").removeData('age');//删除数据

$(".checkbox").prop("checked")//是否选中（判断复选和单选框最好用prop。因为是实时改变状态的）

$(".checkbox").prop("disabled",true)//给input设置属性

$(".checkbox").removeProp("checked")//删除属性（这里也可以使用attr）

$(".checkbox").prop("checked",function(index，val){//回调函数

console.log(index，val)；

return !val;
})
$("li").toggleClass(function(){

return active;
})

//动态渲染结构，循环列表并添加

function addList(){

var str = ' ';

for (var i = 0; i < 3; i++){

str += ‘<li></li>’

}

$(".wrap").html(str);

}

addList();

//jq设置单个和多个css

$("li").css("color","red")

$("li").css({"color":"red" , "border": "none"})

offset是相对于视窗大小偏移

$(".wrap").innerHeight()//当前css高度加上padding值

$(".wrap").height()//单纯css里面设置的高度

$(".wrap").outerHeight()//css高度加上padding值+border的值

$(".wrap").outerHeight(true)//css高度+padding+border的上下所有高度

$("input").inserBefore(".wrap")//把input插入到wrap的前面

在box外面包裹一层$(".box").wrap("<div class="wrapper"></div>");

删除box外面包裹的一层$(".box").unwrap('wrapper');

$("input").replaceWith("<div></div>")//把input替换为div，传一个参数

$("input").replaceWith($("ul"))//把ul拿过来匹配掉input

$("ul").replaceAll($("input"))//ul把input替换掉

remove（）//不会留下任何东西

detach（）//会把数据和绑定的事件留存下来

clone（）//复制

$("li").filter('.first, :last')//匹配两个

end()//end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。即回到最近的一个

add()//add() 方法将元素添加到匹配元素的集合中。

$("li")//是jq对象上去调用

//jq工具类的调用

$.merge()//合并作用

arr1=[1,2,3]

arr2=[2,3,4]

$.merage(arr1,arr2)

arr2合并到arr1里面，并且返回的是arr1(合并后的)

//$.parseHTML

可以把HTML字符串解析成相应的DOM节点，有三个参数
$.parseHTML（string,context,true/false）
$.parseHTML（"<h1></h1>",false）

返回一个数组，[div]

后面的true是判断是否可以嵌入script标签。

$.fn.extend//扩展插件

$.extend//合并对象，扩展插件

$.extend（true，最终合并到此的空对象{}，obj1，obj2）

true代表深度克隆

如果有相同的属性值就会覆盖，如果没有就会保留着

机制：把obj2合并到obj1返回，然后在obj1合并到空对象{ }中返回。

$.extend（true，obj1，obj2）//这种就是直接把obj2合并到obj1中返回了

window.onload与document.ready()的区别

1、执行时间不同ready是等DOM结构加载完就行，window需要加载完所有资源

2、执行次数，ready可以执行多次，window只能注册一个

绑定事件

$('ul').on('click' , 'li' , function(){//只能通过点击li来触发函数

console.log(this);

})

面向对象编程开发，保存全局this，以便其他地方调用

把this先保存到self中去，不然，self.change改为this.change()会报错

绑定以及移除点击事件

如果要移除所有，就$(".box").off();

trigger主动触发事件

例如隔了2秒后主动触发了点击事件

自定义触发事件

$("div").toggle( true )，显示状态

$("div").toggle( false)，隐藏状态

点击事件发生在down->up完成之后才完成点击事件

打印事件对象event
$(".box").on('mouseover' , function(e){
    console.log(e)
})

$(window).on('scroll' , function(e){
    console.log(e)
})

打印事件源对象e.target
$("body").on('click' , function(e){
    console.log(e.target)
})

animate

var width = parseInt($(".box").css('width'))
$('button').on('click',function(){
    width += 10;
    $(".box").animate({
        'width': width + 'px'
    },1000,'ease',function(){
        console.log(width)
    });
})

延时执行

$('body').append("<h1 class='delay'>delay</h1>");
$('.delay').delay(4000).fadeOut();

工具类方法

console.log($.type('.delay'))//打印出string

console.log($.type([1,2]))//打印出array

console.log($.trim("asasd asda "))//去掉字符串两边的空格，中间的去不掉
        //打印出asasd asda
console.log($.makeArray({0: 'a', 1: 'b', length: 2}))//类数组转换成数组
        //["a","b"]去掉了length
        
var arr = [1,2,3]
console.log($.inArray(2,arr))//判断是否在数组里面,如果在，就会显示当前数值在数组里面的位置索引，要是不在就会返回-1
        //返回1，位置1
        arr.indexOf(1)//功能与上面一样，判断当前值是否在数组里面
        //如果有返回索引值，如果不在就返回-1
        
$.noConflict()//把$权限交出
    var myJq = $.noConflict();//权限交给myJq
    $(".box")->变成myJq(".box")

$.extend(true,{},obj1,obj2)
先把obj1先合并到对象{}中,然后obj2合并到{},再obj1合并到{}
obj1和obj2都没改变,改变的是{},true代表的是否深度克隆

$.fn == $.prototype
$.extend()//是工具扩展,以后使用也是像工具一样使用.如$.add()
$.fn.extend()//是原型上扩展,以后使用是调用实例上的对象,扩展到自己原型链上去了,得拿对象里的方法,jq上没有的话就去原型链上去找.如:$("div").add()

$.extend扩展一个去掉左侧空字符的方法
$.extend({
    leftTrime: function(str){
        var reg = /^\s+/g;
        return str.replace(reg,'')
    }
})
$.leftTrime('  的点点滴滴多    ')

扩展插件方法：复选框选中

$.fn.extend({
    check: function(flag){
        return this.each(function(){
            this.checked = flag;
        })
    }
})
$('button').on('click',function(){
    $('input').check(true);
})

$.Callbacks(flag)//执行队列回调函数
方法:
$.Callbacks.add()//添加函数
$.Callbacks.fire()//触发函数
$.Callbacks.remove()//移除函数
flag:
once->:只触发一次fire
unique->:添加相同函数,只触发一次
memory->:继续触发fire之后add的函数
stopOnFalse->:停止添加函数返回值为false的后续函数

例如:
function fn1(str){
    console.log(str)
    return false;
}
function fn2(num){
    console.log(++num)
}
var callBack = $.Callbacks('memory')
callBack.add(fn2);
callBack.add(fn1);
callBack.remove(fn1);
callBack.fire('111111');
callBack.add(fn2);

延迟对象Defferd//相当于有状态的callBack

浏览网页，有些数据请求会存在几个状态
def.done 成功 ->对应的状态是def.notify()
def.fail 失败 ->def.reject()
def.progress 成功 ->def.resolve()
def.promise 只读的状态
$.when 在所有传入延迟对象的状态都为成功

不同状态对应的回调函数

function dfd(){
    var d = $.Deferred();
        d.notify()//模拟正在进行中的状态，打印出loading
        d.reject()//模拟失败的状态，打印出error失败
        d.resolve()//模拟成功的状态，打印出ok成功
        return d;
        //return d.progress();这里能把状态改为只读，本函数外面就拿不到状态了
}
//如果这里return d.progress();那么就拿不到状态值了
var der = dfd();
der.done(function(){
    console.log('ok成功')
}).fail(function(){
    console.log('error失败')
}).progress(function(){
    console.log('loading')
});

$.ajax()

异步传输数据
开启本地服务器,下载wampserver
$.ajax({
    type: 'post',//规定发送请求的方式，默认是get
    url: './data.json',//请求地址
    success: suc,
    data: '',//data就是你要传的参数或者数值或需要请求的数据。。。string/object 发送请求的数据
    context: ,//代表请求的上下文
    async: ,//true/flase 代表 是否异步
    cached: ,//true/flase 是否在浏览器缓存中缓存信息
    dataType: ,//返回的数据类型,一般是json
    crossDomain: ,//规定当前是否会跨域
    jsonp: ,//当如果跨域的情况下，就不用ajax的请求了，jsonp请求的话，规定他请求完之后回调的名字是什么，比如callack/cb/...
    jsonpCallback: ,//规定他请求完之后要执行的回调函数是什么
    error: function(){
        console.log("请求失败");
    }
})
function suc(data){
    console.log("请求成功");
}
怎么查看是否请求成功呢,看控制台的Network->XHR

jQuery源码-1

以jq为构造函数构造出来的实例，调用的时候要new一下

但是jq是无new方法，而且现在的this指向的是window

就不能以jQuery为构造函数了，那就以另一个函数为构造函数

所以怎么执行jQuery才能拿到对象呢？

以init为构造函数构造出的实例，怎么才能在jQuery里面返回呢？

那么就在jQuery函数中return 以init构造函数构造出的实例

既然jQuery自己不能是构造函数，但是它结果还是想拿构造函数出来的实例，显然return返回的以某个函数构造出来的实例

init函数主要是拿来为构造函数构造实例用的。jQuery里面很多都是基于原型上操作的

所以最后是

jq封闭到自己作用域下防止污染全局变量，不与其他类库冲突