jQuery学习----简单介绍，基本使用，操作样式，动画

jQuery简单介绍

　　jq是js的插件库，说白了，jq就是一个js文件

　　凡事能用jq实现的，js都能实现。但是js能实现的，jq不一定能够实现

jq的引入

　　http://www.bootcdn.cn 引入jq//https://www.bootcdn.cn/jquery/

　　http://jquery.cuishifeng.cn 中文

　　http://api.jquery.com 官网

　　CDN引入:

　　本地保存（路径）

　　alert能够成功弹出表示jq引入成功

<body>
    <div id="box">999</div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
    <script src="jquery.js"></script>
    <script>
        /*
        http://www.bootcdn.cn  引入jq
        http://jquery.cuishifeng.cn  中文
        http://api.jquery.com 官网

        jQuery
        是什么：
            jQuery是一种新的JavaScript库。
        jq是用js写 能用jq实现的 用js都能实现
        js能实现的 jq有些不能实现

        jQuery $
        传字符串/选择器/尖括号标签的形式/函数/object
        jq的API只对自己开放 jq不能用js的API js也不能用jq的API
         */
        /*$(function () {
            alert(1);
        });*/

       // var oBox = docment.getElementById("box");

       //  var oBox = document.querySelector("#box");
       //  oBox.innerHTML = "666";

        var $box = $("#box");
        // $box.innerHTML = "888";
        $box.html("<b>888</b>");

        var $p = $("p");
        console.log($p.length);

        $p.html("<b>88</b>");

    </script>
</body>

jq的选择器

jq的基本使用

jq的遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
             150px;
            height: 50px;
            background: yellowgreen;
            margin: 5px;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        $("ul li").each(function (i) {//第一个参数默认是序号/小标
            //this.innerHTML = "我是第"+i+"个";
            $(this).html("我是第"+i+"个");
        })
    </script>
</body>
</html>

append prepend

<body>
    <div id="box">
        <p>我是本来就在的</p>
    </div>
    <b>我是在外面的</b>
    <script src="jquery.js"></script>
    <script>
        /*
       添加子元素 可以是标签、文本、js对象、jq对象
         append
         prepend

         appendTo
         prependTo
        */
        // $("#box").append("<em>我是新增的append</em>");
        // $("#box").prepend("<em>我是新增的prepend1</em>");
        // $("#box").append($("b")[0]);

        $("<em>我是新增的</em>").appendTo($("#box"));
    </script>
</body>

before after

<body>
    <div id="box">666</div>
    <script src="jquery.js"></script>
    <script>
        /*
           添加兄弟元素
           after
           before

           insertAfter
           insertBefore
        */
        $("#box").after("<b>我是after</b>");
        $("#box").before("<b>我是before</b>");
    </script>
</body>

empty

<body>
    <div id="box">
        <ul>
            <li>1</li>
            <li class="show">2</li>
            <li>3</li>
        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
            /*
           empty 清空子节点
           remove 移除自己
            */
            // $("#box").empty();
            // $("#box").remove();
            $("#box ul li").remove(".show");
    </script>
</body>

jq操作属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="box" class="wrap">
        <p class="show">show</p>
        <p>kong</p>
        <p class="on">on</p>
    </div>
    <script src="jquery.js"></script>
    <script>
        /*
            attr 设置/获取 标签属性
            prop 设置/获取 标签属性  废除

            removeAttr()  移除标签属性
            removeProp()   废除

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

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

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

        var $box = $("#box");
        //alert($box.attr("class")); //读操作
        //$box.attr("class","xiaopo")//写操作
        // $box.removeAttr("class");
        // $box.attr("tz","xiaopo");
        // $box.attr("class","py")

        $box.addClass("qq ww");
        $box.removeClass("ww");
        $box.removeClass();
        $("#box p").toggleClass("on");

        // $("#box p").html("999");
        alert($("#box p").html());
    </script>
</body>
</html>

jq和js的相互转换

<body>
    <div id="box">666</div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <script src="jquery.js"></script>
    <script>
        var oBox = document.querySelector("#box");


        //js ===> jq
        $(oBox).html("999");
        // $(oBox).innerHTML = "333";

        //jq === > js  jq[]/get()
        var $p = $("p");
        $p[1].innerHTML = "999";
        $p.get(2).innerHTML = "888";

        //jq ===> 特定jq   eq()
        $p.eq(3).html("555");

    </script>
</body>

筛选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

    <div id="box" class="show">
        <p>1</p>
        <p class="box">box1</p>
        <div class="wrap">
            <p>3</p>
            <p class="box">box2</p>
        </div>
    </div>

    <script src="jquery.js"></script>
    <script>
        /*
       eq  把jq转换成特定的jq
       hasClass 检查当前的元素是否含有某个特定的类，如果有，则返回true。否则返回false
       children 找儿子 可以不传参数
       find  不传参，默认不找  传参的话就找符合参数的后代
       parent 不需要参数
       parents(".show")找到名字叫做show的祖先
       siblings 不传参 所有兄弟 传参 所有兄弟按照参数筛选出合格的
        */

        //alert($("#box").hasClass("show1"));//false
        //alert($("#box").hasClass("show"));//true

        //console.log($("#box").children());
        //console.log($("#box").find("p"));

        // console.log($(".box").parents());
        //console.log($(".box").parents(".show"));
        // console.log($(".box").parent());

        $("p").siblings(".box").css("color","red");
        // $("p").siblings().css("color","red");
    </script>
</body>
</html>

操作样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
             100px;
            height: 100px;
            background: yellowgreen;
            padding: 50px;
            border: 10px solid red;
            margin: auto;
            position: relative;
        }
        #wrap{
             50px;
            height: 50px;
            background: yellow;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="wrap"></div>
    </div>
    <script src="jquery.js"></script>
    <script>
        /*
           .css()
           .width()
           .height()

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

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

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

        var $box = $("#box");
        //alert($box.width());//100
        //alert($box.innerWidth());//200
        //alert($box.outerWidth());//220

        //oBox.style.width = "200px";
        // $box.css("height","200px");

        /*$box.css({
            "width": "200px",
            "height": "200px",
            "background": "blue"
        });*/

        // alert($box.offset().left);
        alert($("#wrap").position().left)
    </script>
</body>
</html>

jq事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul{
             200px;
            background: #aaaaaa;
        }
        li{
            list-style: none;
             50px;
            height: 50px;
            background: skyblue;
            margin: 10px;
        }
    </style>
</head>
<body>
    <ul id="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        /*
        jquery里面的事件
                都是函数形式的，去掉on的那种
                原理上事件都是事件绑定的形式而不是赋值的形式
        jquery事件绑定、解绑
                所有事件的添加都是绑定的形式
                可以通过on来添加事件
         */
        //var oUl = document.getElementById("box");
        /*oUl.onclick = function () {
            alert(1);
        };
        oUl.onclick = function () {
            alert(2);
        }*/

        /*$("#box").click(function () {
            alert(1);
        });
        $("#box").click(function () {
            alert(2);
        })*/

        //on绑定单个事件
        /*$("#box li").on("click",function () {
            alert($(this).index());//index()在jq里面是方法 对应的是你的下标
        })*/


        //on绑定多个事件
        /*$("#box").on({
            "click": function () {
                console.log("click");
            },
            "mouseenter": function () {
                console.log("mouseenter");
            },
            "mouseleave": function () {
                console.log("mouseleave");
            }
        });*/

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

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

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

    </script>
</body>
</html>

scroll

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body style="height: 1500px; 1000px">
    <script src="jquery.js"></script>
    <script>
        /*$(document).click(function () {
            console.log("滚动高度"+$(this).scrollTop());
            console.log("滚动宽度"+$(this).scrollLeft());
        });*/

        $(document).click(function () {
            $(this).scrollTop(750);
            $(this).scrollLeft(500);
        })
    </script>
</body>
</html>

动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
             200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="jquery.js"></script>
    <script>
        /*
       不传参 瞬间显示隐藏 传一个数字参数，代表毫秒，改变宽、高、透明度
       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(2000);
            // $box.fadeTo(1000,0.2);
            //$box.slideToggle(1000);
        });

        var off = true;
        $(document).click(function () {
            if(off){
                // $box.hide(1000);
                // $box.fadeOut(1000);
                $box.slideUp(1000);
            }else{
                // $box.show(1000);
                // $box.fadeIn(1000);
                $box.slideDown(1000);
            }
            off = !off;
        })
    </script>
</body>
</html>

animate（只动一次）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
             100px;
            height: 100px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="jquery.js"></script>
    <script>
        /*
 animate
   传参：
       * obj  必传  { }格式代表的变化的属性和目标值  数值变化
       * number/string 可缺省 代表毫秒数 或者 三个预设好的值 默认300
       * string 可缺省，代表运动曲线，默认jQuery提供"linear" 和 "swing"
       * function 可缺省，代表动画结束后的回调函数
*/
        $("#box").animate({
            "width": "200px",
            "height": "200px",
            "marginLeft": "100px"
        },1000)
    </script>
</body>
</html>

stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            padding: 10px 30px;
            background: pink;
            float: left;
            margin: 5px;
        }
    </style>
</head>
<body>
    <ul id="box">
        <li>xiaopo</li>
        <li>shiwei</li>
        <li>wuming</li>
        <li>budong</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
         /*
      stop
            清空动画队列，可以接受两个布尔值参数
            第一个不用管
            第二个决定是否瞬间到达队列终点，true 到   false(默认) 不到
     */
        $("#box li").hover(function () {
            $(this).stop(true,true).animate({"height":"300px"});
        },function () {
            $(this).stop(true,true).animate({"height":"21px"});
        })
    </script>
</body>
</html>

delay

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
             100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="jquery.js"></script>
    <script>
        /*
       delay 只对动画有用
        */
        $(document).click(function () {
            // $("#box").delay(2000).fadeOut(1000);
            // $("#box").delay(2000).css("background","red");
        });

        $("#box").delay(2000).queue(function () {
            $(this).css("background","red");

        })
    </script>
</body>
</html>