样式表:

.important{

font-weight:bold;

font-size:xx-large;

}

.blue{

color:blue;

}

1.addClass():向被选元素添加一个或多个类

$("button").click(function{

  $("h1,h2,p").addClass("blue");

  $("div").addClass("important");

});

可以在addClass()方法中规定多个类:

$("button").click(function(){

    $("#div1").addClass("important blue");

});

2.removeClass():从被选元素删除一个或多个类

$("button").click(function(){

  $("h1,h2,p").removeClass("blue");

});

3.toggleClass():对被选元素进行添加/删除类的操作

$("button").click(function(){

  $("h1,h2,p").toggleClass("blue");

});

4.css():设置或返回被选元素的一个或多个样式属性

**返回首个匹配元素的background-color值:

$("p").css("background-color");

语法:css("propertyname");

**为所有匹配元素设置background-color值:

$("p").css("background-color","yellow");

语法:css("propertyname","value");

**设置多个CSS属性:

$("p").css({"background-color":"yellow","font-size":"200%"});

语法:css({"propertyname":"value","propertyname":"value",....});

JQuery学习之操作CSS的更多相关文章

  1. jquery学习--属性操作

    学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1"). ...

  2. JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...

  3. JQuery学习之操作DOM

    1.DOM,就是Document Object Model(文档对象模型) 2.获得内容的方法: **text():设置或返回所选元素的文本内容 $("#btn1").click( ...

  4. 第二十五篇 jQuery 学习7 获取并设置 CSS 类

    jQuery 学习7 获取并设置 CSS 类   jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态 ...

  5. jquery 学习(五) - CSS 操作

    HTML + CSS 样式 /*CSS样式*/<style> body{ margin: 0; } div{ width: 100%; height: 2000px; background ...

  6. jQuery 操作 CSS

    jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...

  7. jQuery基础DOM和CSS操作

    $('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...

  8. JQuery:JQuery操作CSS类

    JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...

  9. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

随机推荐

  1. codeforces Educational Codeforces Round 5 A. Comparing Two Long Integers

    题目链接:http://codeforces.com/problemset/problem/616/A 题目意思:顾名思义,就是比较两个长度不超过 1e6 的字符串的大小 模拟即可.提供两个版本,数组 ...

  2. 我刚知道的WAP app中meta的属性(转载)

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

  3. EF查询视图只得到一条记录

    1.出错结果:数据库表视图有多条数据,在使用EF框架进行查询时却只得到一条数据(注:拦截EF得到的sql语句在数据库进行查询并没有任务问题). 2.出错原因:该视图中没有ID或者主键,EF查询时进行反 ...

  4. 【linux】linux下动态库so文件的一些认识

    来源:http://mypyg.iteye.com/blog/845915 so其实就是shared object的意思.今天看了上面的博客,感觉好吃力.赶紧做个笔记记录一下.下面的内容大多都是连接中 ...

  5. JS调用自定义弹窗【bootstrap】

    function commonConfirm(msg,call){ showConfirmBox("消息提示",msg,call); } $(document).on('click ...

  6. 词频统计_输入到文件_update

    /* 输入文件见337.in.txt 输出文件见338.out.txt */ #include <iostream> #include <cctype> #include &l ...

  7. NYOJ题目112指数运算

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAs0AAAIICAIAAAAaCETRAAAgAElEQVR4nO3drW7jWtwv4PcmwnMhxb ...

  8. NYOJ题目457大小写互换

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsUAAAIUCAIAAAB9y8bFAAAgAElEQVR4nO3dPW7bTNsG0G8T7r0Qt/

  9. iOS,Objective-C,相册功能的实现。

    #import "ViewController.h" #define kuan [UIScreen mainScreen].bounds.size.width #define ga ...

  10. Java的位运算符详解实例——与(&)、非(~)、或(|)、异或(^)

    位运算符主要针对二进制,它包括了:“与”.“非”.“或”.“异或”.从表面上看似乎有点像逻辑运算符,但逻辑运算符是针对两个关系运算符来进行逻辑运算,而位运算符主要针对两个二进制数的位进行逻辑运算.下面 ...