jquery 操作css 选择器

.addClass()
  为每个匹配的元素添加指定的样式类名
  .addClass(className)
    className 为每个匹配元素所有增加的一个或多个样式名
  .addClass(function(index,currentClass))
    函数返回一个或者多个用空格隔开, index 表示参数匹配中的索引位置 this 指向匹配元素集合中的当前元素。
  $("p").addClass("myClass yourClass"); 给p 这个元素添加这两个类名样式。
  $("ul li:last").addClass(function(index){
    return "item-" index;
  }) 在最后一个<li> 元素上加上“item-1”样式。


.css()
  获取匹配元素集合中的第一个元素的样式属性计算值或设置每一个匹配元素的一个或多个
  css属性。

  .css(propertyName)
    propertyName 一个css 属性名 。 一个或者多个css 属性组成的数组。
  $(this).css("background-color"); 获取当前元素的背景颜色。
  $(this).css(["width","height",color]) 获取当前元素的 宽 高 字体颜色。

  .css(propertyName,value)
    propertyName 一个css 属性名。
    value 设置这个css 的属性值。
  .css(propertyName,function)
    propertyName 一个css 属性名。
    function 一个用来返回设置值的函数。this,是当前元素。

  $('div.example').css('width',function(index){
    return index*50;
  }) 设置一个匹配元素的宽度增加到较大的值。
  $("p").mouseover(function(){
    $(this).css("color","red");
  }) 当鼠标经过p 元素时文字变成红色。
  $("#box").one("click",function(){
    $(this).css("width"," =200")
  }) 增加#box 的宽度为200像素。


.hasClass()
  确定任何一个匹配的元素是否有被分配给定的(样式类)
  .hasClass(className)
  className 要查询的样式名。
  $("#mydiv").hasClass("foo") 匹配的元素是否含有 foo这个样式
  如果有这个样式那么就返回true 如果没有那么就返回false


.removeClass()
  移除匹配的元素上面的样式。
  .removeClass([className])
    每个匹配元素移除的一个或者多个用空格隔开的样式名。
  $("p").removeClass("myClass yourClass")
  .removeClass(function(index,class))
    一个函数,返回一个或多个要移除的元素,index 所有匹配的元素集合中的当前的元素。


.toggleClass()
  在匹配的元素集合中的每个元素上切换样式名
  .toggleClass(className)
    className 在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名。
  .toggleClass(className,switch)
    switch 一个布尔值,用于判断样式是否应该被添加或移除。
  .toggleClass([switch])
    switch 一个用来判断样式类天添加还是移除的布尔值。

  $('#foo').toggleClass(className,add0rRemove) 就等同于
  if(add0rRemove){
    $('#foo').addClass(className);
  }else{
    $('#foo').removeClass(className)
  }

  $("p").click(function(){
  $(this).toggleClass("highlight");
    //点击当前的p 标签的时候切换样式。
  })


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361267.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vim设置

一、基本编辑功能1、复制、剪切和粘贴复制特定的某一段&#xff1a;把光标移到要复制的文本的头部&#xff0c;按下“v”&#xff0c;往后移动光标&#xff0c;光标所过之处的字符>都会高亮&#xff0c;移到欲复制文本的尾部后&#xff0c;按下“y”&#xff0c;高亮文本全部…

jquery表单属性筛选元素

$(":button") 选择所有按钮元素类型为按钮的元素。 等于$(input[type"button"]) $(":checkbox") 选择所有类型为复选框的元素。 等于$(input[type"checkbox"]) $(":checked") 选择所有勾选的元素。 $( "input:checked&…

Hamcrest Matchers的高级创建

介绍 上一次 &#xff0c;我讨论了Hamcrest Matcher是什么&#xff0c;如何使用以及如何制作。 在本文中&#xff0c;我将解释创建Hamcrest Matchers的更多高级步骤。 首先&#xff0c;我将分享如何使您的匹配器更易于类型安全&#xff0c;然后介绍无状态匹配器的一些技术&…

嵌入式成长轨迹37 【Zigbee项目】【CC2430基础实验】【自动闪烁】

最为简单的代码&#xff0c;只用到一个寄存器P1DIR。因为点亮的led灯&#xff08;p1.0和p1.1&#xff09;的管脚是p1的&#xff0c;要输出就得将这两个管脚设置为输出管脚。该寄存器用0~8对应1.0~1.8管脚。 1 //main.c2 #include <ioCC2430.h>3 4 #define uint unsigned …

博客园CodingLife模板样式优化

博客园CodingLife模板样式优化&#xff0c;小屏和大屏均做了优化&#xff0c;感兴趣的园友可以复制到你的页面定制CSS代码中&#xff0c; 源码地址&#xff1a;http://www.cnblogs.com/blog/customcss/334547.css 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

如何允许用户自定义UI

理念 利用JavafX / FXML的声明性设计模式&#xff0c;并允许用户仅通过使用例如SceneBuilder打开某个视图即可重新定制布局或添加新控件&#xff0c;甚至根据用户需要更改样式&#xff0c;从而无需任何编码即可自定义某个视图。 FXML文件 CSS基本上可以放置在通过URL可以到达的…

WPF控件和布局

WPF控件和布局&#xff0c;根据刘铁猛《深入浅出WPF》书籍讲解内容&#xff0c;主要记录控件和布局的原理&#xff0c;如果有不足的地方&#xff0c;请大牛们键盘下留情--轻喷&#xff01;如果还算有用&#xff0c;请给点动力&#xff0c;支持一把&#xff01; 一、WPF里的控件…

css背景图片定位

背景图默认平铺&#xff1a; background-repeat: no-repeat;/*不平铺*//*repeat-x;沿X轴平铺*//*repeat-x;沿Y轴平铺*/ 背景图片定位&#xff1a; background-position: 100px 30px;/* X轴 Y轴 *//* 20% 20%; 百分比的方式 *//* left|center|right top|center|bottom */ 背景中…

使用GZIP和压缩数据

抽象 我们都知道用zip或gzip压缩文件的含义。 但是在Java中使用压缩文件并不像您想的那样简单明了&#xff0c;尤其是当您不是直接使用文件而是压缩流数据时。 我们会去&#xff1a; 如何将字符串转换为压缩/压缩字节数组&#xff0c;反之亦然 创建用于读取和写入文件的实用程…

Oracle ——概述 Oracle 5 步调优方法论

http://www.toadworld.com/KNOWLEDGE/KnowledgeXpertforOracle/tabid/648/TopicID/OPS3/Default.aspx 对 Oracle 调优应该采取积极的态度。如果等到用户开始抱怨性能&#xff0c;才调优通常以为时已晚&#xff0c;即便是最有效的调优策略。性能问题确定和处理的时间越晚&#x…

js,jq.事件代理(事件委托)复习。

<ul id "lists"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li></ul>js委托&#xff1a; var lists document.getElementById(&qu…

整体服务器与微服务

介绍 刚开始时&#xff0c;由于要求简单&#xff0c;所以应用程序既简单又小。 随着时间要求和需求的增长&#xff0c;我们的应用程序变得越来越大&#xff0c;越来越复杂。 这导致将单片服务器开发和部署为一个单元。 在某种程度上&#xff0c;微服务可以通过简单的应用程序回…

NEXUS S安卓4.0/4.1 【完美】 ROOT教程

原文链接&#xff1a;http://bbs.gfan.com/android-3517082-1-1.html 进行bootloader解锁&#xff08;即使解锁&#xff0c;再上锁&#xff09;&#xff0c;会清除你手机上的【所有】数据&#xff08;包括内部的16G SD 存储&#xff09;&#xff0c;包括但不限于应用、设置、联…

CSS中的各种FC

什么是FC&#xff1f; Formatting Context&#xff0c;格式化上下文&#xff0c;指页面中一个渲染区域&#xff0c;拥有一套渲染规则&#xff0c;它决定了其子元素如何定位&#xff0c;以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context&#xff0…

HDU 2647 Reward 拓扑排序

http://acm.hdu.edu.cn/showproblem.php?pid2647 题意&#xff1a; 输入N和M代表N个人和M组数据&#xff0c;M组数据中的A和B代表A的工资要比B的工资高&#xff0c;底薪是&#xff08;888元&#xff09;&#xff0c;问你这个老板至少要付 多少钱给这些员工&#xff0c;A比B工资…

EE Servlet 3:简单表单处理

对于大多数Web开发人员而言&#xff0c;Web应用程序中的表单处理就像小菜一碟。 如果我们无法捕获用户的输入并进行处理&#xff0c;将不会有太大用处。 因此&#xff0c;我在servlet3示例中包含了一个简单的FormServlet &#xff0c;该示例演示了您可能会遇到的很少使用的表单…

编写高质量的代码--基础:结构和样式,行为的分离

实现高质量的代码需要我们在结构和样式&#xff0c;行为的分离的基础上做到&#xff1a;精简&#xff0c;重用&#xff0c;有序。精简&#xff1a;尽量减小文件的大小&#xff0c;提高页面加载速度。重用&#xff1a;提高代码的重用性&#xff0c;减少冗余代码&#xff0c;提高…

提高Java的锁性能

Plumbr是唯一通过解释应用程序性能数据来自动检测Java性能问题的根本原因的解决方案。 几个月前&#xff0c;我们在Plumbr中引入了锁定线程检测之后&#xff0c;我们开始收到类似于“嘿&#xff0c;太好了&#xff0c;现在我知道是什么导致了性能问题&#xff0c;但是现在应该…

APK反编译工具

apktool dex2jar jd-gui 1、将要反编译的APK文件后缀改为.zip&#xff0c;解压 2、取出classes.dex文件&#xff0c;拷贝至dex2jar目录。 3、在dex2jar目录运行下列命令行&#xff1a;dex2jar.bat classes.dex&#xff0c;回车。 4、会发现该目录生成了classes.dex.dex2jar.j…

Dom属性方法

一、javascript的三大核心 1.ECMAScript js的语法标准 2.DOM Document object Model 文档对象模型&#xff0c;提供的方法可以让js操作html标签 3.BOM Browser Object Model 浏览器对象模型&#xff0c;提供的方法让js可以操作浏览器 注意&#xff1a;1. js里最大的boss是wind…