jQuery 的CSS方法、事件、CSS类、动画

最新推荐文章于 2024-07-25 10:45:42 发布

半糖奶咖

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量472

点赞数

文章标签： css jquery javascript

本文链接：https://blog.csdn.net/The_over/article/details/130139038

版权

jQuery 的CSS方法、事件、CSS类、动画

jQuery 的CSS方法

css() 方法设置或返回被选元素的一个或多个样式属性
1、返回样式属性对象.css(‘css属性名’)
获取颜色获取的是 rgb()
2、设置样式属性：对象.css(‘css属性名’，‘css属性值’)
事件：jQuery对象.事件类型(处理程序)

jQuery 的事件

事件：事件源.事件类型（事件的处理程序）事件类型不加 on

$('#box').click(function () {
        console.log('测试');
    })
    $('#box').dblclick(function () {
        console.log(this);
        $(this).css('width', '300px')
    })

    $('#box').mousemove(function () {
        $(this).css('background-color', 'green')
    })

    $('.input').blur(function () {
        console.log($(this).value);
        console.log($(this).val());
    })

jQuery 的CSS类

1、addClass() 向被选元素添加一个或多个类
2、removeClass() 向被选元素删除一个或多个类
3、toggleClass 切换类名

  <style>
        .box {
            height: 200px;
            background-color: aquamarine;
        }

        .box_1 {
            color: red;
        }

        .box_2 {
            font-size: 30px;
        }

        .select {
            background-color: black;
        }
    </style>

<body>
    <div class="box">
        我是盒子
    </div>
    <button id="add">添加</button>
    <button id="remove">删除</button>
    <button id="toggle">切换</button>
</body>

<script>
    //1、addClass()  向被选元素添加一个或多个类
    // document.getElementsByClassName('box')[0].className = 'box_1'
    $('#add').click(function () {
        $('.box').addClass('box_1 box_2')
    })
    // 2、removeClass()  向被选元素删除一个或多个类
    $('#remove').click(function () {
        $('.box').removeClass('box box_1')
    })
    // 3、toggleClass 切换类名
    $('#toggle').click(function () {
        $('body').toggleClass('select')
    })
</script>

jQuery 的动画

1、可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
2、fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
3、 slideDown() 方法用于向下滑动元素， slideUp() 方法用于向上滑动元素。
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
4、animate() 方法用于创建自定义动画。不可以改变颜色需要插件
jQuery stop() 方法用于停止动画或效果
回调函数在当前动画 100% 完成之后执行

 <style>
        #box {
            width: 400px;
            height: 400px;
            background-color: red;
        }

        #move {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

<body>
    <button id="hide">hide</button>
    <button id="show">show</button>
    <button id="toggle">toggle</button>
    <button id="fadeIn">fadeIn</button>
    <button id="fadeOut">fadeOut</button>
    <button id="fadeToggle">fadeToggle</button>
    <button id="slideDown">slideDown</button>
    <button id="slideUp">slideUp</button>
    <button id="slideToggle">slideToggle</button>
    <button id="animate">animate</button>
    <button id="STOP">STOP</button>
    <div id="box"></div>
    <div id="move">我是盒子会移动</div>
</body>

<script>
    // 1、可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
    $('#hide').click(function () {
        $('#box').hide()
    })
    $('#show').click(function () {
        $('#box').show()
    })
    // 可以使用 toggle() 方法来切换 hide() 和 show() 方法。
    $('#toggle').click(function () {
        $('#box').toggle()
    })
    // 2、fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。
    $('#fadeIn').click(function () {
        $('#box').fadeIn(2000)
    })
    $('#fadeOut').click(function () {
        $('#box').fadeOut(3000)
    })
    //  fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    $('#fadeToggle').click(function () {
        $('#box').fadeToggle(2000)
    })
    // 3、 slideDown() 方法用于向下滑动元素， slideUp() 方法用于向上滑动元素。
    $('#slideDown').click(function () {
        $('#box').slideDown(5000)
    })
    $('#slideUp').click(function () {
        $('#box').slideUp(5000, function () {
            $('#box').slideDown(5000)
        })
    })
    //  slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
    $('#slideToggle').click(function () {
        $('#box').slideToggle(5000)
    })
    // 4、animate() 方法用于创建自定义动画。 不可以改变颜色  需要插件
    $('#animate').click(function () {
        $('#move').animate({
            left: '100px',
            width: '300px',
            fontSize: '30px',
            'background-color': 'blue'
        }, 3000, function () {
            console.log('123123');
        })
    })
    // jQuery stop() 方法用于停止动画或效果
    $('#STOP').click(function () {
        $('#move').stop()
    })
    // 回调函数 在当前动画 100% 完成之后执行
</script>

半糖奶咖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 的CSS方法、事件、CSS类、动画

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。3、 slideDown() 方法用于向下滑动元素， slideUp() 方法用于向上滑动元素。2、fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。可以使用 toggle() 方法来切换 hide() 和 show() 方法。事件：jQuery对象.事件类型(处理程序)
复制链接

扫一扫