本文转载自https://blog.csdn.net/xiaogeldx/article/details/85467270

JQ简单介绍

• JQ是JS写的插件库，就是一个js文件
• 凡是用jq能实现的，js都能实现，js能实现的，jq不一定能实现
• JQ理念
  • write less，do more

• 在JQ中使用选择器选择元素和在css中使用CSS选择器是一样的,如下：

    <p id="p1">111</p>
    <p id="p2">hahaha</p>
    <script src="../js/jquery-3.3.1.js"></script>   #下面的也一样
    #<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    #在https://www.bootcdn.cn/jquery/里https://cdn.bootcss.com/jquery/3.3.1/jquery.js复制到本地或者直接引用
    <script type="text/javascript">
        $("p").click(function () {  //必须引用jquery文件才能用$，$表示jquery
        //$('#p1').click(function(){        //选择器方法同css
            alert("qwe");
        });
        //$('.p1').on('click',function() {  //绑定事件，效果同上，用与动态的网页效果更好
            //alert('qwe');
        //});
    </script>

  JQ基本使用

  JQ基本使用1

  修改内容

• html（）相当于JavaScript的innerHTML

• text（）相当于JavaScript的innerText

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
       // $("ul li").html(111);     //text()亦可
        $("ul li").eq(0).html(111);     //111       (0)是索引，不加索引表示选择全部
                                           2
                                           3
                                           4    
    </script>

  

  转换

• get()/[]：jq对象使用js方法

    var p1 = document.getElementById('p1');
    $(p1).html('hahaha');

• $()：js对象使用jq方法

    $('.p2')[0].innerText = 'hengheng'; //两种方法效果一样，索引表示第几个
    $('#p1').get(0).innerText = 'hengheng';

  点击

• click()

   $("#btn").click(function () {
       alert("qew");
   })

  鼠标

• hover()

        //当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
    　$("#p1").hover(function () {
          console.log("移入")
      },function () {
          console.log("移出")
      })

  追加

• append()

    $("#p1").append("我是被追加进来的") //加到后面

  添加

• prepend()

    $("#p1").prepend("我是被添加进来的“)    //添加到前面

  前后

• before()

• after()

    $("#p1").before("我是他哥哥");   //加到上一行
    $("#p1").after("我是他兄弟");    //加到下一行

  

  移除

• empty() 清空

• remove() 移除

    $("div").empty()    // 清空里面的内容，保留自己属性

  

    $("div").remove()    // 移除自己和下面子集的所有

  

  JQ的基本使用２

  操作属性

• attr()

• removeAttr()

    alert($("#p1").attr("id"));     //返回属性值
    $("#p1").attr("a","b")  //添加/修改属性，无则增，有则改
        $("#p1").attr({
        "a":"b",    //注意符号
        "class":"d"
        });
    $(".d").removeAttr("a");    //移除

  添加/移除class

• addClass()

• removeClass()

    $("#div1").addClass("div3");     //写多个也可以加多个
    $("#div1").addClass("div4");     //写多个也可以加多个
    $("#div1").removeClass("div3")  //移除
    $(".div3").removeClass("div3")  //同上

  判断

• hasClass() 看是否存在该css

    <div id="div1" class="div12">
    alert($(".div12").hasClass("div12"));   //hasClass中添属性值
     alert($("#div1").hasClass("div12"));   //返回结果都是true

  索引

• each() each() 方法为每个匹配元素规定要运行的函数

• index() 索引 相当于jq的indexOf()

    $("ul li").each(function (i) {
        $(this).html("我是第"+i+"个")   //this表示当前标签
    })
    alert($("#li2").index());   //2，查索引

  滚动条事件

• scroll()
• scrollTop()

• scrollLeft()

        $(window).scroll(function () {
            console.log($(document).scroll());
            console.log($(document).scrollLeft());  //左右
            console.log($(document).scrollTop());       //上下
          })

  JQ基本使用３

  父子元素

• parent

• children()

  兄弟

• siblings

  后代

• find

  祖宗(父级之上)

• parents

    <div id="div1">
    <input type="button">
    <div><ul class="abc">
        <li id="li1"></li>
        <li id="li2"></li>
        <li></li>
    </ul>
    </div>
    <ul></ul>
    <p><span>222</span></p>
    <p></p>
    </div>
    <script src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // 父级
        console.log($(".abc").parent());
        // 子级
        console.log($("#div1").children());
        // 兄弟
        console.log($("#li1").siblings());
        // 后代 find需要传参
        console.log($("#div1").find("li"))
        // 祖宗 parents逐层向外查，可以加参
        console.log($("li").parents())
        console.log($("li").parents("div"))

• 结果：
  

  定位父级

• position()

  窗口

• offset()

  宽高

• width()/height()

  循环添加

• on

  移除

• off

  JQ操作样式

• $选中元素.css({css样式，以json形式})

    $('.div1').css({
        'width':'400px',
        'background':'yellow',
        'color':'red',
        'font-size':29
    })

  

JQ动画

常用的特殊符号

• hide():隐藏
• show():显示
• slideUp:向上
• slideDown:向下
• slideToggle:取反
• fadeIn:淡入
• fadeOut:淡出
• fadeTo:自定义
• fadeToggle;取反
• animate;动画
• stop:停止

• delay:延迟

        $('#btn1').click(function(){
            $('div').hide();    //hide()中可加参数，参数表示执行多久
        });
        $('#btn2').click(function () {
            $('div').show(2000);    //show()中可不加参数
        });
        $('#btn1').click(function () {
            $('div').slideUp(); //slideUp()中可加参数
            $('div').slideToggle(); //可加参数,加此条代码拉上后自动下来
        });
        $('#btn2').click(function () {
            $('div').slideDown(1000);   //slideDown()中可不加参数
            $('div').slideToggle(); //可加参数，加此条代码拉下后自动上去
        });
        $('#btn3').click(function () {
            $('div').slideToggle(); //可加参数，点一下拉下，再点拉上
        });
        $('#btn1').click(function () {
            $('div').fadeOut(2000);     //淡出
            $('div').fadeToggle();  //取反,淡出后自动淡入
        });
        $('#btn2').click(function () {
            $('div').fadeIn(1000);  //淡入
            $('div').fadeOut(); //取反,淡入后自动淡出
        });
        $('#btn3').click(function () {
            $('div').fadeToggle(1000);  //可加参数，点一下淡出，再点淡入
        });
        $('#btn1').click(function () {
            $('div').animate({
                width:'600px',
                height:'600px',
            },2000)
        });
        $('#btn2').click(function () {
            $('div').stop();    //暂停动画
        });
        $('#btn3').click(function () {
            $('div').delay(2000).fadeOut(2000); //delay延迟,这里延迟两秒再淡出
        });

  练习

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <link rel="stylesheet" href="css/reset.css">
        <style type="text/css">
            /*li {*/
                /*list-style: none;*/
            /*}*/
            #center {
                width: 800px;
                height: 180px;
                position: relative;
                border: 1px solid red;
                line-height: 180px;
                background: url('image/zql1.jpeg');
                background-size: 100% 100%;
            }
            #center .ul1 li span {
                font-size: 80px;
                color: white;
                position: absolute;
            }
            #center .ul2 {
                position: absolute;
                /*text-align: center;*/
                left: 325px;
                bottom: 15px;
            }
            #center .ul2 li {
                width: 20px;
                height: 20px;
                border: 1px solid aqua;
                background: greenyellow;
                border-radius: 50%;
                float: left;
                margin: 8px;
                //不透明度
                opacity: 0.7;
                /*position: absolute;*/
              }
            #center .ul2 .li1:hover {
                border:1px solid yellow;
                background: yellow;
            }
        </style>
    </head>
    <body>
    <div id="center">
        <ul class="ul1">
            <li><span onclick="last()">&lt;</span></li>
            <li><span style="right: 0px;" onclick="add()">&gt;</span></li>
        </ul>
        <ul class="ul2">
            <li class="li1" style="background: yellow;"></li>
            <li class="li1" style="background: greenyellow;"></li>
            <li class="li1" style="background: greenyellow;"></li>
            <li class="li1" style="background: greenyellow;"></li>
        </ul>
    </div>
    <script src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var bfr_aft = document.getElementsByClassName('li1');
        var scroll = document.getElementById('center');
        var i = 1;
        function add() {
            i += 1;
            if (i>4) {
                i = 1;
            }
            scr_img(i);
        }
        // var down = 4;
        function last() {
            i -= 1;
            if (i<1) {
                i = 4;
            }
            scr_img(i);
        }
        bfr_aft[0].onclick = function () {
            scr_img(1);
        };
        bfr_aft[1].onclick = function () {
            scr_img(2);
        };
        bfr_aft[2].onclick = function () {
            scr_img(3);
        };
        bfr_aft[3].onclick = function () {
            scr_img(4);
        };
        function scr_img(num) {
            switch (num) {
                case 1:
                    scroll.style.background = "url('image/zql1.jpeg')";
                    scroll.style.backgroundSize = '100% 100%';
                    $('.li1').css({
                        'background-color': 'greenyellow'
                    });
                    $('.li1').eq(0).css({
                        'background-color': 'yellow'
                    });
                    break;
                case 2:
                    scroll.style.background = "url('image/zql2.jpg')";
                    scroll.style.backgroundSize = '100% 100%';
                    $('.li1').css({
                        'background-color': 'greenyellow'
                    });
                    $('.li1').eq(1).css({
                        'background-color': 'yellow'
                    });
                    break;
                case 3:
                    scroll.style.background = "url('image/xingye1.jpg')";
                    scroll.style.backgroundSize = 'contain';
                    $('.li1').css({
                        'background-color': 'greenyellow'
                    });
                    $('.li1').eq(2).css({
                        'background-color': 'yellow'
                    });
                    break;
                case 4:
                    scroll.style.background = "url('image/xingye2.jpg')";
                    scroll.style.backgroundSize = 'contain';
                    $('.li1').css({
                        'background-color': 'greenyellow'
                    });
                    $('.li1').eq(3).css({
                        'background-color': 'yellow'
                    });
                    break;
            }
        }
        var timer = setInterval(
            'add()',4000
            );
    </script>
    </body>
    </html>