css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍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").attr("style",{"display":"none"});

如果完全不要就可以使用

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

注意:使用 removeAttr 就可以了。

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

转载于:https://www.cnblogs.com/hclw/p/3795188.html

jQuery css()选择器使用说明相关推荐

  1. jQuery css选择器大全,总有你用得到的东西。

    JQuery选择器 首先我们深入了解止之后,发现要用到的选择器多种多样.今天我们就来总结一下各种选择器以及使用方法. 做一个大体的分类: 通过css选择器来提取元素: Query选择器的分类:通过cs ...

  2. jQuery原理系列-css选择器实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和doc ...

  3. Jmeter之CSS选择器/JQuery选择器关联

    选择器: CSS选择器或JQuery选择器是Jmeter支持的两种语法,下面对其两种语法进行简单介绍 CSS选择器 JQuery选择器 Chrome - 复制CSS选择器 Google Chrome在 ...

  4. jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child

    最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...

  5. CSS css选择器 jquery jQuery选择器的优先级 XXX XX X xxx xx x

    CSS css选择器 jquery jQuery选择器的优先级 XXX XX X xxx xx x 行间选择器 id选择器 类选择器 元素选择器 通配符选择器

  6. Jquery从入门到精通:二、选择器 2、选择器(1)CSS选择器

    1.准备知识:CSS选择器:(参考文档:CSS2.0帮助文档) 代码: <body> <div>  <p id="p1">足不出户订窗帘:< ...

  7. CSS 选择器、jQuery选择器大全

    CSS 选择器 CSS选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp jQuery选择器大全 一.基本选择器 1. id选择器( ...

  8. 16.JAVA之前端,HTML,CSS(选择器,盒子模型),JS,JQuery,Json,ajax

    一.Web前端技术栈 1.HTML超文本标记语言        实现页面展现,形成静态网页 2.CSS层叠样式表            实现页面美化 3.JS javascript脚本语言    实现 ...

  9. jquery多css选择器获取指定元素

    场景 jquery多css选择器获取指定元素,相信你看到这一定会问一个id就搞定的事干嘛扯这么多,但是某些情况下就很无奈呀,就比如今天一哥们问我,一个元素上面有两个class,要怎么获取这个元素,我第 ...

最新文章

  1. 20行python代码的入门级小游戏-python实现石头剪刀布小游戏
  2. TF之LSTM:利用LSTM算法对Boston(波士顿房价)数据集【13+1,506】进行回归预测(房价预测)
  3. Eclipse 引导阮卓项目 No projects are found to import解
  4. flume案例-网络数据采集-Flume安装
  5. HTML 5新增的元素
  6. 面试必备:synchronized的底层原理?
  7. matlab练习程序(图像放大/缩小,放大没有进行插值操作)
  8. C语言程序设计精要,C语言程序设计精要.doc
  9. linux下的pdf工具下载,Linux系统下的PDF好帮手 LinuxPDFeditor
  10. php嵌入wowza,Wowza服务器上的PHP脚本无法通过HTTP身份验证?
  11. STM32(3):番外篇之STM32名字解析
  12. 获取某年的所有周日期
  13. 计算机网络的组成有哪些
  14. ppt演示文档如何瘦身
  15. WIFI AP和STATION
  16. Android学习笔记——APP页面转换与Intent学习
  17. 通过旋转候选框实现任意方向的场景文本检测
  18. hdu-5015-233 Matrix-矩阵
  19. 淘宝商品详情API接口(app、h5端)
  20. python爬取百度美女图片

热门文章

  1. UVa 10118 记忆化搜索 Free Candies
  2. CentOS安装mariadb
  3. Java和Android中一些常用的公共方法
  4. 域名查询精灵V1.0 我写的软件,大家多多提建议
  5. OpenCV的HSV空间度量与标准HSV不一样,使用的时候需要换算;另附一个调色取色的小工具
  6. 计算机二进制加减符号,(带符号的二进制数的表示方法及加减法运算).ppt
  7. 使用Ubuntu挂载NTFS格式分区
  8. fs_struct和file_struct关系
  9. leetcode算法题--用两个栈实现队列
  10. OVS端口镜像(十五)