jQuery方法浅谈

 1.jQuery对象转换成原生js
    添加索引或者使用jquery下面的get方法，用添加索引
    console.log($('.box').innerHTML); //undefined
    console.log($('.box')[0].innerHTML); //√
    console.log($('.box').get(0).innerHTML); //√

    2.原生转换成jquery - $()将原生对象包起来变成jquery对象
    console.log(document.querySelector('.box').html());//报错
    console.log($(document.querySelector('.box')).html()); //对

    3.页面加载完成
    window.onload = function() {}; //加载对个覆盖，加载速度慢(结构，样式，内容加载完成即可触发)。
    下面是jquery写法，有简写
    $(document).ready(function() {}); //加载多个，简写风格，加载速度快(结构加载完成即可触发)。
    可以简写$(function(){})

    4.识别方法参数
    $.get(url,[data],[fn],[type]) :中括号里面的参数是可选的。
    find(e|o|e) : 一个参数，链式操作的话，是找前面确定父级内的标签
    find:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
    $('body').find('#box a').find('strong')

    二.事件类的方法
    1.on(events,[selector],[data],fn)
    events:一个或多个用空格分隔的事件类型.
    selector:事件委托，委托的元素，不写就整体绑定
    data:传输数据
    fn:回调函数,事件处理函数
    在选择元素上绑定一个或多个事件的事件处理函数。(事件绑定，普通事件，事件委托)

    普通事件，就只有一个事件
    $('#box1').on('click', function() {
        alert(1);
    });

    事件绑定，可以多个事件一起绑定
    $('#box1').on('click mouseover', function() {
        alert(1);
    });

    事件委托，就是只会获取事件委元素的内容，如果不写委托元素，那就是获取整体的
    $('#box1').on('click', 'li', function() {
        console.log($(this)); //委托的元素
        console.log($(this).html()); //委托的元素内容
    });

    2.off(events,[selector],[fn])
    在选择元素上移除一个或多个事件的事件处理函数
    $('#box1').off('mouseover');

    3.one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函
    $('#box1').one('click', 'li', function() { //也可以事件委托，只是只触发一次
        console.log($(this)); //委托的元素
        console.log($(this).html()); //委托的元素内容
    });

    4.hover([over,]out):移入移出写在一个小括号内，相当于onmouseover和onkouseout事件，类似的还有click(),表示的是onclick事件
    一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

    $('#box1').hover(function() {
        $(this).hide();
    }, function() {
        $(this).show();
    });

    三.其他方法
    addClass():添加类
    removeClass():移除类

    这三个只能修改和读取已经存在的属性
    attr():读写自定义或者默认的html属性
    prop():读写属性，包括默认的html属性
    css():读写css的属性，参数可以是对象，写一个属性用小括号就行，逗号分开；写多个属性的话，用对象的写法，属性名和属性值最好都写引号

    $('#box1').prop("title", "123")

    $('.box').css('width', '100px').css('height', '100px').css('background', 'blue');
    $('.box').css({
        width: 200,
        height: 200,
        background: 'orange'
    });

    console.log($('.box').css('width'));
    $('.box').css('width', '1000px');

    console.log($('.box').attr('title'));
    console.log($('.box').prop('title'));

    $('.box').attr('title', '我是新的标题');
    $('.box').prop('title', '我是新的标题');

    四.索引
    index([selector|element])搜索匹配的元素，并返回相应元素的索引值，从0开始计数。不写括号内的内容就获取前面的索引位置
    eq(index|-index)获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。

    console.log($('#box1 li').eq(2).index());//2
    $('#box1 li').on('click', function() {
        alert($(this).index());
    });

    1.siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
    注意：添加参数。精确的指向兄弟元素，一般配合not()使用，not表示去除括号内的这个标签
    nextAll([expr]) 查找当前元素之后所有的同辈元素。

    1.animate(params,[speed],[easing],[fn])用于创建自定义动画的函数。
    params:一组包含作为动画属性和终值的样式属性和及其值的集合
    speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear匀速" 和 "swing缓冲".
    fn:在动画完成时执行的函数，每个元素执行一次。
    不能修改背景颜色，需要插件。

    $('.box').on('mouseover', function() {
        $(this).animate({
            width: 600,
            height: 600,
            backgroundColor: 'blue'
        })
    });

    $('.box').on('mouseout', function() {
        $(this).animate({
            width: 100,
            height: 100,
            backgroundColor: 'red'
        })
    });

    2.jquery运动采用队列形式存储的，只要触发一定要执行完成。
    stop([clearQueue],[jumpToEnd]) 停止所有在指定元素上正在运行的动画。
    clearQueue:如果设置成true，则清空队列。可以立即结束动画。
    jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

    $('.box').on('mouseover', function() {
        $(this).stop(true).animate({
            width: 600,
            height: 600,
            backgroundColor: 'blue'
        })
    });

    $('.box').stop(true).on('mouseout', function() {
        $(this).animate({
            width: 100,
            height: 100,
            backgroundColor: 'red'
        })
    });

    3.获取滚动条的top值。
    滚动条事件
    scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。

    4.获取元素的位置
    offset([coordinates])获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性： top 和 left， 以像素计。 此方法只对可见元素有效。
    $('.louti').eq(0).offset();   //{top: 1000, left: 259.6000061035156

    5.显示隐藏，也就是可以改变display：block和none的值
    show([speed,[easing],[fn]])显示隐藏的匹配元素。
    hide([speed,[easing],[fn]])隐藏显示的元素

jquery尺寸：
width():盒子的宽度
innerWidth():盒子的宽度+padding
outerWidth():盒子的宽度+padding+border
outerWidth(true):盒子的宽度+padding+border+margin

height():盒子的高度
innerHeight():盒子的高度+padding
outerHeight():盒子的高度+padding+border
outerHeight(true):盒子的高度+padding+border+margin

使用方法集合
    1.append(content|fn)向每个匹配的元素内部追加内容。
    2.prepend(content|fn)向每个匹配的元素内部前面添加内容。
    3.:selected 匹配所有选中的option元素
     :checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
      $('input:checked').not('.allselect').size()
     $(this).find('option:selected').val(); 
    4.nextAll([expr]) 查找当前元素之后所有的同辈元素。
    5.first()获取第一个元素
     $('li').first()获取li标签内的第一个元素
    6.:first 获取匹配的第一个元素
     $('li:first');获取li标签内的第一个元素
    7.remove([expr]) 从DOM中删除所有匹配的元素。
    8.$.inArray(value,array,[fromIndex])确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。
    9.val([val|fn|arr]) 获得匹配元素的当前值。不写括号的内容就获取前面标签的
    10.not(expr|ele|fn) 删除与指定表达式匹配的元素,排除
     $('input').not('.allselect');//选中所有的input，排除含有.allselect类
    11.size() length jQuery 对象中元素的个数。


    两个遍历
    1. $.each(arr,function(index,value){})
    value:数组的值或者对象的值
    index:数组的索引或者对象的属性名称
    $.each(arr, function(index, value) { 
        console.log(index, value);
    });
      $.each(obj, function(index, value) { 
        console.log(index, value);
    });
    
    2. each(callback)以每一个匹配的元素作为上下文来执行一个函数。
    每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。
    返回 'false' 将停止循环.用return false可以达到break的效果
    $('li').each(function(index, element) {
    index:索引
    element:原生元素对象
    console.log(index, $(element)); 
    });
    $.each(object, [callback]) 通用例遍方法，可用于例遍对象和数组。
    let arr = [1, 2, 3, 4];
    let obj = {
        a: 1,
        b: 2,
        c: 3
    }


    添加图片懒加载
    1.设置类名lazy
    2.图片路径绑定在  data-original=""
    3.设置图片宽高。不需要写px，直接写数值
    4.渲染图片
    5.{effect: "fadeIn"}:淡入效果
    $(function() { //渲染完成后进行触发 ，相当于window.onload 
        $("img.lazy").lazyload({
            effect: "fadeIn"
        }); //绑定是固定写法，还可以通过事件来触发懒加载
    });


    ajax插件的使用
    基本和js里一样，就是多写一个dataType，这样就不需要写json.parse，这里的类型有很多；还有就是then改为done，catch改为fail
    $.ajax({
        type: 'get',
        url: '',
        data: {},
        dataType: 'json' //设置返回的数据类型是json
    }).done(function(){data})

    cookie插件的使用
    存储cookie
    $.cookie('xingming', 'zhangsan123456', {
        expires: 7,
        path: '/'
    });
    读取cookie
    $.cookie('xingming');
    删除cookie
    $.cookie('the_cookie', null, {
        expires: -1,
        path: '/'
    });

以上方法仅仅是方法的沧海一粟，仅供参考