【jQuery入门】链式编程、修改css、类操作和className的区别

文章目录

  • 前言
  • 一、链式编程
  • 二、修改css
    • 2.1 获取css的值
    • 2.2 设置单个css属性
    • 2.3 设置类样式
      • 添加类
      • 移除类
      • 切换类
  • 三、类操作与className的区别
  • 总结


前言

jQuery是一个流行的JavaScript库,广泛用于简化DOM操作和处理事件。在jQuery中,链式编程是一种强大的技术,允许在同一行上执行多个操作。本文将介绍jQuery中的链式编程、修改CSS、类操作以及className的区别。


一、链式编程

链式编程是jQuery的一项强大功能,允许在单个语句中执行多个操作。通过在每个操作之后返回jQuery对象,可以将多个方法链接在一起。例如:

// 链式编程示例
$("p").hide().addClass("myClass").slideDown();

在上面的例子中,hide()方法隐藏<p>元素,然后addClass(“myClass”)方法添加类,最后slideDown()方法显示元素。这使得代码更紧凑和可读。

简而言之就是把几行的东西合并成一行了

二、修改css

2.1 获取css的值

我们可以使用下面这个语句获取css的属性值

$('选择器').css('你要获取的属性名')

示例代码:

<script>
    $(function(){
        var li = $('li')
        var ul = $('u')
        li.css('color','pink')

        console.log($('li').css('color'));
    })
    
</script>

在这里插入图片描述

2.2 设置单个css属性

我们可以使用下面这个语句来设置单个css的属性:

$('选择器').css("要修改的属性名","属性值")

示例代码:

<script>
    $(function(){
        var li = $('li')
        var ul = $('u')
        li.css('color','pink')
    })
    
</script>

要连续设置可以这样:

<script>
    $(function(){
        var li = $('li')
        var ul = $('u')
        li.css('color':'pink',"font-size":"20px")
    })
    
</script>

属性名和属性值中间用:,不同的属性之间用,

2.3 设置类样式

添加类

$('选择器').addClass("你要添加的类名称")

示例代码:

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "jQuery.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid black;
        }

        .current{
            width: 100px;
            height: 20px;
            background-color: pink;
            border-radius: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <ul class="u">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</body>

    <script>
        $(function(){
            var li = $('li')
            var ul = $('u')
            
            li.addClass('current')
        })
        
    </script>

</html>

在这里插入图片描述

移除类

$('选择器').removeClass('你要移除的类')

示例代码:

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "jQuery.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid black;
        }

        .current{
            width: 100px;
            height: 20px;
            background-color: pink;
            border-radius: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <ul class="u">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</body>

    <script>
        $(function(){
            var li = $('li')
            var ul = $('u')
            
            li.addClass('current')
            li.removeClass('current')
        })
        
    </script>

</html>

切换类

$('选择器').toggleClass('你要切换成的类')

示例代码:

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "jQuery.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid black;
        }

        .current{
            width: 100px;
            height: 20px;
            background-color: pink;
            border-radius: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <ul class="u">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</body>

    <script>
        $(function(){
            var li = $('li')
            var ul = $('u')
            
            li.toggleClass('current')
        })
        
    </script>

</html>

三、类操作与className的区别

原生JS中className会覆盖元素原先里面的类名
jQuery里面类操作只是对指定类进行操作,不影响原先的类名


总结

本文介绍了jQuery中的链式编程、修改CSS、类操作以及className的区别。链式编程使得代码更紧凑和可读,css()方法用于修改元素的CSS属性,而类操作通过addClass()、removeClass()和toggleClass()方法实现。与之对应的原生JavaScript中使用className属性来进行类操作。这些功能使得使用jQuery更加便捷和灵活。通过灵活使用这些特性,您可以更高效地操作和控制页面元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/344696.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Tree-Shaking 作用和实现原理

一、什么是Tree-shaking Tree-shaking 它的名字来源于通过摇晃&#xff08;shake&#xff09;JavaScript代码的抽象语法树&#xff08;AST&#xff09;&#xff0c;是一种用于优化JavaScript代码的技术&#xff0c;主要用于移除未被使用的代码&#xff0c;使得最终生成的代码包…

【机组】计算机组成原理实验指导书.

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《机组 | 模块单元实验》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 ​ 目录 第一章 性能特点 1.1 系…

OpenTCS IDEA 全流程搭建和运行指南

OpenTCS IDEA 全流程搭建和运行指南 JDK安装下载JDK版本 openTCS源码下载IDEA 打开运行查看下载源码中gradle版本号下载gradle 二进制文件配置IDEA Gradle本地仓库IDEA打开openTCS项目运行顺序 JDK安装 下载JDK版本 JDK网址 注意&#xff1a; 请下载官方文档标准的java13JDK o…

httpClient忽略https的证书认证

忽略https证书认证代码: /*** 创建模拟客户端&#xff08;针对 https 客户端禁用 SSL 验证&#xff09;* return* throws Exception*/public static CloseableHttpClient createHttpClientWithNoSsl() throws Exception {// Create a trust manager that does not validate cer…

软考复习之UML设计篇

UML统一建模语言 构件图&#xff1a;描述系统的物理结构&#xff0c;它可以用来显示程序代码如何分解成模块 部署图&#xff1a;描述系统中硬件和软件的物理结构&#xff0c;它描述构成系统架构的软件构件&#xff0c;处理器和设备 用例图&#xff1a;描述系统与外部系统及用…

C++读取txt文件中的逐个字符

为了增加读取的灵活性&#xff0c;所以separator和filename都设置为在主函数中获取输入或者在函数中传参的视线方法 举个例子&#xff0c;txt文件如下&#xff1a; household;2;true; 首先声明一个读取数据的文件 void read_data_file(const string& filename,char se…

【STM32】USB程序烧录需要重新上电 软件复位方法

文章目录 一、问题二、解决思路2.1 直接插拔USB2.2 给芯片复位 三、解决方法3.1 别人的解决方法3.2 在下载界面进行设置 一、问题 最近学习STM32的USB功能&#xff0c;主要是想要使用虚拟串口功能&#xff08;VCP&#xff09;&#xff0c;发现每次烧录之后都需要重新上电才可以…

训练模型时 遇到速度过慢时的深思 速度提升 (From GPU CPU)

训练模型时 遇到速度过慢时的深思 & 速度提升 GPU查看GPU使用情况 配置单机多卡并行训练torch.nn.DataParallel平衡DataParallel带来的显存使用不平衡的问题torch.nn.parallel.DistributedDataParallel 多机多gpu训练Reference 使用半精度训练更好的显卡&#xff0c;更轻的…

编译和链接---C语言

引言 众所周知&#xff0c;C语言是一门高级的编程语言&#xff0c;是无法被计算机直接读懂的&#xff0c;C语言也不同于汇编PHP&#xff0c;无法直接翻译成机器语言&#xff0c;在学习的过程中&#xff0c;你是否好奇过我们所敲的C语言代码&#xff0c;是如何一步步翻译成机器…

Docker容器引擎(1)

目录 一.Docker 概述 为什么要用到容器&#xff1f; docker是什么&#xff1f; 容器与虚拟机的区别&#xff1f; docker的三个核心概念&#xff1a; 二.安装docker 安装依赖包&#xff1a; 安装 Docker-CE并设置为开机自动启动&#xff1a; 查看 docker 版本信息&#…

10个常考的前端手写题,你全都会吗?(下)

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热爱技术和分享&#xff0c;欢迎大家交流&#xff0c;一起学习进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 今天接着上篇再来分享一下10个常见的JavaScript手写功能。 目录 1.实现继承 ES5继…

docker 部署springboot项目

新建Dockerfile ## AdoptOpenJDK 停止发布 OpenJDK 二进制&#xff0c;而 Eclipse Temurin 是它的延伸&#xff0c;提供更好的稳定性 ## 感谢复旦核博士的建议&#xff01;灰子哥&#xff0c;牛皮&#xff01; FROM eclipse-temurin:8-jre## 将后端项目的 Jar 文件&#xff0c…

软考复习之多媒体篇

常用的计算公式 数据传输率&#xff08;单位:b/s&#xff09; 未压缩的数据传输率 采样频率&#xff08;Hz&#xff09;* 量化位数&#xff08;位&#xff09;* 声道数 波形声音经过数字化后的信息数据量&#xff08;单位:字节&#xff09; 声音信号数据量 数据传输率 * …

简单实现网络编程

1. 前置知识 在学习网络编程前&#xff0c;我们需要先了解一些前置知识 1.1 客户端和服务器 在网络编程中&#xff0c;客户端和服务器是两个关键的角色。 客户端是发起连接并向服务器发送请求的一方。客户端通常是一个应用程序或设备&#xff0c;通过与服务器建立连接&…

白盒测试和黑盒测试的区别

黑盒测试 等价类划分 白盒测试 灰盒测试

K8S图像化工具rancher

Rancher是一个开源的企业级多集群的k8s管理平台 Rancher和k8s的区别 都是为了容器的调度和编排系统&#xff0c;但是rancher不仅能够调度&#xff0c;还能挂历k8s集群&#xff0c;自带监控&#xff08;普罗米修斯&#xff09;&#xff0c;你哪怕不知带k8s是什么&#xff0c;一样…

跟着pink老师前端入门教程-day09

二十二、定位 22.1 为什么需要定位 1. 某个元素可以自由的在一个盒子内移动位置&#xff0c;并且压住其他盒子 2. 当我们滚动窗口时&#xff0c;盒子是固定屏幕某个位置的 解决方法&#xff1a; 1. 浮动可以让多个块级盒子一行没有缝隙排列显示&#xff0c;经常用于横向排…

C#用DateTime.Now静态属性返回日期的星期信息

目录 一、使用的方法 1.Now属性 2.ToString方法 二、示例 使用DateTime结构的Now静态属性&#xff0c;可以方便地获取系统日期信息。调用时间对象的ToString方法&#xff0c;在该方法的参数中添加适当的格式化字符串&#xff0c;将返回日期的星期信息。 一、使用的方法 1…

C语言入门到精通之练习实例10:打印楼梯,同时在楼梯上方打印两个笑脸(附源码)

题目&#xff1a;打印楼梯&#xff0c;同时在楼梯上方打印两个笑脸。 程序分析&#xff1a;用 ASCII 1 来输出笑脸&#xff1b;用i控制行&#xff0c;j来控制列&#xff0c;j根据i的变化来控制输出黑方格的个数。 如果出现乱码情况请参考【C 练习实例7】的解决方法。 // Cr…

uniapp 在static/index.html中添加全局样式

前言 略 在static/index.html中添加全局样式 <style>div {background-color: #ccc;} </style>static/index.html源码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"utf-8"><meta http-…