2018-08-24

作者: zzzsssr | 来源:发表于2018-08-27 20:27 被阅读17次

胸中怀有强烈的愿望
国画印象（二）
2018-08-24
SEO新手初入門，認識什麼是SEO教學 Read more at
异常处理思考🤔
演唱会 | 本周火爆演唱会都在这儿了
【2018-08-25】A股主要指数的市盈率(PE)估值高度
420期六项精进-日精进打卡
(码友推荐)2018-08-24 .NET及相关开发资讯速递
懂你 L4-U1-2-Listening*2

js基础5

1、选择器

基本
:first :last :even :odd :not :eq()
内容
contains 内容包含某某某的节点
has 写一个选择器，

$('li:has(a)')

li里面有a的li
属性
input[name] 有属性name的input
input[name=user] name属性等于user的input
input[name!=user] name属性不等于user的input
有属性name的input

$('input[name]').css('backgroundColor', 'cyan')

属性name值为user的input

$('input[name=user]').css('backgroundColor', 'cyan')

属性name值不为user的input

$('input[name!=user]').css('backgroundColor', 'cyan')

属性name值以user开头的input

$('input[name^=user]').css('backgroundColor', 'cyan')

属性name值以user结束的input

$('input[name$=user]').css('backgroundColor', 'cyan')

子元素
:first-child
:last-child
:nth-child
找到li标签，li是第一个儿子节点的li标签

$('li:first-child').css('backgroundColor', 'cyan')

找到li标签，li是最后一个儿子节点的li标签

$('li:last-child').css('backgroundColor', 'cyan')

找li标签，找指定下标的li标签，这个下标是儿子节点里面的第几个

$('li:nth-child(1)').css('backgroundColor', 'cyan')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <ul>
        <li>黄晓明</li>
        <li>关晓彤</li>
        <li>李小龙</li>
        <li>李小璐</li>
        <li>高晓松</li>
        <li><a href="#">陈妍希</a></li>
    </ul>
    <ol>
        <!-- <b>桃谷绘里香</b> -->
        <li>苍老师</li>
        <li>小泽玛利亚</li>
        <li>波多野结衣</li>
        <li>大桥未久</li>
        <li>泷泽萝拉</li>
    </ol>
    <div>那些年我们一起追过的女孩</div>
    <input type="text" name="user">
    <input type="password" name="userpwd">
    <!-- <input type="checkbox" name="like">
    <input type="radio" name="sex"> -->
    <input type="text">
</body>
</html>
<script>
$(function () {
       $('li:contains("晓")').css('backgroundColor', 'cyan')

    // 找li标签，li标签里面有a的节点
    // $('li:has(a)').css('backgroundColor', 'cyan')
    // 找ul标签，里面有a的节点，不论层级
    // $('ul:has(a)').css('backgroundColor', 'cyan')

    // 有属性name的input
    // $('input[name]').css('backgroundColor', 'cyan')
    // 属性name值为user的input
    // $('input[name=user]').css('backgroundColor', 'cyan')
    // 属性name值不为user的input
    // $('input[name!=user]').css('backgroundColor', 'cyan')
    // 属性name值以user开头的input
    // $('input[name^=user]').css('backgroundColor', 'cyan')
    // 属性name值以user结束的input
    // $('input[name$=user]').css('backgroundColor', 'cyan')

    // 找到li标签，li是第一个儿子节点的li标签
    // $('li:first-child').css('backgroundColor', 'cyan')
    // 找到li标签，li是最后一个儿子节点的li标签
    // $('li:last-child').css('backgroundColor', 'cyan')
    // 找li标签，找指定下标的li标签，这个下标是儿子节点里面的第几个
    // $('li:nth-child(1)').css('backgroundColor', 'cyan')
})
</script>

2、样式添加、属性获取

css({})
可以连写-链式操作

$('#lala').css('backgroundColor', 'red').css('fontSize', '30px')

可以传递一个js对象，直接全部修改

$('#lala').css({backgroundColor: 'blue', fontSize: '40px'})

attr()
获取指定节点的class属性

console.log($('#lala').attr('class'))

只能获取第一个符合要求的id属性

console.log($('.libai').attr('id'))

通过eq选择第二个符合要求的id属性

console.log($('.libai:eq(1)').attr('id'))

给指定节点添加属性

$('#lala').attr('class', 'bai').attr('name', '狗蛋')

removeAttr()

将指定节点的属性删除

$('#lala').removeAttr('class')

prop()
经常用来设置checked、selected等属性，设置的值就是true、false
所有下标大于1的多选框选中

$('input:gt(1)').prop('checked', true)

将第二个下拉框设置为默认选中

$('#se > option:eq(2)').prop('selected', true)

addClass

$('#lala').addClass('hei')

removeClass
给指定的节点添加类名

$('#lala').addClass('hei')

给指定的节点移除指定的节点class名 bai

 $('#lala').removeClass('bai')

toggleClass
有bai这个class，那就是删除这个class，没有bai这个class，那就是添加class

 $('#lala').toggleClass('bai')

html()
读取或者设置节点内容，和innerHTML功能相同

console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))

text()
读取或者设置节点内容，和innerText功能相同
val()
读取input框里面的内容

 console.log($('#ip').val())

设置input框里面的内容

 console.log($('#ip').val('今天中午吃什么呢？'))

width()
height()
读取指定对象宽度不带px

console.log($('#dudu').width())

设置宽度不带px

console.log($('#dudu').width(300))

读取高度

console.log($('#dudu').height())

设置高度

console.log($('#dudu').height(400))

offset()
获取div的top值和left值

console.log($('#dudu').offset().top, $('#dudu').offset().left)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>样式和属性</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
    <style>
    #dudu {
        width: 400px;
        height: 500px;
        background-color: pink;
        position: absolute;
        top: 100px;
        left: 300px;
    }
    </style>
</head>
<body>
    <div id="lala" class="">
        <b>
        朝辞白帝彩云间
        千里江陵一日还
        两岸猿声啼不住
        轻舟已过万重山
        </b>
    </div>
    <div class="libai" id="laowang">
        李白乘舟将欲行
        忽闻岸上踏歌声
        桃花潭水深千尺
        不及汪伦送我情
    </div>
    <li><input type="checkbox">抽烟</li>
    <li><input type="checkbox">喝酒</li>
    <li><input type="checkbox">烫头</li>
    <li><input type="checkbox">足疗</li>

    <select name="" id="se">
        <option value="">请选择</option>
        <option value="">四川</option>
        <option value="">河南</option>
        <option value="">云南</option>
    </select>

    <input id="ip" type="text" value="请输入用户名哈哈">

    <div id="dudu"></div>
</body>
</html>
<script>
$(function () {
    // 可以连写-链式操作
       $('#lala').css('backgroundColor', 'red').css('fontSize', '30px')
    // 可以传递一个js对象，直接全部修改
    // $('#lala').css({backgroundColor: 'blue', fontSize: '40px'})

    // 获取指定节点的class属性
    // console.log($('#lala').attr('class'))
    // 只能获取第一个符合要求的id属性
    // console.log($('.libai').attr('id'))
    // 通过eq选择第二个符合要求的id属性
    // console.log($('.libai:eq(1)').attr('id'))
    // 给指定节点添加属性
    // $('#lala').attr('class', 'bai').attr('name', '狗蛋')

    // 将指定节点的属性删除
    // $('#lala').removeAttr('class')

    // 所有下标大于1的多选框选中
    // $('input:gt(1)').prop('checked', true)
    // 将第二个下拉框设置为默认选中
    // $('#se > option:eq(2)').prop('selected', true)

    // 给指定的节点添加类名
    // $('#lala').addClass('hei')
    // 给指定的节点移除指定的节点class名  bai
    // $('#lala').removeClass('bai')

    // 有bai这个class，那就是删除这个class，没有bai这个class，那就是添加class
    // $('#lala').toggleClass('bai')

    // 读取或者设置节点内容，和innerHTML功能相同
    // console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回'))

    // console.log($('#lala').text())
    // console.log($('#lala').html())

    // 读取input框里面的内容
    // console.log($('#ip').val())
    // 设置input框里面的内容
    // console.log($('#ip').val('今天中午吃什么呢？'))

    // 读取指定对象宽度  不带px
    // console.log($('#dudu').width())
    // 设置宽度  不带px
    // console.log($('#dudu').width(300))
    // 读取高度
    // console.log($('#dudu').height())
    // 设置高度
    // console.log($('#dudu').height(400))

    // 获取div的top值和left值
    // console.log($('#dudu').offset().top, $('#dudu').offset().left)
})
</script>

3、js对象和jquery对象转化

js对象和jquery对象的函数不能通用
js对象和jquery对象相互转化

  var odiv = document.getElementById('dudu')

js对象转化jquery对象

console.log($(odiv).width())

jquery对象转化为js对象

console.log($('#dudu')[0].style.width)
console.log($('.lala')[1].style.width)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相互转化</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div id="dudu" class="lala" style="width:300px; height:400px; background-color: purple;"></div>
    <div class="lala" style="width:200px; height:400px; background-color: orange;"></div>
</body>
</html>
<script>
$(function () {
    // var odiv = document.getElementById('dudu')
    // js对象转化jquery对象
    // console.log($(odiv).width())

    // jquery对象转化为js对象
    // console.log($('#dudu')[0].style.width)
    // console.log($('.lala')[1].style.width)
})

</script>

转化方式为注释内容

4、文档处理

append
appendTo
prepend
prependTo
向父节点添加子节点

$('#car').append('<li>本田飞度</li>')

通过子节点调用，添加到父节点

$('<li>本田飞度</li>').appendTo($('#car'))

通过父节点调用，添加到父节点的最前面

 $('#car').prepend('<li>本田飞度</li>')

通过子节点调用，添加到父节点的最前面

$('<li>通用别克</li>').prependTo($('#car'))

after
before
是兄弟节点关系，在mao节点后面添加一个指定节点

 $('#mao').after('<li>铃木雨燕</li>')

是兄弟节点关系，在mao节点前面添加一个指定节点

$('#mao').before('<li>铃木雨燕</li>')

empty
remove
清空指定节点里面的内容，节点还在

$('#mao').empty()

原生js中：父节点.removeChild(子节点)
通过子节点直接调用，删除当前节点

 $('#mao').remove()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文档处理</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <ul id="car">
        <li>长安奔奔</li>
        <li>五菱宏光</li>
        <li id="mao">吉利熊猫</li>
        <li>大众捷达</li>
        <li>丰田卡罗拉</li>
        <li>奇瑞qq</li>
    </ul>
</body>
</html>
<script>
$(function () {
    // 向父节点添加子节点
    // $('#car').append('<li>本田飞度</li>')
    // 通过子节点调用，添加到父节点
    // $('<li>本田飞度</li>').appendTo($('#car'))
    // 通过父节点调用，添加到父节点的最前面
    // $('#car').prepend('<li>本田飞度</li>')
    // 通过子节点调用，添加到父节点的最前面
    // $('<li>通用别克</li>').prependTo($('#car'))

    // 是兄弟节点关系，在mao节点后面添加一个指定节点
    // $('#mao').after('<li>铃木雨燕</li>')
    // 是兄弟节点关系，在mao节点前面添加一个指定节点
    // $('#mao').before('<li>铃木雨燕</li>')

    // $('#mao').insertAfter('<li>铃木雨燕</li>')

    // 清空指定节点里面的内容，节点还在
    // $('#mao').empty()
    // 原生js中：父节点.removeChild(子节点)
    // 通过子节点直接调用，删除当前节点
    // $('#mao').remove()
})
</script>

5、筛选和查找

$('li').eq(n).css('backgroundColor', 'red')
$('li:eq(0)').css('backgroundColor', 'red')
$('li:eq(' + 0 + ')').css('backgroundColor', 'red')

first
last
第一个li 和:first 一模一样

$('li').first().css('backgroundColor', 'red')

最后一个li 和:last 一模一样

$('li').last().css('backgroundColor', 'red')

hasClass
判断有没有这个class,有就返回true，没有返回false

console.log($('li').eq(0).hasClass('wang'))

filter
找到所有li，过滤出来 .jing 的这些li

$('li').filter('.jing').css('backgroundColor', 'cyan')

slice
取出符合要求li里面的第0个和第1个 [start, end)

$('li').slice(0, 2).css('backgroundColor', 'cyan')

children
所有的儿子节点

$('#nan').children().css('backgroundColor', 'red')

儿子节点中有 .feng 的节点

$('#nan').children('.feng').css('backgroundColor', 'red')

find
去子孙节点中查找所有的 .feng 的节点

$('#nan').find('.feng').css('backgroundColor', 'cyan')

next
nextAll
指定对象的下一个兄弟节点

$('#wu').next().css('backgroundColor', 'cyan')

指定对象的后面所有的节点

$('#wu').nextAll().css('backgroundColor', 'cyan')

prev 指定对象的上一个兄弟节点
prevAll 指定对象的上面所有的兄弟节点
parent
parents
找到当前节点的父节点

$('.lin').parent().css('backgroundColor', 'cyan')

查找得到所有的上层节点

$('#qing').parents().css('backgroundColor', 'cyan')

查找得到指定的上层节点

$('#qing').parents('div').css('backgroundColor', 'cyan')

siblings
查找qing节点所有的兄弟节点

 $('#qing').siblings().css('backgroundColor', 'orange')

查找qing节点所有的兄弟节点，而且是.lin的兄弟节点

$('#qing').siblings('.lin').css('backgroundColor', 'orange')

筛选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>筛选和查找</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <ul>
        <li class="jing">王静</li>
        <li>闫晓红</li>
        <li class="jing">刘慧芳</li>
        <li>李琳</li>
    </ul>
</body>
</html>
<script>
$(function () {
    // var n = 1
    // 选中第几个，eq里面可以写一个变量
    // $('li').eq(n).css('backgroundColor', 'red')
    // $('li:eq(0)').css('backgroundColor', 'red')
    // $('li:eq(' + 0 + ')').css('backgroundColor', 'red')

    // 第一个li   和:first 一模一样
    // $('li').first().css('backgroundColor', 'red')
    // 最后一个li   和:last 一模一样
    // $('li').last().css('backgroundColor', 'red')

    // 判断有没有这个class,有就返回true，没有返回false
    // console.log($('li').eq(0).hasClass('wang'))

    // 找到所有li，过滤出来 .jing 的这些li
    // $('li').filter('.jing').css('backgroundColor', 'cyan')

    // 取出符合要求li里面的第0个和第1个   [start, end)
    // $('li').slice(0, 2).css('backgroundColor', 'cyan')
})
</script>

查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查找</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div>
        <ul id="nan">
            <li id="guan">陈冠希</li>
            <li id="wu">吴彦祖</li>
            <li class="feng">谢霆锋</li>
            <li>梁朝伟</li>
            <li>李云龙</li>
            <ol>
                <li class="lin">关之琳</li>
                <li class="feng">林青霞</li>
                <li>王祖贤</li>
            </ol>
        </ul>
    </div>

    <div>
        <ul>
            <li>李白</li>
            <li>杜甫</li>
            <li>白居易</li>
        </ul>
        <ol>
            <li id="qing">李清照</li>
            <li class="lin">苏轼</li> 
            <li>王安石</li>
            <li class="lin">苏小妹</li>
        </ol>
    </div>
</body>
</html>
<script>
$(function () {
    // 所有的儿子节点
    // $('#nan').children().css('backgroundColor', 'red')
    // 儿子节点中 有 .feng 的节点
    // $('#nan').children('.feng').css('backgroundColor', 'red')

    // 去子孙节点中查找所有的 .feng 的节点
    // $('#nan').find('.feng').css('backgroundColor', 'cyan')

    // 指定对象的下一个兄弟节点
    // $('#wu').next().css('backgroundColor', 'cyan')
    // 指定对象的后面所有的节点
    // $('#wu').nextAll().css('backgroundColor', 'cyan')

    // 指定对象的上一个兄弟节点
    // $('#guan').prev().css('backgroundColor', 'cyan')

    // 找到当前节点的父节点
    // $('.lin').parent().css('backgroundColor', 'cyan')
    // 查找得到所有的上层节点
    // $('#qing').parents().css('backgroundColor', 'cyan')
    // 查找得到指定的上层节点
    // $('#qing').parents('div').css('backgroundColor', 'cyan')

    // 查找qing节点所有的兄弟节点
    // $('#qing').siblings().css('backgroundColor', 'orange')
    // 查找qing节点所有的兄弟节点，而且是.lin的兄弟节点
    // $('#qing').siblings('.lin').css('backgroundColor', 'orange')
})
</script>

6、事件

添加事件

        $('div).click(function () {})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加事件</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div id="dudu" style="width:300px; height:300px; background-color: red;"></div>
    <div class="didi" style="width:300px; height:300px; background-color: yellow;"></div>
    <div class="didi" style="width:300px; height:300px; background-color: cyan;"></div>
</body>
</html>
<script>
$(function () {
    /*
    $('.didi').click(function () {
        alert('滴滴打车我喜欢')
    })
    $('#dudu').click(function () {
        // console.log(this)
        // 获取到背景色
        var color = $(this).css('backgroundColor')
        console.log(color)
        if (color == 'rgb(255, 0, 0)') {
            $(this).css('backgroundColor', 'gold')
        } else {
            $(this).css('backgroundColor', 'red')
        } 
    }) */
    // 事件绑定
    // $('#dudu').on('click', function () {
    //     alert('给我一个粉红的回忆')
    // })
    // function lala() {
    //     alert('夏天夏天悄悄过去')
    // }
    // $('#dudu').on('click', lala)
    // $('#dudu').off('click', lala)

    // 绑定的函数只能执行一次
    // $('#dudu').one('click', lala)
})
</script>

事件绑定
on off one
绑定事件

        $('div').on('click', test1)
        $('div').on('click', test2)

取消事件绑定

        $('div').off('click', test2)

事件只能触发一次

        $('div').one('click', test2)

取消冒泡

        ev.stopPropagation()

阻止默认行为

        ev.preventDefault()

获取鼠标坐标

        ev.pageX, ev.pageY

index
得到指定jquery对象在前面数组中的下标

 console.log($('div').index($('#heng')))

获取下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件其他</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div class="wai" style="width:400px; height:400px; background-color:red;">
        <div class="nei" style="width:200px; height:200px; background-color:yellow;">
        </div>
    </div>
    <a id="oa" href="http://www.baidu.com/">百度一下</a>
</body>
</html>
<script>
$(function () {
    
    $('.wai').click(function (ev) {
        // alert('这是外面的衣服')
        console.log(ev.pageX, ev.pageY)
    })
    /*
    // 取消事件冒泡
    $('.nei').click(function (ev) {
        alert('这里里面的衣服')
        ev.stopPropagation()
    })*/

    // 阻止默认行为
    // $('#oa').click(function (ev) {
    //     alert('悄悄问圣僧,女儿美不美')
    //     ev.preventDefault()
    // })
})
</script>

其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件其他</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div class="wai" style="width:400px; height:400px; background-color:red;">
        <div class="nei" style="width:200px; height:200px; background-color:yellow;">
        </div>
    </div>
    <a id="oa" href="http://www.baidu.com/">百度一下</a>
</body>
</html>
<script>
$(function () {
    
    $('.wai').click(function (ev) {
        // alert('这是外面的衣服')
        console.log(ev.pageX, ev.pageY)
    })
    /*
    // 取消事件冒泡
    $('.nei').click(function (ev) {
        alert('这里里面的衣服')
        ev.stopPropagation()
    })*/

    // 阻止默认行为
    // $('#oa').click(function (ev) {
    //     alert('悄悄问圣僧,女儿美不美')
    //     ev.preventDefault()
    // })
})
</script>

7、动画
show()
参数1：动画的事件
参数2：动画完毕之后执行的函数

        $('#dudu').show(5000, function () {
            alert('菊花残,满地伤')
        })

hide()
和show一样

$('#dudu').hide(5000, fn)

slidedown()
原来不显示，动画下拉显示

$('#dudu').slideDown(5000)

slideup()
原来显示，动画的上拉消失
slideToggler()
如果隐藏就下拉显示，如果显示就上拉消失
fadeIn()
慢慢的显示出来

$('#dudu').fadeIn(5000)

fadeOut()
慢慢的消失

$('#dudu').fadeOut(5000)

fadeTo()

5秒之内，透明度变为0.01

$('#dudu').fadeTo(5000, 0.01)

fadeToggle()
如果隐藏就淡入显示，如果显示就淡出消失
自定义的动画效果
animate()
自定义动画

$('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)

stop()
停止动画

$('#dudu').stop()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画</title>
    <script src="jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
    <div id="dudu" style="width:300px; height: 200px; background-color:red; display: block; position: absolute; top: 10px; left: 0px;"></div>
    <!-- <div style="clear: both;"></div> -->
    <button id="btn" style="position: absolute; top:250px;">点我看动画</button>
</body>
</html>
<script>
$(function () {
    $('#dudu').click(function () {
        // 参数1：动画的事件
        // 参数2：动画完毕之后执行的函数
        // $('#dudu').show(5000, function () {
        //     alert('菊花残,满地伤')
        // })

        // $('#dudu').hide(5000)
        
        // $('#dudu').slideDown(5000)

        // $('#dudu').slideToggle(5000)

        // 慢慢的显示出来
        // $('#dudu').fadeIn(5000)

        // 慢慢的消失
        // $('#dudu').fadeOut(5000)

        // 5秒之内，透明度变为0.01
        // $('#dudu').fadeTo(5000, 0.01)

        // 自定义动画
        // $('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000)

        $('#dudu').animate({left: 600}, 5000, function () {
            $('#dudu').animate({top: 600}, 5000)
        })
        // $('#dudu').animate({top: 600}, 5000)
    })

    $('#btn').click(function () {
        $('#dudu').stop()
    })
    
})
</script>

胸中怀有强烈的愿望
戴师傅 2018-08-24 2018-08-24 20:32 打开App （稻盛哲学学习会）打卡第12丨天姓名...
国画印象（二）
小禾画于2018-08-24
2018-08-24
2018-08-24 这星期把公司宣传资料熟背，以便交流。
SEO新手初入門，認識什麼是SEO教學 Read more at
slivenredSEO專家最新更新時間： 2018-08-24 at 04:26 下午 bySliven 你是...
异常处理思考🤔
源于一行log：[2018-08-24 10:28:07,042: ERROR/MainProcess] 5411...
演唱会 | 本周火爆演唱会都在这儿了
2018『A CLASSIC TOUR 学友·经典』世界巡回演唱会 - 澳门站 2018-08-24 周五 20:...
【2018-08-25】A股主要指数的市盈率(PE)估值高度
中证1000(SH000852)- 2018-08-24日，当前值：21.5463，平均值：51.8，中位数...
420期六项精进-日精进打卡
420期六项精进-日精进打卡雷PetTing 2018-08-24 22:05 · 字数 581 · 阅读 0 ...
(码友推荐)2018-08-24 .NET及相关开发资讯速递
(码友推荐)2018-08-24 .NET及相关开发资讯速递： 1.Rider 2018.2 发布，跨平台 .NE...
懂你 L4-U1-2-Listening*2
流利说 D58 2018-08-24 五一、复习 Level4-Unit1-Part1*Learning- Vo...