jQuary学习（一）

一、jQuary简介

jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
jQuery 对象就是通过jQuery包装DOM对象后产生的对象

二、寻找元素(重要的选择器和筛选器)

2.1选择器

2.1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")

2.1.2层级选择器 $(".outer div")

$(".outer>div") 在给定的父元素下匹配所有的子元素,只有子

$(".outer+div") 匹配所有紧接在 outer 元素后的 div 元素，有子有孙

$(".outer~div") 匹配 outer元素之后的所有 siblings 元素

2.1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

2.1.4 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')

2.1.5 表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签

$("input:checked")

2.2 筛选器

2.2.1 过滤筛选器

$("li").eq(2) $("li").first() $("ul li").hasclass("test")

2.2.2 查找筛选器

$("div").children(".test") $("div").find(".test")

$(".test").next() $(".test").nextAll() $(".test").nextUntil()

$("div").prev() $("div").prevAll() $("div").prevUntil()

$(".test").parent() $(".test").parents() $(".test").parentUntil()

$("div").siblings()

三操作元素(属性 CSS 和文档处理)

3.1 属性操作

$("p").text() $("p").html() $(":checkbox").val()

$(".test").attr("alex") $(".test").attr("alex","sb")

$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")

$(".test").prop("checked",true)

$(".test").addClass("hide")

3.1 this的两种用法

方法一

<body>

<div id="div" onclick="func1(this)" >hello </div>

<script>

    function func1(self) {

       console.log(self.getAttribute("id"))

    }

</script>

</body>

方法二

<body>

<div id="div" >hello </div>

<script>

    document.getElementById("div").onclick=function () {

        console.log(this.getAttribute("id"))

    }

</script>

</body>

实例

模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{margin: 0;}

        #div1{

            width: 100%;

            position: fixed;

            top: 0;

            left: 0;

            height: 2000px;

            background-color: #b4b4b4;

            z-index: 1000;

        }

        #div2{

            width: 100%;

            z-index:1001;

            position: fixed;

            top:0;

            left: 0;

            right:0;

            bottom: 0;

            background-color: red;

            opacity: 0.1;

        }

        #div3{

            height: 200px;

            width:500px;

            background-color: whitesmoke;

            position:absolute;

            top:50%;

            left: 50%;

            margin-top: -100px;

            margin-left: -250px;

            z-index:1002;

            border: 1px floralwhite solid;

            border-radius: 10%;

        }

        .hide{

            display: none;

        }

        #div3 input{

            display: inline-block;

            position: absolute;

            right: 25%;

            bottom: 20%;

            width: 100px;

            height: 40px;

        }

    </style>

</head>

<body>

<div id="div1">

    <input type="button" value="click" onclick="show(this)">

</div>

<div id="div2" class="div hide"></div>

<div id="div3" class="div hide">

    <input type="button" value="cancel" onclick="cancel(this)">

</div>

<script src="jquery-3.3.1.min.js"></script>

<script>

    function show(self) {

       $(self).parent().siblings().removeClass("hide");

    }

    function cancel(self) {

        $(self).parent().parent().children("#div2,#div3").addClass("hide");

    }

</script>

</body>

</html>

编辑框正反选

<body>

     <button onclick="selectall();">全选</button>

     <button onclick="cancel();">取消</button>

     <button onclick="reverse();">反选</button>

     <table border="1" id="Table">

         <tr>

             <td><input type="checkbox"></td>

             <td>111</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>222</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>333</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>444</td>

         </tr>

     </table>

<script src="jquery-3.3.1.min.js"></script>

<script>

    function selectall() {

        $("#Table :checkbox").each(function(){

            $(this).prop("checked",true);

        })

    }

    function cancel() {

        $("#Table :checkbox").each(function(){

            $(this).prop("checked",false);

        })

    }

    function reverse() {

        $("#Table :checkbox").each(function(){

           if ($(this).prop("checked")){

               $(this).prop("checked",false);

           }else{

              $(this).prop("checked",true);

            }

        })

    }

</script>

</body>

table切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .tab_outer{

            margin: 0px auto;

            width: 60%;

        }

        .menu{

            background-color: #cccccc;

            line-height: 40px;

        }

        .menu li{

            display: inline-block;

        }

        .menu li{

            border-right:1px solid red;

            padding:5px;

        }

        .hide{

            display: none;

        }

        .content{

            background-color: beige;

            border: 1px solid gray;

            height: 300px;

        }

        .current{

            background-color: darkgrey;

            color: yellow;

            border-top: solid 2px greenyellow;

        }

    </style>

</head>

<body>

<div class="tab_outer">

          <ul class="menu">

              <li xxx="c1" class="current" onclick="tab(this)">菜单一</li>

              <li xxx="c2" onclick="tab(this)">菜单二</li>

              <li xxx="c3" onclick="tab(this)">菜单三</li>

          </ul>

          <div class="content">

              <div id="c1">内容一</div>

              <div id="c2" class="hide">内容二</div>

              <div id="c3" class="hide">内容三</div>

          </div>

      </div>

<script src="jquery-3.3.1.min.js"></script>

<script>

    function tab(self){

        $(self).addClass("current").siblings().removeClass("current");

        var cont_id=$(self).attr("xxx");

        $("#"+cont_id).removeClass("hide").siblings().addClass("hide")

    }

</script>

</body>

</html>

3.3 CSS操作

3.2.1(样式) css("{color:'red',backgroud:'blue'}")

3.2.2(位置) offset() position() scrollTop() scrollLeft()

3.2.3(尺寸) height() width()

3.4 文档处理

内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")

prepend() prependTo()

外部插入 before() insertBefore() after insertAfter()

replaceWith() remove() empty() clone()

内部插入

<body>

<input type="text" value="123">

<input type="checkbox" name="hobby">

<p>hello p</p>

<div id="div1">

    <p>hello p</p>

    <p>hello pr</p>

</div>

<script src="jquery-3.1.1.js"></script>

<script>

var ele=$("p")

    ele.appendTo($("#div1"))

</script>

</body>

实例 clone方法的应用

<body>

<div id="outer">

    <div id="item">

        <input type="button" value="+" onclick="func1(this)">

        <input type="text">

    </div>

</div>

<script src="jquery-3.3.1.min.js"></script>

<script>

    function func1(self){

        var Clone=$(self).parent().clone();

        Clone.children(":button").val("-").attr("onclick","func2(this)");

        $("#outer").append(Clone);

    }

    function func2(self) {

        $(self).parent().remove();

    }

</script>

</body>

实例，滚动菜单，阅读小说页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

        }

        .head{

            height: 48px;

            background-color: #336699;

        }

        .menu{

            position: absolute;

            top:48px;

            left: 200px;

            bottom: 0px;

            width: 280px;

            background-color: darkgray;

        }

        .menu a{

            display: block;

        }

        .active{

            background-color: #336699;

            color: white;

        }

        .fafafa{

            position: fixed;

            top:0;

        }

        .content{

            position: absolute;

            left:480px;

            right: 200px;

            bottom: 0;

            top:48px;

            /*overflow: auto;*/   /*加上之后顶部不随滚动条移动*/

            background-color: bisque;

            border:1px solid gray;

        }

    </style>

</head>

<body>

    <div class="head">

        <div class="head_menu"></div>

    </div>

    <div id="menu" class="menu">

        <a b="1">第一章</a>

        <a b="2">第二章</a>

        <a b="3">第三章</a>

        <a b="4">第四章</a>

    </div>

    <div class="content">

        <div id="li1" a="1" style="height: 500px;background-color: rebeccapurple"></div>

        <div id="ii2" a='2' style="height: 900px;background-color: #303a40"></div>

        <div           a='3' style="height: 1000px;background-color: #84a42b"></div>

        <div           a='4' style="height: 50px;background-color: #336699"></div>

    </div>

    <div onclick="GoTop()" style="cursor:pointer;position:fixed;right: 0;bottom:0;width: 50px;height: 50px;background-color: #303a40;color: white;border: 1px solid red;" >返回顶部</div>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        function GoTop(){

            //滚动条顶部位置设为0

            $(window).scrollTop(0)

        }

        //窗口内滚动滑轮即触发该方法

        window.onscroll=function () {

            var scrollTop = $(window).scrollTop();

            if (scrollTop>48){

                $('#menu').addClass("fafafa");

            }else{

                $('#menu').removeClass("fafafa");

                $('#menu a').removeClass('active');//消除再次回到顶部时，第一章仍然亮的bug

            }

            $(".content").children().each(function(){

                var eleTop = $(this).offset().top; //offset获取元素的顶部位置和左侧位置

                var winTop = eleTop-scrollTop; //实时的元素顶部与窗口顶部距离

                var winBottomTop = eleTop+$(this).height()-scrollTop; //实时的元素底部与窗口顶部距离

                var docHeight = $(document).height();//整个文档的高度

                var winHeight = $(window).height();//整个窗口的高度

                if (docHeight-winHeight == scrollTop){  //如果已经到了底部，直接让最后一章菜单变色

                    $('#menu a:last').addClass("active").siblings().removeClass('active');

                }else{

                   if (winTop<=0 && winBottomTop>0){

                    var a = $(this).attr('a');//找到同样属性值的菜单

                    $("#menu a[b="+a+"]").addClass("active").siblings().removeClass('active');

                    //不再继续检测其他内容了

                    return;

                }

                }

            })

        }

    </script>

</body>

</html>

实例京东轮播图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        ul{

            list-style-type: none;

        }

        #outer{

            margin: 0 auto;

            margin-top: 50px;

            width: 590px;

            height: 470px;

            position: relative;

        }

        .img li{

            position: absolute;

            top: 0;

            left: 0;

        }

        .num{

            position: absolute;

            width: 100%;

            bottom: 20px;

            text-align: center;

        }

        .num li{

            display: inline-block;

            background-color: #cccccc;

            height: 20px;

            width: 20px;

            color: #ffffff;

            text-align: center;

            line-height: 20px;

            border-radius: 50%;

            margin: 0 5px;

        }

        .but{

            position: absolute;

            height: 60px;

            width: 30px;

            color: white;

            font-size: 20px;

            background-color: #b4b4b4;

            line-height: 60px;

            text-align: center;

            top: 50%;

            margin-top: -30px;

            display: none;

        }

        .but-l{

            left:0;

        }

        .but-r{

            right: 0;

        }

        #outer:hover .but{

            display: block;

        }

        .num .current{

            background-color: red;

        }

    </style>

</head>

<body>

<div id = 'outer'>

    <div class="img">

        <ul>

            <li><a><img src="img/1.jpg"></a></li>

            <li><a><img src="img/2.jpg"></a></li>

            <li><a><img src="img/3.jpg"></a></li>

            <li><a><img src="img/4.jpg"></a></li>

            <li><a><img src="img/5.jpg"></a></li>

        </ul>

    </div>

    <div class="num">

        <ul>

            <li class="current">1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </div>

    <div class="but-l but"> < </div>

    <div class="but-r but" > > </div>

</div>

<script src="jquery-3.3.1.min.js"></script>

<script>

    //当鼠标悬浮到底部数字时，数字变红，同时出现相对应的图片

    $('.num li').mouseover(function () {

        $(this).addClass('current').siblings().removeClass('current');

        //通过index能够获得this的索引值

        var index = $(this).index();

        $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000);

        i = index;

    })

    //图片与数字随时间自动轮播

    var time =setInterval(move,1500); //定义函数，经过1.5s运行move函数

    var i = 0;

    function move() {

        //当轮播到最后一个后，再从头开始

        if (i==4){

            i = -1;

        }

        i++;

        $('.num li').eq(i).addClass('current').siblings().removeClass('current');

        $('.img li').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); //加上stop()，停止其他动画再进行后面的动画

    }

    //定义一个方法，当鼠标悬浮到图片时，停止自动轮播

    $("#outer").hover(function () {

        clearInterval(time);

    },function () {

        time =setInterval(move,1500);

    })

    $(".but-r").click(function () {

        move();

    })

    function moveL() {

        //当轮播到第一个时，再最后开始

        if (i==0){

            i = 5;

        }

        i--;

        $('.num li').eq(i).addClass('current').siblings().removeClass('current');

        $('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000);

    }

    $(".but-l").click(function () {

        moveL();

    })

</script>

</body>

</html>