JQuery学习之操作CSS

样式表:

.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",....});

时间: 2024-10-07 23:45:56

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

jQuery学习----------DOM操作

DOM操作之创建元素: DOM: var ele = document.createElement("element") 例子:document.createElement("div") jQuery: var $ele = $("element")    //返回的是一个jQuery对象 例子:$("<div></div>") DOM操作之输入文本: DOM: var txt = document.c

轻松学习JavaScript二十四:DOM编程学习之操作CSS样式(一)

CSS样式作为HTML的辅助,可以增强页面的显示效果.前面学了DOM操作HTML,因此也要学DOM操作CSS 样式的方法.在学习CSS的时候,已经知道了CSS插入到HTML文档有三种情况,分别为:行内式,内嵌式和外联式 (这是我们最常用的).下面就来看怎么操作这三种情况: 一操作行内式 先来写一个HTML文档: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

jquery学习--属性操作

学习jquery很长一段时间了,知道对属性操作的方式为: $("#xx1").attr("xx2"); //获取属性值 $("#xx1").attr("xx2","xx3"); //设置属性值 但是今天突然发现jquery对象还有一个叫prop()的方法,这个prop()方法是什么来头,干什么用的?

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

jQuery 学习7 获取并设置 CSS 类 jQuery动态控制页面,那么什么是动态呢?我们就说一下静态,静态几乎又纯html+css完成,就是刷新页面之后,不会再出现什么变动,一个实打实的静态页面.那么动态,我们基于静态的特征说,动态:刷新页面之后,还可以发生样式改变等,就为动态. 这节课我们学习的是jQuery控制css,那么css样式都被改变了,算动态么?当然算啦,刷新页面之后发生了改变,就已经不是静态了,只要是变动了,就算是啦. 我们这节课学习四个控制css的方法: addClass(

jQuery操作CSS属性的相关方法

1.前言 jQuery提供了以下几种操作DOM元素CSS样式的方法,包括直接访问.修改DOM元素的class属性值,还提供了访问.修改DOM元素内联CSS属性值的方法,除此之外还提供了大量直接访问.修改DOM元素大小和位置的方法. jQuery提供的操作CSS属性的相关方法如下. 1)        addClass(class):将指定的CSS定义添加到jQuery对象包含的所有DOM对象上. 2)        hasClass(class):判断该jQuery对象是否包含至少一个具有指定C

jquery 学习(五) - CSS 操作

HTML + CSS 样式 /*CSS样式*/<style> body{ margin: 0; } div{ width: 100%; height: 2000px; background-color: aquamarine; margin: 0; } .a1{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 30px; background-color: darkgoldenrod; color: white;

jQuery学习笔记--JqGrid相关操作 方法列表(上)

1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选中行:$("#jqGrid

JQuery:JQuery操作CSS类

JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 1.jQuery addClass() 方法实例1:下面的例子

jQuery获取和操作元素的属性和CSS样式

本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"></img>  我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性. 元素属性和Dom属性只是在我们对其进行不同解析时的不同