Web前端学习：jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】

街三仔

已于 2022-09-14 09:45:49 修改

阅读量989

点赞数 3

分类专栏： Web前端学习文章标签： jquery 前端学习

于 2022-03-17 08:58:23 首次发布

本文链接：https://blog.csdn.net/Oh_Python/article/details/123541222

版权

Web前端学习专栏收录该内容

9 篇文章 29 订阅

订阅专栏

1、jquery操作样式类名

$("#div1").addClass("divClass2") ——为id为div1的对象追加样式divClass2 $("#div1").removeClass("divClass") ——移除id为div1的对象的class名为divClass的样式 $("#div1").removeClass("divClass divClass2") ——移除多个样式 $("#div1").toggleClass("anotherClass") ——重复切换anotherClass样式（如果添加了样式就移除，如果没有就添加）

代码演示

运行结果

原操作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //加载的时候颜色变成红色，字体大小40px
            $('div').addClass('font');
        })
    </script>
    <style>
        .font{
            color:red;
            font-size:40px;
        }
    </style>
</head>
<body>
    <div>
        这是内容
    </div>
</body>
</html>

二、添加元素

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

1、append()演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            $('div').append('<p>这是添加的内容</p>')
        })
    </script>
</head>
<body>
    <div>
        这是内容
    </div>
</body>
</html>

运行结果，可以看到p标签被添加在div标签的内部，同时添加时会根据标签进行页面渲染，而不是：<p>这是添加的内容</p>

2、prepend()演示


$(function () {
    $('div').prepend('<p>这是添加的内容</p>')
})

运行结果，可以看到p标签被添加到了div标签内的内容前

3、after()演示

$(function () {
    $('div').after('<p>这是添加的内容</p>')
})

运行结果，可以看到p标签被添加到div标签之后

4、before()演示

$(function () {
    $('div').before('<p>这是添加的内容</p>')
})

运行结果，可以看到p标签被添加到div标签前

三、jQuery-CSS()方法

返回指定的 CSS 属性的值 - css("propertyname");

设置指定的 CSS 属性after() - css("propertyname","value");

设置多个css属性 - css({"propertyname":"value","propertyname":"value",...});

例：$("div").css("color" , "red") ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            $('div').css("color","red");
        })
    </script>
</head>
<body>
    <div>
        这是内容
    </div>
</body>
</html>

运行结果，可以看到div元素的样式发生了改变

街三仔

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
Web前端学习：jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】

目录1、jquery操作样式类名代码演示二、添加元素1、append()演示2、prepend()演示3、after()演示4、before()演示三、jQuery-CSS()方法小前奏~作者简介：大家好，我是暴揍Python的阿峰，大家可以叫我阿峰哦~个人主页：暴揍Python的阿峰博客推荐专栏：Python入门全教程 Excel自动化办公 MySQL、Mongodb、redis数据库学习 Python爬虫学习如果觉得文章还不错的...
复制链接

扫一扫