jQuery（二）——操作标签、动画

（一）jQuery中的入口函数

$(document).ready(function() {
    函数体代码
})

只需要等DOM树创建完毕就可以执行。
简写格式：（推荐使用）

$(function(){
    函数体代码
})

（二）jQuery操作标签的属性

1.设置标签的属性

语法：jQuery对象.attr(name,value);

代码举栗：

<body>
    <div title="im div" pid="10010"></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('div').attr('pwd','111111');  //设置
        $('div').attr('pid','10086');   //修改
    </script>
</body>

2.获取标签的属性

语法：jQuery对象.attr(name);

代码举栗：

<body>
    <div title="im div" pid="10010"></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('div').attr('pid','10086');   //修改
        var v = $('div').attr('pid');  
        console.log(v);  //10086
    </script>
</body>

3.移除标签的属性

语法：jQuery对象.removeAttr(name);

代码举栗：

<body>
    <div title="im div" pid="10010"></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('div').removeAttr('pid');
    </script>
</body>

4.放大镜切换案例

自定义标签：把未来需要的属性暂存到标签中

代码举栗：

<body>
    <div class="w">
        <div class="leftBox">
            <div class="top"></div>
            <ul>
                <li class="active">
                    <img src="img/s1.jpg" msrc="m1.jpg" bsrc="b1.jpg">
                </li>
                <li>
                    <img src="img/s2.jpg" msrc="m2.jpg" bsrc="b2.jpg">
                </li>
                <li>
                    <img src="img/s3.jpg" msrc="m3.jpg" bsrc="b3.jpg">
                </li>
            </ul>
        </div>
        <div class="rightBox">
            <img src="img/b1.jpg" alt="">
        </div>
    </div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var path = 'img';
        $('li').mouseenter(function () {
            //active类名控制当前小图的红色边框
            $(this).addClass('active').siblings().removeClass(); 
            //中图
            var msrc = $(this).find('img').attr('msrc');
            $('.top img').attr('src', path + msrc);
            //大图
            var msrc = $(this).find('img').attr('bsrc');
            $('.rightBox img').attr('src', path + bsrc);
        });
    </script>
</body>

5.操作表单元素属性

<body>
    <input type="checkbox" checked>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var v = $('input').attr('checked');
        //打印字符串checked，而不是布尔值。如果input中没有checked，打印undefined
        console.log(v); 
    </script>
</body>

所以不建议使用attr操作表单元素的属性。
使用prop方法，prop方法可以操作表单元素属性。
语法：$('input').prop('属性名');
针对表单元素：checked selected disabled都是布尔值，应该返回true或false。

代码举栗：

<body>
    <input type="checkbox" checked>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var v = $('input').prop('checked');
        console.log(v);   //选中(有checked))打印true，没选中打印false
        //使用原生DOM方法也可以操作，但不建议使用
        // var v = $('input')[0].checked;
        // console.log(v);  //false
    </script>
</body>

6.点击按钮发送验证码案例

<body>
    <input type="text" value="10010">
    <button>发送验证码</button>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('button').click(function() {
            $(this).prop('disabled', true);  //禁用按钮
            var time = 60;
            $('button').text(time + 's后重新发送');
            var flag = setInterval(function() {
                time--;
                $('button').text(time + 's后重新发送');
                if(time == 0) {
                    clearInterval(flag);
                    $('button').text('发送验证码');
                    $('botton').prop('disabled',false);
                }
            },1000);
        });
    </script>
</body>

在定时器里面'button'不能改成this，但定时器外部的this代表的是按钮。因为在定时器中，this默认指向window。
可以在外部var that = this; 把this暂存到that中，然后在定时器内部使用$(that)。

（三）jQuery操作标签内容

1.操作标签内部文本

获取的仅仅是文本：（相当于DOM中的innerText）
语法：jQuery对象.text();
设置语法：jQuery对象.text('文本内容');

代码举栗：

<body>
    <div>内容</div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        //获取
        var v = ('div').text();
        console.log(v); //返回字符串：div中的内容
        //设置
        var s = ('div').text('我是新内容');
        //设置完毕后，重新返回点之前的jQuery对象。所以.text()后面还可以继续链式调用其他方法，比如.css()
        console.log(s); 
    </script>
</body>

2.操作标签内部所有内容

获取文本和内部标签：（相当于DOM中的innerHTML）
语法：jQuery对象.html();
设置标签时标签会被渲染：
语法：jQuery对象.html('文本内容');

代码举栗：

<body>
    <div>内容</div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('div').html('<h2>内容</h2>').css('color','blue'); //后面可以继续链式调用
        var v = $('div').html();
        console.log(v); //打印<h2>内容</h2>
    </script>
</body>

3.操作表单元素的内容

获取表单元素的value：（相当于DOM中的value）
语法：jQuery对象.val();
设置表单元素的value：
语法：jQuery对象.val('文本内容');

代码举栗：

<body>
    <input type="text">
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('input').val('张三');
        var v = $('input').val().css('color','red'); //报错，返回的不是jQuery对象，不能.css
        console.log(v);
    </script>
</body>

（四）jQuery动画

1.基本动画

1）缩放
显示语法：jQuery对象.show(speed,easing,fn);
隐藏语法：jQuery对象.hide(speed,easing,fn);
切换语法：jQuery对象.toggle(speed,easing,fn);
三个属性都是可选的。
speed表示动画时长（速度），单位毫秒
easing表示运动方式，默认swing缓冲，linear匀速。

代码举栗：

    <style>
        div {
            width: 500px;
            height: 500px;
            background: pink;
        }
    </style>
<body>
    <button class="btn1">显示</button>
    <button class="btn2">隐藏</button>
    <button class="btn3">切换</button>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        //显示
        $('.btn1').click(function() {
            // $('div').show();//直接显示。实际上是控制display的值
            $('div').show(1000);
        });
        //隐藏
        $('.btn2').click(function() {
            $('div').hide(1000); 
        });
        //切换
        $('.btn3').click(function() {
            $('div').toggle(1000); 
        });
    </script>
</body>

第三个参数fn：是函数

代码举栗：

<body>
    <button class="btn1">显示</button>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('.btn1').click(function() {
            $('div').show(1000, function() {
                //动画完毕后要执行的程序
                $('div').css('background','red');
                //不能写在.show的外面。因为show中有定时器，定时器代码会最后执行。
            });
        });
    </script>
</body>

2）上卷下拉
显示语法：jQuery对象.slideDown(speed,easing,fn);
隐藏语法：jQuery对象.slideUp(speed,easing,fn);
切换语法：jQuery对象.slideToggle(speed,easing,fn);

代码举栗：

<body>
    <button class="btn1">显示</button>
    <button class="btn2">隐藏</button>
    <button class="btn3">切换</button>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        //显示
        $('.btn1').click(function() {
            $('div').slideDown(1000);
        });
        //隐藏
        $('.btn2').click(function() {
            $('div').slideUp(1000); 
        });
        //切换
        $('.btn3').click(function() {
            $('div').slideToggle(1000); 
        });
    </script>
</body>

3）淡入淡出
显示语法：jQuery对象.fadeIn(speed,easing,fn);
隐藏语法：jQuery对象.fadeOut(speed,easing,fn);
切换语法：jQuery对象.fadeToggle(speed,easing,fn);

代码举栗：

<body>
    <button class="btn1">显示</button>
    <button class="btn2">隐藏</button>
    <button class="btn3">切换</button>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        //显示
        $('.btn1').click(function() {
            $('div').fadeIn(1000);
        });
        //隐藏
        $('.btn2').click(function() {
            $('div').fadeOut(1000); 
        });
        //切换
        $('.btn3').click(function() {
            $('div').fadeToggle(1000); 
        });
    </script>
</body>

2.自定义动画

语法：animate(params,[speed],[easing],[fn]);
speed、easing、fn属性可选。
param需要传入一个对象。不可选，必须要写。

代码举栗：

    <style>
        div {
            width: 200px;
            height: 200px;
            background: pink;
            position: absolute;
            left: 0;
        }
    </style>
<body>
    <button>运动</button>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('button').click(function() {
            $('div').animate({ 
            //在jQuery中只有样式为数值的才可以动画。比如background不可以设置动画
                left: 1000,
                width: 500,
                height: 500
            },2000,linear);
        });
    </script>
</body>

3.停止动画

语法：jQuery对象.stop(clearQueue,jumpToEnd);

clearQueue：
true表示清空该物体所有动画（清空队列）。
false表示仅仅清除当前正在运动这一个动画。默认是false

jumpToEnd：
true表示停止动画，并且直接完成运动目标。
false表示停止动画，保持当前停止的状态。不会运动到目标。默认是false

开发中常用的stop方法，一般不传入实参。使用默认值。在animate前面加stop()方法。

代码举栗：

    $('div').stop().animate({ left: 1000, width: 500, height: 500 },2000,linear);
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 195,980评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,422评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,130评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,553评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,408评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,326评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,720评论 3赞 386
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,373评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,678评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,722评论 2赞 312
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,486评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,335评论 3赞 313
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,738评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,283评论 1赞 251
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,692评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,893评论 2赞 335