样式操作

样式类操作

//添加指定的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. pytorch模型存储的两种方式

    1.保存整个网络结构信息和模型参数信息: torch.save(model_object, './model.pth') 直接加载即可使用: model = torch.load('./model.p ...

  2. linux记录-安装elk记录（参考博文）

    什么是ELK? 通俗来讲,ELK是由Elasticsearch.Logstash.Kibana .filebeat三个开源软件的组成的一个组合体,这三个软件当中,每个软件用于完成不同的功能,ELK 又 ...

  3. Connection reset by peer引发的思考

    http://www.mamicode.com/info-detail-506381.html

  4. idea中maven项目下载源码的方式的

    当我们打开class文件的时候,右上角有个Download Sources的超链接,点击就可以下载源码了. 下载源码后,就变成java文件了.

  5. 【转】百万年薪挖了p8，难道是水货？

    大厦新搬进来一家创业公司,老板红光满面地提着果篮上楼拜访,说是刚拿到了投资人的钱,正准备扩充团队大干一场.那个时候的他踌躇满志,顾盼生辉.当时我想,能在这个大环境下拿到投资的公司,做的产品应该是有前景 ...

  6. OneNote中更改英文输入默认不是微软雅黑的问题

    win10下的终极版解决方案: 1.进入C:\Windows\Fonts找到Calibri字体,点进去后先右键Calibri常规-属性-安全-高级,将所有者从“TrustedInstaller”更改为 ...

  7. 19-js策略模式

    var PriceStrategy = function() { var stragtegy = { return30: function(price) { return +price + parse ...

  8. python线程池ThreadPoolExecutor（上）（38）

    在前面的文章中我们已经介绍了很多关于python线程相关的知识点,比如 线程互斥锁Lock / 线程事件Event / 线程条件变量Condition 等等,而今天给大家讲解的是 线程池ThreadP ...

  9. [转帖]CentOS 7 x64 安装 Ceph

    CentOS 7 x64 安装 Ceph https://www.cnblogs.com/jicki/p/5801712.html 改天尝试一下. k8s 可以使用ceph 作为 pv和pvc的后端存 ...

  10. Java基础笔试练习（四）

    1.编译Java Application 源程序文件将产生相应的字节码文件,这些字节码文件的扩展名为( ). A.java B.class C.html D.exe 答案: B 解析: Java源程序 ...