JQuery——JQ（简单介绍；js与jq的运用区别；JQ与JS之间的转换；获取下标（each）；JQ操作属性；JQ操作样式；事件；动画；annimate；stop；）

什么是JQ

          JQ是JS写的插件库，说白了，就是一个js文件；jQuery是一种新的JavaScript库。

JS和JQ是区别

           凡是用jq能实现的，js都能实现，js能实现的，jq却不一定能实现

        http：www.bootcdn.cn  引入jq
        http：jquery.cuishifeng.cn  中文
        http：api.jquery.com 官网

        jQuery  $
        传字符串 / 选择器 / 尖括号 / 标签的形式 / 函数 / object
        jq的API只对自己开放 jq不能用js的API js也不能用jq的API

 

先引入JQ：

  本地文件引入：

CDN引入：

                  如果alert 可以成功弹出 表示成功引入了 jQuery

 

js与jq的运用区别：

$(function () {
        alert(1);
    });         jq一般：   $(传字符串 / 选择器 / 尖括号 / 标签的形式 / 函数 / object)

  var oBox = document.querySelector("#box");     js对象
  oBox.innerHTML = "9999";

   var $box = $("#box");               jq对象
   $box.innerHTML = "666";          行不通
   $box.html("<h1>6666</h1>");    

   $(oBox).html("5555");

    var $div = $("div");
   $div.html("8888888");

    var $li = $("ul li");
    alert($li.length);
    $li.html("888");

主要方法：

               jq      js
            html()  innerHTML
            text()  innerText
            val()   value

JQ与JS之间的转换：

   例：

   var oBox = document.getElementById("box");

        js====>jq  直接用JQ的方法就行： $();
        $(oBox).html("999");

        //jq====>js 直接加下标或者是用get方法  : jq[]/jq.get()
        //var $li = $("li");
        // $li.html("888");
        //$li[1].innerHTML = "99999";
        //$li.get(2).innerHTML = "33333";

        //jq====>特定Jq (就是你想改变的哪一个) jq.eq()       这个jq是jq的名字  如下例：
        var $li = $("li");
        $li.eq(1).html("22222222");

 

获取下标（each）：

   方法一：     $("ul li").each(function (i) {//第一个参数默认是序号/小标
                            // this.innerHTML = "我是第"+i+"个";
                            $(this).html("我是第"+i+"个");
                       })

            这里是  ul  下的 li   i形参 代表的是下标

  方法二：

                        index

 

JQ操作属性

            attr 设置/获取 标签属性   （读操作；如：$box.attr.("id")）(写操作；如：$box.attr.("class","show")加一个class名为show)
            prop 设置/获取 标签属性  废除

            removeAttr()  移除标签属性    （例：$box.removeAttr("class")  移除class名）
            removeProp()   废除

            addClass  加class名字
            removeClass
                传class 移除你传的那个
                没有  移除全部
            toggleClass 有就删没有则加
            操作class类名

               jq      js
            html()  innerHTML
            text()  innerText
            val()   value

例：$("p").eq(0).addClass("wrap qq");      添加class名  添加两个
       $("p").eq(0).removeClass();                移除class名 移除规则 如上
       $("p").eq(0).removeClass("wrap")       添加class名 一个   多个 之间用空格隔开

                                         $("p").eq(0)  意思是获取p标签 下标为0的那个p标签

           

            在jq里面，设置某个值的时候，一般自带遍历
                      获取某个值的时候，一般获取第一个

JQ操作样式：

               .css()
               .width()
               .height()

               innerWidth() / innerHeight 算了padding
               outerWidth() / outerHeight 算了 padding+border

                offset()
                  该对象有top /left 属性
                  代表到浏览器窗口的 top/left的值

                position()
                  该对象有top /left 属性
                  代表到定位父级的 top/left的值

例：

     oBox.style.width = "300px";   JS 修改样式的方法
    $("#box").cssText = "width: 200px;height: 300px";   JQ修改样式
    $("#box").css("width","300px");                 JQ修改样式

    $("#box").css({
        "width": "300px",
        "height": "500px",
        "background": "pink"
    })           修个多个样式的情况下  采用这种模式

    //alert($("#box").offset().left);    弹出这个#box 模块  距浏览框左边的距离
    //alert($("#box").offset().top);

    alert($("#wrap").position().left);  效果雷同上
    alert($("#wrap").position().top);

事件：

        jquery里面的事件
                都是函数形式的，去掉on的那种
                原理上事件都是事件绑定的形式而不是赋值的形式
        jquery事件绑定、解绑
                所有事件的添加都是绑定的形式
                可以通过on来添加事件

  例;

 //var oUl = document.getElementById("box");
    /*oUl.onclick = function () {
        alert(1);
    };
    oUl.onclick = function () {
        alert(2);
    }*/                 在js中只能弹出2，覆盖第一个

    /*$("#box").click(function () {
        alert(1);
    });
    $("#box").click(function () {
        alert(2);
    });*/              在jq中先弹1，在弹2

 

 on绑定单个事件
    /*$("#box li").on("click",function () {
        alert($(this).index());/       /index()在jq里面是方法 对应的是你的下标
    });*/
  on绑定多个事件
    /*$("#box").on({
        "click": function () {
            console.log("click");
        },            点击事件   
        "mouseenter": function () {
            console.log("onmouseenter");
        },                鼠标移入
        "mouseleave": function () {
             console.log("mouseleave");
        }                 鼠标移出
    });*/

    // $("#box").off("mouseenter");//移除满足条件的事件
    // $("#box").off();//移除事件

    /*$("#box").hover(function () {
         //一个函数，移入移出执行同一个函数
        console.log(2);
    });*/

   $("#box").hover(function () {
        console.log("鼠标移入");//移入函数
    },function () {
        console.log("鼠标移出");//移出函数
    })

动画：

     不传参 瞬间显示隐藏 传一个数字参数，代表毫秒，改变宽、高、透明度
       show
       hide
       toggle

     默认时间300毫秒 改变透明度
       fadeIn
       fadeOut
       fadeTo(1000,0.1) 可以把透明度设置一个值，时间参数不能省略

     默认时间300毫秒  改变高度
       slideDown
       slideUp
       slideToggle 改变高度

     这三组，不仅仅可以接受一个数字参数，能接受的参数有：
       * number / string  代表动画时间（可缺省）   毫秒数 / （"fast" "normal" "slow"）
       * string   代表运动曲线（可缺省）
       * function   代表回调函数（可缺省）
   
    var $box = $("#box");
    $(document).click(function () {
        // $box.toggle(1000);     点击消失，再点击会恢复
        // $box.fadeTo(1000,0.3);   点击改变透明度，再点击不会恢复
        // $box.slideToggle(1000);  点击改变高度，点击恢复
    });        通过整体改变，改变透明度，改变高度，实现动画的效果

 

  var off = true;
    $(document).click(function () {
        if(off){
            // $box.hide(1000);
            // $box.fadeOut(2000);
            $box.slideUp(2000);
        }else{
            // $box.show(1000);
            // $box.fadeIn(2000);
            $box.slideDown(2000);
        }
        off = !off;
    })                      实现的效果如同上边

 

annimate：

   传参：
       * obj  必传  { }格式代表的变化的属性和目标值  数值变化
       * number/string 可缺省 代表毫秒数 或者 三个预设好的值 默认300
       * string 可缺省，代表运动曲线，默认jQuery提供"linear" 和 "swing"
       * function 可缺省，代表动画结束后的回调函数

 var $box = $("#box");
        $box.animate({
            "width": "400px",
            "height": "500px"
        },5000);            在5秒 慢慢 跳出来一个高500 宽400的图形

 

stop          

 stop
            清空动画队列，可以接受两个布尔值参数
            第一个不用管
            第二个决定是否瞬间到达队列终点，true 到   false(默认) 不到
     */
 $("#box li").hover(function () {
     $(this).stop(true,false).animate({"height": "300px"})  其中$(this).animate({"height": "300px"}) 实现鼠标放上去高会整长到400
  },function () {
        $(this).stop(true,false).animate({"height": "28px"})   stop(true,false)  鼠标拿开后立马恢复原来状态
    })

delay：延迟

     delay 只对动画有用

例：

 $(document).click(function () {
        // $("#box").delay(2000).fadeOut(1000);
        //$("#box").delay(2000).css("background","red");
        //$("#box").delay(2000).css("width","300px");
    });

    $("#box").delay(2000).queue(function () {          静态的  采用 队列 queue方法才能实现延迟
        $("#box").delay(2000).css("background","red");
    })