jQuery基础教程学习笔记（一）

最新推荐文章于 2025-02-05 18:01:00 发布

原创最新推荐文章于 2025-02-05 18:01:00 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经允许禁止转载

文章标签：

#jquery #函数 #动画

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了jQuery中的css()和animate()函数的使用方法，包括如何设置和读取元素的CSS属性，以及如何创建自定义动画效果。同时，还探讨了在动画队列中改变颜色的方法，并提供了一个综合实例。

今天下午学习了第四章——样式与动画，主要内容是两个函数的应用：CSS()和animate().

css()函数属于可读可写的函数:可以设置元素的CSS属性，如$('.hello').css('height','50px');//类名为hello的元素高度被设置为50px
也可以读取到CSS属性的具体值，如var a=$('.hello').css('height');//返回50px

在设置属性时，css()可以接受两种方式：

一个单独的样式属性和值，例如$('.hello').css('background-color','red');//属性值可以写成连字符形式也可以写成驼峰形式，经测试两种都必须要加引号
一个由属性值对构成的对象，例如$('.hello').css({'width':'200px','color':'red'});

读取属性时，可以读取单个属性，传递一个字符串形式的属性名，得到一个字符串形式的属性值，例如：.css('height');//返回字符串
也可以一次读取多个属性，传入属性名的数组，得到属性和值构成的对象，例如：

var a=['backgroundColor','height'];
        alert($('h3').css(a));//这样弹出来的结果是[object object],不知道为什么没有具体的值

animate函数主要用来自定义动画，但是不能设置颜色，比如
$('p').animate({backgroundColor:'green'},3000);以上代码将不产生任何效果，是无效的

如果希望在一个动画队列中有颜色的改变可以通过queue函数或者交互的完成回调函数实现：

queue函数。

$('h3').animate({fontSize:'30px'},3000)
        .queue(function(){
            $(this).css('backgroundColor','blue');
});//连缀起来，在h3字体变为30px后，背景就会变红

但注意，以上写法存在问题，如果背景变红后，字体再变回20px，这个效果将不会执行，像下面的代码是错误的

$('h3').animate({fontSize:'30px'},3000)
    .queue(function(){
        $(this).css('backgroundColor','blue');
    })
    .animate({fontSize:'20px'},3000);

错误的原因是什么呢？queue属于队列函数，把一个效果加入队列后，需要出队，下一个排队的效果才会执行，出队有两种方法：

通过调用回调函数


`$('h3').animate({fontSize:'30px'},3000)
        .queue(function(**next**){
                $(this).css('backgroundColor','blue');
                **next();**
        })
        .animate({fontSize:'20px'},3000);

通过调用出队列函数.

$('h3').animate({fontSize:'30px'},3000)
        .queue(function(){
            $(this).css('backgroundColor','blue');
            **$(this).dequeue();**
        })
        .animate({fontSize:'20px'},3000);

2.交互的完成回调函数

$('h3').animate({fontSize:'30px'},3000,function(){$(this).css('backgroundColor','blue');});

个人感觉第二种比较简洁。

附上我做的第四章习题，供大家参考。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>CSS动画改变</title>
    <style type="text/css">
        *{margin:0; padding: 0;}
        body{width: 100%;}
        .styleChange{padding: 10px; margin-right: 80px; border:1px solid #cccccc; float:right; cursor: pointer;}
        .styleChange h3{font-size: 18px; line-height: 22px;}
        .contents{ clear:both; width: 80%; margin: 20px auto; /*border: 1px solid white;*/ overflow: hidden;}
        .contents h2{text-align: center; line-height: 30px; margin-top: 40px; cursor: pointer;}
    </style>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('body').css('opacity','0');
            $('body').animate({opacity:1},1000);
            var Pcolor=$('.contents p').css('background-color');
            $('.contents p').hover(function(){
                    $(this).css('background-color','yellow')
                },
                function(){
                    $(this).css('background-color',Pcolor);
                }
            );
            $('.contents h2').click(function(){
                $(this).animate({
                    opacity:0.25,
                    'margin-left':'+=20px'
                },1000).next().animate({
                    opacity:0.5
                },1000);
            });
            $(document).keydown(function(event){
                $('.styleChange').css('position','relative');
                var keyNumber=event.which;
                switch(keyNumber){
                    case 37:
                        $('.styleChange').animate({
                            'left':'-=20px'
                        },1000);
                        break;
                    case 38:
                        $('.styleChange').animate({
                            'top':'-=20px'
                        },1000);
                        break;
                    case 39:
                        $('.styleChange').animate({
                            'left':'+=20px'
                        },1000);
                        break;
                    case 40:
                        $('.styleChange').animate({
                            'top':'+=20px'
                        },1000);
                        break;  
                    default:
                        break;

                }
            });
            $(document).keyup(function(event){
                var keyNumber=event.which;
                switch(keyNumber){
                    case 37:
                    case 38:
                    case 39:
                    case 40:
                        $('.styleChange').stop(all,true);
                        //alert('hhhh');
                        break;
                    default:
                        break;
                }
            });
        });
    </script>
</head>
<body>
    <div class="styleChange">
        <h3>textChange</h3>
    </div>
    <div class="contents">
        <h2>weclome to my home</h2>
        <p>根据麦肯锡全球研究院的定义，大数据是指无法在一定时间内使用传统的数据库软件工具对其内容进行获取、管理和处理的数据集合。[1]而 IBM 公司在其发布的《理解大数据》白皮书中用数量、种类和速度三个特征来定义大数据。数量上，正在急剧增长，已经从 TB 级转向 PB 级，并且不可避免的会转向 ZB 级，预测到2020 年全球存储的数据会达到 35ZB。种类上，由于数据来源日趋多样化，现在需要处理的数据不仅包含传统的结构化数据，还包含原始数据、半结构化数据和非结构化数据，而且后者的比重越来越大。速度上，强调数据产生速度在加速和在数据产生的过程中分析数据而不是分析静止数据。
        除此之外，还有专家认为大数据具有“信息价值大与冗余信息多”的特征，并把“容量大、生成快速、多样性、价值大但密度很低”作为大数据的四大属性。在传感器、互联网、物联网、无线网快速发展的今天，我们学习生活、企业各种活动、政府运行和管理的每一个环节都产生大量的数据并且不同程度被记录，因此本文认为大数据是在信息技术基础上，人类学习、生活、生产、管理活动过程中产生并被记录的数量巨大、种类繁多且蕴含巨大价值的数据集合。对于管理来说，大数据的本质是“从快速、巨量、多样的数据中提取信息和知识，实现数据驱动科学决策”。
        </p>
    </div>  
</body>
</html>