样式操作

样式类操作

//添加指定的css类名

$('元素选择器')addClass('类名');

//移除指定的css类名

removeClass();

//判断样式存不存在

hasClass();

////切换css类名,有则删除,无则增加

toggleClass();
示例:

    <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            width: 300px;

            height: 300px;

            background-color: pink;

        }

        .c2{

            width: 100px;

            height: 100px;

            background-color: black;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<script src="jQuery.js"></script>

<script>

    // 添加指定CSS类名(指定CSS类名替换元素选择器指定的标签内容)

    $('.c1').addClass('c2');

    //移除指定CSS类名

    $('.c1').removeClass('c2');

    //判断指定CSS类名是否存在

    $('.c1').hasClass('c2');

    //查看指定CSS类名是否存在,有则删除,无则添加

    $('.c1').toggleClass('c2');

</script>

</body>

</html>

示例

CSS样式操作

原生js代码:

    标签.style.属性 = '值';

jQuery代码:

    单个css样式

    $('元素选择器').css('属性','值');

    设置多个css样式

    $('元素选择器').css({'属性':'值',属性2:值2})
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="c1"></div>

<script src="jQuery.js"></script>

<script>

    // 设置单个css样式类

    $('.c1').css('color','red');

    // 设置多个css样式类

    $('.c1').css({'width':'300px','height':'300px','background-color':'yellow'});

</script>

</body>

</html>

示例

jQuery标签操作的更多相关文章

  1. 前端09 /jQuery标签操作、事件、补充

    前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...

  2. 前端08 /jQuery标签操作、事件

    前端08 /jQuery标签操作.事件 目录 前端08 /jQuery标签操作.事件 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文档标签操作 ...

  3. 转：jQuery 常见操作实现方式

    http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...

  4. jQuery 常见操作实现方式

    一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...

  5. jQuery DOM操作之结点转移复制

    jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...

  6. jQuery系列 第三章 jQuery框架操作CSS

    第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...

  7. 如何在js或者jquery中操作EL表达式的一个List集合

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...

  8. jQuery基础操作

    1.jQuery的介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...

  9. JQuery常用操作实现方式

    http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...

随机推荐

  1. postman内置脚本说明

    1. 清除一个全局变量 Clear a global variable 对应脚本: postman.clearGlobalVariable("variable_key"); 参数: ...

  2. 磁盘I/O高居不下，通过什么来查看占用I/O的进程？

    iotop命令是一个用来监视磁盘I/O使用状况的top类工具.iotop具有与top相似的UI,其中包括PID.用户.I/O.进程等相关信息.Linux下的IO统计工具如iostat,nmon等大多数 ...

  3. sqllite connectionstring setting

    https://www.connectionstrings.com/sqlite/ SQLite.NET Basic Data Source=c:\mydb.db;Version=3; Version ...

  4. IDEA子项目的相互依赖

    A项目依赖B项目 一.B项目打包,执行install 这一步其实就是把你的项目打包到本地仓库,你可以在本地仓库看到相应的jar包 二.在A项目的pom.xml引入依赖可以了 当B项目修改后,需要重新打 ...

  5. 泡泡一分钟： A Linear Least Square Initialization Method for 3D Pose Graph Optimization Problem

    张宁 A Linear Least Square Initialization Method for 3D Pose Graph Optimization Problem "链接:https ...

  6. 转 Java连接Oracle数据库的简单示例

    https://www.cnblogs.com/joyny/p/11176643.html https://community.oracle.com/thread/4096458 import jav ...

  7. [转]如何更换 Ubuntu 18.04 LTS 的 GDM 登录界面背景

    链接地址:https://www.linuxprobe.com/ubuntu-gdm-login.html

  8. 微软3389远程漏洞CVE-2019-0708批量检测工具

    0x001 Win下检测 https://github.com/robertdavidgraham/rdpscan C:\Users\K8team\Desktop\rdpscan-master\vs1 ...

  9. consul服务注册与服务发现的巨坑

    最近使用consul作为项目的服务注册与服务发现的基础功能.在塔建集群使用中遇到一些坑,下面一个个的记录下来. consul集群多node consul集群的node也就是我们所说的consul实例. ...

  10. VUE 多页面打包webpack配置

      思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vu ...