Jquery的几个方法使用.

最新推荐文章于 2023-03-10 16:43:34 发布

撒哈拉的绿洲

最新推荐文章于 2023-03-10 16:43:34 发布

阅读量482

点赞数

分类专栏： JS HTML 文章标签： jquery html

本文链接：https://blog.csdn.net/u011550635/article/details/23201971

版权

JS 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

1.延迟delay(time)方法.参数:时间.

2.not选择器

3.向上sileUp

复制代码运行可以出现效果:

注:加上jquery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <style type="text/css">
        #test1{
            background: red;
            width: 100%;
            height: 100%
        }
        #test2{
            background: gray;
            width: 100%;
            height: 100%
        }
        html,body,#test{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #test{
            position: absolute;
            top:0;
            left: 0;
        }
        #test3{
            position:relative;
            width: 30px;
            height: 30px;
            background: #000000;
            left:500px;
        }
        #click1{
            position: absolute;
            top:30px;
        }
    </style>
    <script type="text/javascript" >
        //delay  延迟  slideUp(向上滑动)
       setTimeout(function(){
           $("#test1").delay(1000).slideUp(1000)
       },1)
        //not选择器
        function move(){
           $("#test3:not(:animated)").animate({left:"+=100px"},1000);
        }
    </script>
</head>
<body>
     <div id="test" >
         <div id="test1"></div>
         <div id="test2"></div>
     </div>
     <div id="test3"></div>
     <button id="click1" οnclick="move()">移动方块</button>
</body>
</html>