博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

第四节 前端基础之jQuery

Posted on 2017-03-23 17:14  Jasonhy  阅读(138)  评论(0)    收藏  举报

　　　　jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：$("#test").html()。

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

    <div>hello jquery</div>
    <p id="p1" name="Jasonhy">pppppp</p>
    <a href="">click</a>
    <div class="outer">outer
        <div class="inner">inner</div>
    </div>

    <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>

    <input type="text">
    <input type="checkbox">
    <input type="submit">

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

        //$和jquery是一样的,都是jquery对象
        $("div").css("color","red"); //直接通过标签来匹配

        //通过*来匹配
        $("*").css("color","yellow");

        //通过id来寻找
        $("#p1").css("color","red");

        //通过class来寻找
        $(".outer").css("color","red");

        //基本筛选器
        $("li:first").css("color","red");
        $("li:last").css("color","blue");
        $("li:eq(2)").css("color","black");

        //让奇数备选 li:even  让偶数备选 li:odd
        //从第几个位置后开始变 li:gt(1)  从第几个位置之前开始变 li:lt(2)

        //属性选择器
        $("[name]").css("background-color","grey");

        //表单选择器
        //input可以这样写
        $(":text").css("width","400px");
    </script>
</body>
</html>

 　　　　案例：左侧菜单

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

    <style>
        .outer{
            height: 1000px;
            width: 100%;
        }

        .menu{
            float: left;
            background-color: green;
            width: 30%;
            height:500px;
        }

        .content{
            float: left;
            background-color: aquamarine;
            width: 70%;
            height: 500px;
        }

        .title{
            background-color: chocolate;
            line-height: 40px;
        }

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

    <div class="outer">
        <div class="menu">
            <div class="item">
                <div class="title" onclick="show(this)">菜单一</div>
                <div class="con">
                    <div>111</div>
                    <div>111</div>
                    <div>111</div>
                </div>
            </div>
            <div class="item">
                <div class="title" onclick="show(this)">菜单二</div>
                <div class="con hide">
                    <div>222</div>
                    <div>222</div>
                    <div>222</div>
                </div>
            </div>

            <div class="item">
                <div class="title" onclick="show(this)">菜单三</div>
                <div class="con hide">
                    <div>333</div>
                    <div>333</div>
                    <div>333</div>
                </div>
            </div>
        </div>
        <div class="content"></div>
    </div>

    <script src="jquery-3.2.0.min.js"></script>
    <script>
        function show(self) {
            $(self).next().removeClass("hide");
            //隐藏其他标签
            $(self).parent().siblings().children(".con").addClass("hide");
        }
    </script>
</body>
</html>

效果图：

　　　　属性操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div1" con="c1"></div>
    <input type="checkbox" checked="checked">是否可见
    <input type="text" value="123">

    <div value="456"></div>

    <div id="id1">
        <p>ppppppppp</p>
    </div>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        //通过自定义的属性来操作 attr既可以取出又可以赋值
        console.log($("div1").attr("con"));

        //prop属性 只能用来找固有属性 而attr可以用来找自定义的属性


        console.log("相当于innerHtml" + $("#id1").html());
        console.log("相当于innerText" + $("#id1").text());

        //添加参数之后,将找到的内容对其进行修改
//        console.log("相当于innerHtml" + $("#id1").html("<h1>Jasonhy</h1>"));

        //val取的固有的value 不能去自定义的value
        console.log($(":text").val());
        console.log($(":text").next().val());

        //加了参数,将修改原来的value值
        console.log($(":text").val(789));
    </script>
</body>
</html>

 

　　　　　jQuery的遍历：

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

    <p>0000</p>
    <p>1111</p>
    <p>2222</p>

    <script src="jquery-3.2.0.min.js"></script>
    <script>
        //js和jQuery是可以混搭使用的
        arr = [11,22,33];

        //jQuery的循环遍历 第一种
        $.each(arr,function (x, y) {
            //x和y分别对应索引和值

        });

        //第二种遍历的方式 遍历标签
        $("p").each(function () {
            //$(this)当前的标签对象
            console.log($(this));
            $(this).html("hello");
        });
    </script>
</body>
</html>

　　　　案例：prop正反选

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

<button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>

<table border="1">
    <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.2.0.min.js"></script>
<script>
    function selectall() {
        //checkbox是固有属性,用prop
        $(":checkbox").each(function () {
            $(this).prop("checked", true);
        })
    }

    function cancel() {
        $(":checkbox").each(function () {
            $(this).prop("checked", false);
        })
    }

    function reverse() {
        $(":checkbox").each(function () {
            if ( $(this).prop("checked")){
                $(this).prop("checked",false);
            }else {
                $(this).prop("checked",true);
            }
        })
    }
</script>
</body>
</html>

　　　　文档操作：

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

    <div class="c1">
        <p>PPP</p>
    </div>

    <button>add</button>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        //jquery绑定事件
         $("button").click(function () {
             //添加  内部插入
//            $(".c1").append("<h1>Hello</h1>");
             //创建标签
             var $ele = $("<h1></h1>");
             $ele.html("添加内容");
             $ele.css("color","red");
             //第二种添加方式
//             $(".c1").append($ele);

             //子标签通过appendTo来添加
//             $ele.appendTo(".c1");

             //在前面添加元素
//             $(".c1").prepend($ele);
             //prependTo
//             $ele.prependTo(".c1");


             //外部插入 before往前面插
//             $(".c1").after($ele);

             //子标签来调用
//             $ele.insertAfter(".c1");

             //替换
//             $("p").replaceWith($ele);

             //删除与清空
//             $(".c1").empty(); //清空的是内容
//             $(".c1").remove(); //标签也一起删除

             //复制
             var $ele2 = $(".c1 :first").clone();
             $(".c1").append($ele2);
         });
    </script>
</body>
</html>

　　　　css操作：

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

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .div1,.div2{
            width: 200px;
            height: 200px;
        }

        .div1{
            background-color: #84a42b;
        }

        .div2{
            background-color: #396bb3;
        }
    </style>
</head>
<body>

    <div class="div1"></div>
    <div class="div2"></div>

    <script src="jquery-3.2.0.min.js"></script>
    <script>
        //offset返回的是一个对象,相对于视口的偏移量,有两个属性 top left
        $(".div1").offset();

        //position也是一个偏移量,相对于已经定位的父标签 也是有top left属性
        $(".div1").position();

        //滚动条scrollTop
        $("body").scrollTop();

        //height width 拿到的是内容的大小,不包含padding border
        $(".div1").height();
        $(".div1").width();


        //innerHeight 包括padding 不包含border
        //outerHeight 都包括 当outerHeight里面加上true参数,就会考虑margin
    </script>
</body>
</html>

　　　　案例：置顶

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

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div1, .div2 {
            width: 100%;
            height: 800px;
        }

        .div1 {
            background-color: #84a42b;
        }

        .div2 {
            background-color: #396bb3;
        }

        .return-top{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 80px;
            height: 50px;
            background-color: #99aecb;
            color: #339900;
            text-align: center;
            line-height: 50px;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>

<div class="return-top hide" onclick="returnTop()">返回顶部</div>
<script src="jquery-3.2.0.min.js"></script>
<script>

    //绑定滚动监听事件
    window.onscroll = function () {

        //滑动的时候隐藏
        if ( $(window).scrollTop() > 100){
            $(".return-top").removeClass("hide");
        }else {
            $(".return-top").addClass("hide");
        }
    };

    function returnTop() {
        //返回顶部
        $(window).scrollTop(0);
    }
</script>

</body>
</html>

 

 

 

 

　　　　案例：tab切换

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

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .tab-out{
            margin: 0 auto;
            width: 60%;
        }

        .menu{
            background-color: #99aecb;
            line-height: 40px;
        }

        .menu li{
            display: inline-block;
        }

        .content{
            background-color: aquamarine;
            border: 1px solid red;
            height: 300px;
        }

        .hide{
            display: none;
        }

        .current{
            background-color: #783d0c;
            color: white;
            border-top: 2px solid rebeccapurple;
        }

    </style>
</head>
<body>


    <div class="tab-out">
        <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.2.0.min.js"></script>
    <script>

        function tab(self) {
            var index = $(self).attr("xxx");
            $("#"+index).removeClass("hide").siblings().addClass("hide");
            $(self).addClass("current").siblings().removeClass("current");
        }
    </script>
</body>
</html>

效果图：

 　　　　事件：

　　　　　　a：页面载入

　　　　　　　　ready(func)：当DOM载入就绪可以查询其操作时绑定一个要执行的函数，如：

　　　　　　　　$(document).ready(function(){}) ---->$(function(){})

　　　　　　b：事件处理

　　　　　　　　$("").on(eve,[selector],[data],func)：在选择元素上，绑定一个或多个事件处理函数

　　　　　　　　说明：.on的selectorc参数是筛选出调用.on方法的dom元素的指定子元素，如：

　　　　　　　　$("ul").on("click","li",function(){console.log("click");})就是筛选ul下的li给其绑定click事件

　　　　　　　　[selector]参数的好处就是在于.on方法为动态添加的元素也能绑上指定事件

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

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

    <script>

        //页面载入 当页面加载完再执行
        $(document).ready(function () {
            $("ul li").html("6666666")
        });

        //简写方法
        $(function () {
            $("ul li").html("6666666")
        });
    </script>
</head>
<body>

    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>

    <button>add</button>

    <!--<script src="jquery-3.2.0.min.js"></script>-->
    <script>
        //jquery已经帮我们做了内部循环
        //写法一  这种绑定创建的li没有绑定点击事件
//        $("ul li").click(function () {
//            alert("点击了");
//        });

        //写法二 这种绑定创建的li没有绑定点击事件
//        $("ul li").bind("click",function () {
//
//        });

        //解绑
//        $("ul li").unbind("click",function () {
//
//        });

//        动态的创建li
        $("button").click(function () {
            var $ele = $("<li>");
            $ele.html(Math.round(Math.random()*100));

            $("ul").append($ele);
        });


        //由于临时加的没有绑定的点击事件,所以绑定事件的办法改成on方法,称之为事件委托:

        //意思是给ul绑定 由ul委托给li
        $("ul").on("click","li",function () {
            alert("点击了");
        });

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

 

 　　　　显示和隐藏:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>Hello</div>
    <button onclick="f1()">显示</button>
    <button onclick="f2()">隐藏</button>
    <button onclick="f3()">切换</button>

    <script src="jquery-3.2.0.min.js"></script>
    <script>
        function f1() {
            $("div").show(1000);
        }

        function f2() {
            $("div").hide(1000);
        }

        function f3() {
            //如果是显示就隐藏 反之
            $("div").toggle(1000);
        }
    </script>
</body>
</html>

　　　　滑动:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>

    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>

　　　　渐入渐出:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(1000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);

   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

　　　　扩展方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.min.js"></script>
</head>
<body>

    <p>1111</p>
    <p>1111</p>
    <p>1111</p>
    <p>1111</p>


    <script>
        //添加一个静态方法
        $.extend({
            Myprint:function () {
                console.log("扩展方法");
            }
        });

        //使用这个方法
        $.Myprint();


        //第二种扩展
        $.fn.extend({
           GetText:function () {
               console.log("第二种扩展方法:" + $(this).html());
           }
        });
        //使用这种方法
        $("p").GetText();
    </script>
</body>
</html>

 　　　　案例:轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.min.js"></script>


    <style>
        .outer{
            width: 790px;
            height: 340px;
            margin: 80px auto;
            position: relative;
        }

        .img li{
            position: absolute;
            list-style: none;
            top: 0;
            left: 0;
        }

        .num{
            /*让指示点显示,也要设置position*/
            position: absolute;
            bottom: 18px;
            left: 300px;
            list-style: none;
        }

        /*变内联*/
        .num li{
            display: inline-block;
            width: 18px;
            height: 18px;
            background-color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            margin-left: 10px;
        }

        .btn{
            position: absolute;
            /*如果不写top left默认为0*/
            top: 50%;
            width: 30px;
            height: 60px;
            background-color: darkgrey;
            color: white;

            text-align: center;
            line-height: 60px;
            font-size: 30px;
            opacity: 0.3;
            margin-top: -30px;

            display: none;
        }

        .left{
            left: 0;
        }

        .right{
            right: 0;
        }

        /*设置悬浮 才显示左右按钮*/
        .outer:hover .btn{
            display: block;
        }

        .num .active{
            background-color: red;
        }
    </style>
</head>
<body>

    <div class="outer">
        <ul class="img">
           <li><a href=""><img src="1.jpg"></a> </li>
           <li><a href=""><img src="2.jpg"></a> </li>
           <li><a href=""><img src="3.jpg"></a> </li>
        </ul>

        <ul class="num">
            <!--<li class="active">1</li>-->
            <!--<li >2</li>-->
            <!--<li >3</li>-->

            <!--修改为通过js来创建 主要是为了和图片统一 便于维护-->
        </ul>

        <div class="left btn"> < </div>
        <div class="right btn"> > </div>
    </div>

    <script>
        //获取图片的数目
        var img_num = $(".img li").length;
        //通过jquery来自动创建指示点便签
        for(var i = 0 ; i < img_num; i++){
            //创建标签
            $(".num").append("<li>")
        }

        //添加属性
        $(".num li").eq(0).addClass("active");


        //手动轮播 给num下的li绑定事件
        $(".num li").mouseover(function () {
            //获取当前索引
            i = $(this).index();

            //悬浮交互
            $(this).addClass("active").siblings().removeClass("active");

            //将图片联动 stop()在fadeIn fadeout之前,先将所有的动作停掉
            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
        });

        //自动轮播
        var i = 0;
        //通过定时器来实现
        var c = setInterval(goRight,1000);
        function goRight() {
            i++;
            $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

            if (i > (img_num-1)){
                i = -1;
            }
        }

        function goLeft() {
            i--;
            $(".num li").eq(i).addClass("active").siblings().removeClass("active");
            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

            if (i < 0){
                i = img_num;
            }
        }

        //当悬浮的时候,轮播图应该停止 需要清空计时器  通过hover方法来实现
        $(".outer").hover(function () {
            clearInterval(c);
        },function () {
            c = setInterval(goRight,1000);
        });

        //通过左右按钮来实现轮播
        $(".right").click(goRight);
        $(".left").click(goLeft);
    </script>
</body>
</html>