javascript之 jquery-------------------基础

一，什么是jquery

jquery是由美国人 John Resig 创建的，继prototype后又一个javascript框架，优势是，文档说明很全，各种应用也说的很详细，同时还有许多成熟的插件可以选择，他是轻量级的js库，压缩后只有21kb。

二，jquery对象

jquery对象是通过jquery包装DOM对象后所产生的对象，就是jquery对象，是jquery独有的，可以用jquery里的方法，如 $(".test").html()

三，寻找元素（选择器和筛选器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function () {
            //----------------选择器-----------------
               //基本选择器

//            $("*").css("color","red");// 所有
//            $(".d1").css("color","red");
//            $("#d2").css("color","red");
//            $(".d4 div").css("color","red");
//            $("p").css("color","red");
//            $(".d1,.d3,p").css("color","red")


            //层级选择器

            //后代
            //$(".d4 ").css("color","red");
            //$(".d4 div").css("color","red");

            // 当前标签的下一个div标签
            //$(".d1+div").css("color","red");

            // 当前标签的儿子标签
           // $(".d4>div,p").css("color","red");

            // 当前标签下的所有div标签，不包含当前标签
//            $(".d1~div").css("color","red")
            
            //属性选择器
           // $("[id='d2']").css("color","red");
            
            //表单选择器---->只适用于input标签
            //$("[type='text']").css("color","red")
            //$(":text").css("color","red")  //推荐
            
            //------------筛选器------------------
            //基本筛选器

            //li标签的第一个
           // $("li:first").css("color","red");

            //li标签的最后一个
           // $("li:last").css("color","red");

            // eq是按索引来查找的
           // $("li:eq(2)").css("color","red")

            // even 是取索引是偶数的，从0开始
            $("li:even").css("color","red");

            // odd 是取索引是奇数的，从0开始
            $("li:odd").css("color","green");


            // gt 是从索引0，一直到最后，但不包括自己
           // $("li:gt(1)").css("color","red") ;



            // ---过滤筛选器-------------推荐

            //$("li").eq(1).css("color","red")
            //$("li").first().css("color","red")
            //$("li").last().css("color","red")

            //hasClass 获取ul的后代的li标签，是否有类名叫test的，返回true或false
            //alert($("ul li").hasClass("test"))


        })
    </script>
</head>
<body>
<div class="item">第1层</div>
<div class="d1">第1层的兄弟</div>
<div id="d2">第2层的兄弟</div>
<div class="d3">第3层的兄弟</div>
<div class="d4">
    <div>第4层的儿子</div>
    <p>第四层儿子的兄弟</p>
</div>
<input type="text" value="123"><br>
<input type="text" value="123">

<ul style="list-style: none;">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>44444</li>
    <li>44444</li>
    <li>44444</li>
</ul>


</body>
</html>

用jquery实现的左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .menu{
            width: 300px;
            height: 700px;
            background-color: #4767b2;
        }
        .title{

            background-color: white;
            color: #339900;
        }

        .hide{
            display: none;
        }
    </style>

    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function () {
            $(".title").click(function () {
                //alert(111)
               // console.log(self);
                console.log($(this));
                console.log(this);
                $(this).next().removeClass("hide");
                $(this).parent().siblings().children(".con").addClass("hide");
                //console.log($a)
            })
        })

    </script>

</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>222</div>
                <div>333</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单二</div>
            <div class="con hide">
                <div>111</div>
                <div>222</div>
                <div>333</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="con hide">
                <div>111</div>
                <div>222</div>
                <div>333</div>
            </div>
        </div>
    </div>


</div>
</body>
</html>

左侧菜单

用jquery和js实现的tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .hide{
            display: none;
        }
        .active{
            background-color: #2459a2;
        }
        .outer{
            width: 400px;
            height: 400px;
            background-color: #999999;
        }
        .nav li{
            float: left;
            width: 32.78%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid green;

        }

    </style>

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

        //js和jquery 结合使用

        $(document).ready(function () {
             var $lis = $("li");
             for (var i=0;i<$lis.length;i++){
                 $lis.click(function () {
                 $(this).addClass("active").siblings().removeClass("active")
                 var $name = $(this).attr("f");
                 $("."+ $name).removeClass("hide").siblings().addClass("hide")


             })

             }
        })

    </script>


</head>
<body>

<div class="outer">
    <ul class="nav">
        <li f="con1" class="active">菜单一</li>
        <li f="con2">菜单二</li>
        <li f="con3">菜单三</li>
    </ul>
    <div class="content">
        <div class="con1">1111111111111111111111111111111</div>
        <div class="con2 hide">22222222222222222222222222222222</div>
        <div class="con3 hide">333333333333333333333333333333333</div>
    </div>
</div>

</body>
</html>

tab切换

筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function () {
//-------------------查找筛选器---------------------------//

    //--------------子类筛选器-----------------//

            //console.log($(".c1").children(".c1-son")[0])
//            // 父标签下的所有子标签
//            console.log($(".c1").children("div"));
//
//            //父标签下的指定标签 需要加上子标签
//            console.log($(".c1").find("p").css("color","red"))

    //---------------兄弟筛选器---向下的---------------//

            //下面的第一个兄弟标签
           // console.log($(".c1-son").next()[0]);


            //下面的所有兄弟标签
            //console.log($(".c1-son").nextAll())


            // 开始到结束，不包括这俩标签，只显示中间的兄弟标签，
//            console.log($(".c1-son").nextUntil("a"));
//            console.log($(".c1-son").nextUntil(".c2"))


//---------------兄弟筛选器---向上的---------------//

            // 获取指定标签的上一个兄弟标签
//            console.log($(".p1").prev().css("color","red"));
//            $("a").prev().css("color","red")

            // 获取指定标签的上面所有兄弟标签
//            $(".c2").prevAll().css("color","red")

            // 获取指定元素，上面所有的兄弟标签，直到截止标签，不包含他俩
           // $(".c2").prevUntil(".c1-son").css("color","red")



   //-----------------------父类筛选器----------------、、//

            // 获取指定元素的 父级标签，包括自己
//            $(".c1-son-son").parent().css("color","red")

            // 获取指定元素的 父亲，祖父，一直到body标签
            //$(".c1-son-son").parents().css("color","red")

            // 获取指定元素，的父元素，直到遇到截止元素
            //$(".c1-son-son").parentsUntil(".c1").css("color","red")

//--------------------获取 所有的兄弟标签，不包含自己；-----------------------------
            $(".p1").siblings().css("color","red");
            $(".c2-son").siblings().css("color","red")


        })
    </script>

</head>
<body>
body标签

<div class="c1">c1的标签
    <div class="c1-son">c1的儿子标签
        <div class="c1-son-son">哈哈</div>
        <div class="c1-son-son">哈哈11</div>
    </div>

    <p class="p1">这是一个p标签
        <!--<p>这是p的儿子</p>-->
    </p>

    <a href="#">这是一个a标签</a>
    <div class="c2">c2的标签
        <div class="c22-son">c2的儿子</div>
        <div class="c2-son">c2的儿子</div>
        <div class="c2333-son">c2的儿子</div>
        <div class="c244-son">c2的儿子</div>
    </div>

</div>



</body>
</html>

四，操作元素（属性，css，文档处理）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <script>
        //--------------属性--------------
        $(document).ready(function () {
            $(".con").click(function () {

                //attr 只能 修改自定义的属性，不能修改固定属性
                //alert($(":text").attr("name","d3"));

                //prop 操作固有属性
                //alert($(":text").prop("type","checked"))

//
//                $(":submit").removeProp();
//                // 删除自定义属性
//                $(":text").removeAttr("name")

         //--------------css类------------------
                //添加class
//                $(".d1").addClass("d55");
//
//                //删除class
//                $(".d4").removeClass("d9")

          // ---------------HTML代码/文本/值----------------

                //拿标签和文本
//                console.log($(".d4").html());
//
//                // 只拿文本内容
//                console.log($(".d5").text());
//
//                //添加标签和文本
//                $(".d4").html("<p>aaa</p>");
//
//                //只添加文本
//                $(".d5").text("<h1>sadfafd</h1>");

                // 只拿有固有属性，value属性的 value值  input标签 button标签

               // console.log($(":text").val());
                //console.log($(":submit").val());
                //console.log($(":checkbox").val());
                //console.log($(":button").val());
            });
        });



    </script>


</head>
<body>

<div class="d1">
    <!--<button class="con">button</button>-->
    <input type="text" value="111">
    <input type="button" value="23123">
</div>
<div class="d4 d9">div
    <a href="">aaaa</a>
</div>
<div class="d5">div2
    <p>ppppppp</p>
</div>


</body>

</html>

文档操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {

    //--------------内部插入------------------

                // append 是在父标签的最后插入
               // $(".c1").append($("<p>afsds</p>"));

                // prepend 是在父标签内的最上边插入
                //$(".c1").prepend($("<h1>afsds</h1>"))

                // 在div标签里插入 p标签 最后插入
                var $a = $("<p>asdf</p>");
//                $a.appendTo("div");

//                // 在div标签里 插入 p标签 ，最上插入
//                $a.prependTo("div")


      //---------------外部插入------------//

                // 兄弟及， 在下面插入
               // $(".c1").after($a);

                //兄弟级 ，在上面
                //$(".c1").before($a)


                //标签位置反过来了
                // 弟及， 在下面插入
//                $a.insertAfter(".c1");
//
//                //兄弟级 ，在上面
//                $a.insertBefore(".c1");




        //----------------替换----------------

                // 把 div标签 替换成 p标签
                //$("div").replaceWith($("<p>"))

               // $("p").replaceWith("<div></div>");

                // 替换的内容是文本的话 ，也替换
                //$("p").replaceWith("dsfsdf");

         //-----------删除------------
                // empty 保留标签，清空标签的内容
                //$(".c1").empty()
                //$(".c1").empty("#p1")

                // remove 删除整个标签,全部删掉
                //$(".c1").remove();
     //------------- 复制  clone---------------//
                $("#p1").clone().appendTo("body");
                $(".c1").clone().appendTo("body");
                //$("body").append($a)

            })

        })
    </script>
</head>
<body>
<div><button>button</button></div>
<div class="c1">div
    <p id="p1">ppppppppppppppppppppp</p>
</div>
<p>pppppppp</p>

</body>
</html>

table案例，全选，反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../day54%20-----》jquery框架/jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function () {
            for (var $i=0;$i<$(".item").length;i++) {

                $("button").click(function () {
                    //alert($(this).text());
                    if ($(this).text() == "全选") {
                        $(".item").prop("checked", true);
                        // alert($(this).text());
                    } else if ($(this).text() == "取消") {
                        $(".item").prop("checked", false)
                    } else {
                        $(".item").each(function () {
                            $(this).prop("checked",!$(this).prop("checked"))
                        })





                    }

                })
            }
        })

    </script>

    
</head>
<body>
<h1>表格实例</h1>

<button class="all">全选</button>
<button class="reverse">反选</button>
<button class="cancel">取消</button>
<hr>
<table border="2px" class="server_tb">
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
    </tr>
    <tr>
       <td><input type="checkbox" class="item"></td>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
    </tr>
    <tr>
       <td><input type="checkbox" class="item"></td>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
    </tr>
</table>


</body>
</html>

全选，反选，取消

复制样式条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div class="outer">
    <div class="item">
        <input type="button" value="+" onclick="removed()">
        <input type="text">
    </div>
</div>

</body>
<script src="jquery-3.2.1.js"></script>
<script>
    $(":button").click(function () {
        //$(".outer .item").clone().appendTo(".outer")
        var $clone = $(this).parent().clone();
        $clone.children(":button").val("--").attr("onclick","removed(this)");

        $(".outer").append($clone)
    });
    function removed(self) {
        console.log(self);
       $(self).parent().remove()
    }
</script>
</html>

input标签

五，动画效果

hide隐藏，和，show显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="chia">aaaa</div>
<h1>这是一个标题</h1>
<p id="aa">这是一个段落</p>
<p class="c1">这是另一个段落</p>
<p class="c2">这是另一个段落111</p>
<p class="c3">这是另一个段落222</p>
<button class="hide">点我隐藏</button>
<button class="show">点我显示</button>
</body>
<script src="jquery-3.2.1.js">
</script>

<script>
    // hide()隐藏 加参数，毫秒单位
    $(document).ready(function () {
        $(".hide").click(function () {
            $("p").hide(2000);
            //$("#aa").hide()
        });
         //show()显示
        $(".show").click(function () {
            $("p").show(1000);
        });
        
        // 鼠标事件
        $(".chia").mouseenter(function () {
            alert("你鼠标放错位置了")

        });

    });

//    //隐藏所有div标签
//    $("div").hide();
//
//    // 隐藏所有p标签
//    $("p").hide();
//
//
//    // 隐藏所有id为aa的标签
//    $("#aa").hide();
//
//    // 隐藏所有class为c1的标签
//    $(".c1").hide();
//
//    //隐藏p标签下的class为c3的标签
//    $(" p.c3").hide()

</script>
</html>

toggle方法（包含了显示和隐藏，不用单个点击了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <script>
        //显示被隐藏的元素，并隐藏已显示的元素：
        $(document).ready(function () {
            $("button").click(function () {
                $("p").toggle(1000)
            })
        })
    </script>

</head>
<body>
<p>领导说：同志们好</p>
<p>领导说：同志们辛苦了</p>
<p>同志们说：首长好</p>
<p>同志们：为人民服务</p>
<button>显示/隐藏</button>
</body>
</html>

fadeIn淡入，和 fadeOut 淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .i2{
            display: none;
        }
    </style>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#b1").click(function () {
                $(".i1").fadeOut("show")

            });

            $("#b2").click(function () {
                $(".i1").fadeIn(1000)
            });
            $("#b3").click(function () {
                $(".i1").fadeToggle(2000,function () {
                    $(".i2").fadeToggle(1000)
                })
            })
        })

    </script>
</head>
<body>

<div>
    <img class="i1" src="11.jpg" style="height: 400px">
    <br>
    <img class="i2" src="334.png">
<button id="b1">点我淡入</button>
<button id="b2">点我淡出</button>
<button id="b3">淡入/淡出</button>
</body>
</html>

slideDown出现，和，slideUp隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width: 100%;
            height: 100px;
            background-color: #2459a2;
            text-align: center;
            line-height: 100px;
            font-size: 40px;
        }
    </style>


    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#slideDown").click(function () {
                $(".content").slideDown(1000)
            });

            $("#slideUp").click(function () {
                $(".content").slideUp(1000)
            });

            $("#slideToggle").click(function () {
                $(".content").slideToggle(2000)
            })
        })

    </script>
</head>
<body>


<div class="content">hello world</div>

<button id="slideDown">出现</button>
<button id="slideUp">隐藏</button>
<button id="slideToggle">出现/隐藏</button>
</body>
</html>

回调函数（在方法内，在加上一个函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width: 100%;
            height: 100px;
            background-color: #2459a2;
            text-align: center;
            line-height: 100px;
            font-size: 40px;
        }
    </style>


    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#slideDown").click(function () {

                // 回调函数就是 在slideDown方法内，在加一个函数的参数
                $(".content").slideDown(1000,function () {
                    // 出现之后，给隐藏了
                    $(".content3").hide()
                })
            });

            $("#slideUp").click(function () {
                $(".content").slideUp(1000)
            });

            $("#slideToggle").click(function () {
                $(".content").slideToggle(2000)
            })
        })

    </script>
</head>
<body>


<div class="content">hello world</div>
<div class="content3">hello world</div>

<button id="slideDown">出现</button>
<button id="slideUp">隐藏</button>
<button id="slideToggle">出现/隐藏</button>
</body>
</html>

六，jquery的循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <script>
        // --------------方式一、、--------

        // 数组
        $li = [12,22,33,44];

        //函数里需要放两个参数，i是索引值，j是值
        $.each($li,function (i,j) {
            console.log(i,j)
        });
        // 集合

        // k对应的是 key， q对应的是value
        $dic = {"name":"gy","age":25,"sex":"man"};
        $.each($dic,function (k,q) {
            console.log(k,q)
        });


        //--------------方式二，，--------------
        $("#l1").each(function () {
            console.log($(this).html())
        })


    </script>

</head>
<body>
<ul>
    <li id="l1">111</li>
    <li id="l1">222</li>
    <li id="l1">333</li>
    <li id="l1">444</li>
</ul>


</body>
</html>