jquery学习-常用dom属性相关方法(2)

最新推荐文章于 2024-07-05 14:21:58 发布

深山老妖&

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量108

点赞数

分类专栏： jquery学习笔记文章标签： jquery常用属性方法（2）

本文链接：https://blog.csdn.net/qq_39573741/article/details/84570413

版权

jquery学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

dom属性相关方法

css()方法：设置或者获取css样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // $('button:eq(0)').click(function () {
            //     $('li').css('background','red')
                //点击下标为0的这个button时，找到li元素，设置它的css样式
            // })

            // $('button:first').click(function () {
            //     $('li').css({
            //         'background':'red',
            //         'font-size':'18px',
            //         'color':'white'
            //     })
                    //当要设置一个元素的多个样式时，可以用传入一个对象，用名词对的方式。
            // })

            $('button:eq(0)').click(function () {
                $('li').css('background',function (index) {
                    if (index % 2 == 0) {
                        return 'red'
                    }
                    /*点击下标为0的这个button时，找到li元素，当它的下标为偶数的时候，
                    将它的css样式设置为红色。
                    */
                })
            })
        })
    </script>
</head>
<body>
<ul>
    <li>nodeing_1</li>
    <li>nodeing_2</li>
    <li>nodeing_3</li>
    <li>nodeing_4</li>
    <li>nodeing_5</li>
    <li>nodeing_6</li>
    <li>nodeing_7</li>
    <li>nodeing_8</li>
    <li>nodeing_9</li>
    <li>nodeing_10</li>
</ul>

<button>设置样式</button>
<button>取消样式</button>
</body>
</html>