样式操作

样式类操作

//添加指定的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. Dart 自增++自减--和循环语句

    void main(){ /* ++ -- 表示自增 自减 1 在赋值运算里面 如果++ -- 写在前面 这时候先运算 再赋值,如果++ --写在后面 先赋值后运行运算 var a=10; var b ...

  2. 十九款web漏洞扫描工具

    1. Arachni Arachni是一款基于Ruby框架搭建的高性能安全扫描程序,适用于现代Web应用程序.可用于Mac.Windows及Linux系统的可移植二进制文件. Arachni不仅能对基 ...

  3. Dart中的类型转换总结：

    1.Dart中数组转换为字符串:join var a=[1,2,3,4]; var str=a.join(',');

  4. 泡泡一分钟:Visual Odometry Using a Homography Formulation with Decoupled Rotation and Translation Estimation Using Minimal Solutions

    张宁 Visual Odometry Using a Homography Formulation with Decoupled Rotation and Translation Estimation ...

  5. 【问题解决】Flasgger mapping values are not allowed here?

    参考来源:https://stackoverflow.com/questions/9055371/python-and-pyaml-yaml-scanner-scannererror-mapping- ...

  6. hppts的理解

    参考: https://www.ruanyifeng.com/blog/2014/02/ssl_tls.html

  7. 报错：java.lang.ClassNotFoundException: org.codehaus.jackson.map.JsonMappingException

    报错背景: 执行hdfs-mysql的job任务的时候报错. 报错现象: Exception has occurred during processing command Exception: org ...

  8. Redis的特性及运用

    Redis特性 一个产品的使用场景肯定是需要根据产品的特性,先列举一下Redis的特点: 读写性能优异 持久化 数据类型丰富 单线程 数据自动过期 发布订阅 分布式 这里我们通过几个场景,不同维度说下 ...

  9. go micro rpc 直接调用 返回500 错误

    开启网关时需要 加上 flags micro api -handle=api --enable_rpc

  10. C#中Request.servervariables参数

    整理一下,我在asp.net下遍历的Request.servervariables这上集合,得出的所有参数如下: : Request.ServerVariables["ALL_HTTP&qu ...