首页 > web前端 > js教程 > 正文

jquery操作css选择器

黄舟
发布: 2016-12-16 10:47:17
原创
1388人浏览过

.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 所有匹配的元素集合中的当前的元素。

Giiso写作机器人
Giiso写作机器人

Giiso写作机器人,让写作更简单

Giiso写作机器人 56
查看详情 Giiso写作机器人


.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 标签的时候切换样式。
  })

 以上就是jquery操作css选择器的内容,更多相关文章请关注PHP中文网(www.php.cn)! 

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号