前端笔记之jquery

javascipt库:即library,一个封装好的特定的集合(方法和函数)
    常见的库:jQuery/Prototype/YUI/Dojo/Ext JS/移动端的zepto
    jquery里面用双引号
<script>
    
    //jQuery封装了JavaScript常见功能：DOM操作，事件处理，动画设计，Ajax交互
    写法：
    $(function(){
        $('');
    })

    $是jQuery的顶级对象,
    ~用原生js获取的对象为DOM对象,只能用js属性和方法
    ~:用jQuery获取的对象为jQuery对象(伪数组形式存储)$('');只能用jquery的方法

    jQuery对象和DOM对象相互转换:
    1.$(DOM对象)
    2.$('div')[index]//index索引号
      $('div').get(index)
    
    jquery常用API
    1.选择器:$("")
    ID、全选、类、标签、并集("div,li,ul")、交集("li.current")、子代("ul>li")、后代("ul li")
    2.筛选选择器:$("li:first")$("li:last")
    所有li中引号为2的li：$("li:eq(2)")
    奇数：$("li:odd")、偶数：$("li:even")
    3.筛选方法：
    父亲：.parent();√ 
    所有父级:.parents(".one");
    亲儿子：.children("li");√
    后代选择器：.find("li");√
    兄弟节点不包括自己：.siblings("li");√
    当前元素之后所有.nextAll();
    当前元素之前所有.prevAll();
    检查是否含有某个类,返回true
    .hasClass("protected");
    相当于索引号查找.eq(2);√

    jQuery修改样式:
    1.(隐式迭代:所有元素内部进行遍历循环,给每一个元素添加css,可替代for循环)
    $("div").css("background","pink");

    2.css.("weight",300)//数字可不加单位和引号
    修改多个属性：以对象形式修改
      $("div").css({
          weight:400,
          backgroundColor:"red"
      })

    3.$(this)jQuery当前的元素,显示元素:show();
    $(function(){
        $(".nav>li").mouseleave(function(){
            $(this).children("li").hide();
        })
    })

    4.排他思想:tab导航栏切换等
    利用其余兄弟节点方法

    5.获取索引号：
    var index = $(this).index();
    $("#content div").eq(index).show();

    6.链式编程
 $(this).css('color','red').siblings().css（）

    7.操作样式，应用于切换内容较多，
    添加类://相当于追加类名
    $(this).addClass("current");
    删除类:
    $(this).removeClass("current");
    切换类
    $(this).toggleClass("current");

    8.动画效果:[speed,easing,fn()]
    .show("speed",function(){});
.hide();
.toggle();
    //一般情况下不加参数
    .slideDown("speed",function(){});.slideUp();.slideToggle();
    //slideDown(500);
    .fadeIn("speed",function(){});.fadeDown();.fadeToggle();
    修改透明度:.fadeTo(speed,pacity,easing,fn());
    //要写时间和透明度(1000,0.5);
    .animate(params,speed,easing,fn());
    //params是样式属性，以对象的形式传递
    .animate({
        width:300,
        height:200,
        pacity:0.5
    })

    9.事件切换:hover([over,]out)
    $(".nav>li").hover(function(){},function(){});
    //鼠标经过和离开
    $(".nav>li").hover(function(){
         $(this).children("ul").slideToggle();
    })
    //鼠标经过和离开都会触发这个函数

    10.动画队列:防止连续触发出现bug
    //stop必须写到动画/效果前面
    $(this).children("ul").stop().slideToggle();

    11.change();//
    设置或获取元素的固有属性：prop("")
    修改元素的固有属性：prop("table","我们都挺好")
    设置或获取元素的自定义属性：attr("")
    修改元素的自定义属性：attr("table","我们都挺好")
    数据缓存:data("uname","andy")//放在内存里面
    获取:.data("uname")//获取h5自定义属性时，不用写data-开头，且返回的是数字型

    12.:checked选择器，可查找被选中的表单元素
    $("input:checked").length//输出数字

    13.文本内容
    获取设置元素内容：.html();
    获取设置元素内容：.text();//忽略标签
    获取设置表单值：val();//相当于value
    
    函数function中遇到return后面代码就不执行了。
    去掉单位，截取字符串用.substr(1);//从第一个开始截取
    保留小数：.toFixed(2);//2位小数

14.jquery遍历对象
 1.each方法//
        $("div").each(function (index, domEle) {
            parseInt($(domEle).text());
        })//domEle是DOM对象，即需要转换$(domEle);
        2.$.each($("div"),function (i, ele){})//处理数据
        如数组:$.each(arr,function (i, ele){})

15.添加元素：
 内部添加:$("ul").append("li");//ul内部最后面
                 $("ul").prepend("li");//ul内部最前面

外部添加:$(".text").after("div");
                 $(".text").before("div");
删除元素:$("ul").remove();//自杀
                $("ul").empty("li");//删除全部子节点
                $("ul").html("");

 16.返回数字型，可修改
jQuery尺寸方法:width();height();//本身宽高
innerWidth();包含padding
outerWidth();包含padding、border
outerWidth(true);包含padding、border、margin

   17.返回对象
offset()/offset().top/offset({top:200});//设置元素距离文档的偏移，
postion();//距离带有定位的父亲的位置scrollTop();scrollLeft();//被卷去的位置，应用页面被滚动

 18.节流阀:var flag = true;//适应于相同的元素有多个操作，防止程序混乱

  19. jQuery单个事件注册：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll
        
 事件处理,委托,解绑：
1.element.on(events,[selector],fn);
//events,对象类型,多个事件注册 
 .element.on({
         mouseenter: function(){},
              click:function(){},
              mouseleave:function(){}
        },function(){})
        .element.on("mouseenter mouseleave",function(){})
        2.把原来加在子元素上的事件绑定在父元素身上，
        $("ul").on("click","li",function(){});
        3.解绑：
        $("p").off();//解绑p元素所有事件处理程序
        $("p").off("click");//解绑p的点击事件
        $("p").off("click","li");//解绑事件委托

        click等事件不能给动态创建的元素添加事件，只有on可以
        .one("click",function(){});只能触发事件一次

        自动触发事件trigger();
        1.element.click();
        2.element.trigger("事件");
        3.element.triggerHandler("事件");//不会触发元素的默认行为

        事件对象的产生：
        阻止默认行为：event.preventDefault();/return false;
        阻止冒泡：event.stopPropagation();

  jQuery拷贝对象：
        $.extend([deep],target,object1,[objectN])
        //[deep]为true深拷贝，不影响被拷贝对象，false浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改对象会影响被拷贝对象，
        // target要拷贝的对象，object1待拷贝到第一个对象的对象

        jquery多库共存：
        1.用jquery代替$
        2.var suibian = jQuery.noConfilct();
        suibian.each();

---

        1.瀑布流演示：jquery插件
        2.图片懒加载：插件库EasyLazyload必须写在DOM元素最后面
        3.全屏滚动：
        4.bootstrap JS插件：在最上面加
        <div class="container"></div>
        5.存储数据的格式：var todolist = [{title: '', done:flase}]
        //只存储字符串形式，把数组转换为字符串形式为JSON.stringify()
        //获取本地存储的字符串，要转换为对象格式JSON.parse();