jQuery css()选择器使用说明

CSS操作有一个重要的方法:CSS()

CSS()有三个不同的语法,来完成各自的工作:

■$(selector).css(name,value)
■$(selector).css({properties})
■$(selector).css(name)

返回CSS属性使用CSS(name)返回指定的第一个匹配元素的CSS属性值:

示例

 代码如下 复制代码

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

试一试 » 设置 CSS 属性和值使用css(name,value),为所有匹配元素设置的CSS属性:
示例

 代码如下 复制代码

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

果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法。示例如下:

 代码如下 复制代码

var divcss = {
  background: '#EEE',
      width: '478px',
      margin: '10px 0 0',
      padding: '5px 10px',
      border: '1px solid #CCC'
};
$("#result").css(divcss);

//这里我们先定义了一个CSS样式属性变量‘divcss’,这类似于建立一个外部CSS文件。
//然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码:

 代码如下 复制代码

$("#61dh a").css("color")

//和第一个例子相似,但是这里我们只传递一个参数(样式属性)最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接,也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:

 代码如下 复制代码

$("#61dh a").css('color','#123456');
  $("#61dh a").hover(function(){
  $(this).css('color','#999');
  },
  function(){
  $(this).css('color','#123456');
});

//hover()方法的两个函数使用用逗号分隔你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨),其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。

切换样式

Jquery提供toggleclass()方法控制样式的切换

 代码如下 复制代码
$(“p”).toggleclass(“another”);

判断是否包含某样式,如果有 返回true 否则 返回 false

 代码如下 复制代码

$(“p”).hasClass(“another”); 相当于$(“p”).is(“.another”);

jquery如何删除一个css属性

可以用class去设置,然后removeClass(),比如说

 代码如下 复制代码

$("#test").attr("style",{"display":"none"});

如果完全不要就可以使用

 代码如下 复制代码

$("#test").removeAttr("style");

注意:使用 removeAttr 就可以了。

另外,如果只是显示和隐藏(不做动画效果),定义一个 .hide {display:none;},然后使用 addClass() 和 removeClass() 性能会更高。

时间: 2024-10-21 10:36:53

jQuery css()选择器使用说明的相关文章

jquery层次选择器使用说明

  1.find():找到该元素的子元素以及孙子元素(及所有后代元素). $('#box').find('p').css('color', 'white');//id为box下所有的p标签的颜色改为白色     2.children():找到该元素的子元素. $('#box').children('p').css('color', 'white');//id为box的所有子元素为p标签的改颜色为白色    3.next():找到该元素同一级元素的下一个元素. $('#box').next('p'

jquery CSS选择器笔记_jquery

去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查看.这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步. 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器.今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定. 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info c

jquery css选择器实现代码(1/2)

css教程选择符包括通配选择符.id选择符.属性选择符.包含选择符.类选择符等,他们的基本格式为: 通配选择符:$("#id *") 表示该元素下的所有元素. id选择符:$("#id") 表示获得指定id的元素. 属性选择符:$("input[type=text]") 表示type属性为text的所有input元素. 包含选择符:$("ul li a") 表示ul元素下所有的li元素里的所有a元素. 类选择符:$("

jquery css选择器

css教程这些方法获取和设置元素的css相关的特性. .addclass() 属性,阶级属性将指定的类(上课),以对每一个匹配元素. .css的() 样式属性中获取的匹配的元素设置的第一个元素的样式属性的值. .hasclass() 属性,阶级属性确定是否匹配元素的任何指派给定的类. .高度() 尺寸,样式属性获取的匹配的元素中的第一个元素设置当前计算的高度. .innerheight() 尺寸,样式属性获取用于在匹配的元素,但不包括填充边界设置的第一个元素当前计算的高度. .innerwidt

jquery css选择器学习笔记

1. $('node+next') == $('node').next() 2. $('node~siblings') == $('node').nextAll(); 3. :gt(index)大于index序号的的元素,从0开始 4. :lt(index)小于index序号的元素,从0开始 4. :header 获取所有h1,h2,h3,h4...的元素 例子 比如你要获取id为123的div的z-index的值 $("#123").css("z-index")

jquery css 选择器演示代码_jquery

id为one class为one class为mini class 为mini,title为other class为mini,title为test class for mini,title for test the span under div style for display none's div

jQuery原理系列-css选择器的简单实现_jquery

jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

jquery 属性选择器(匹配具有指定属性的元素)_jquery

jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("

基于JQuery 选择器使用说明介绍_jquery

jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. jQuery 元素选择器:jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取 id="demo" 的第一个 <p> 元素