>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20955 个阅读者 刷新本主题
 * 贴子主题:  jQuery 获取并设置 CSS 类 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2020-02-02 13:26:59     消息  查看  搜索  好友  邮件  复制  引用

  


  
$(document).ready(function(){

  $("#btnEx").click(function(){

    $("#test").toggleClass("important");

  });

});

.important

{

font-size:x-large;

font-weight:bold;

color:#c3c3c3;

}

jQuery -  获取并设置 CSS 类

通过 jQuery,可以很容易地对 CSS 元素进行操作。

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:            
  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

范例样式表

下面的样式表将用于本页的所有例子:


.important
{
         font-weight: bold  ;
         font-size: xx-large  ;
}

.blue
{
         color: blue  ;
}

jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,您也可以选取多个元素:    

范例

$ ( " button " ) . click ( function ( ) {
  $ ( " h1,h2,p " ) . addClass ( " blue " ) ;
  $ ( " div " ) . addClass ( " important " ) ;
} ) ;

您也可以在 addClass() 方法中规定多个类:    

范例

$ ( " button " ) . click ( function ( ) {
  $ ( " body div:first " ) . addClass ( " important blue " ) ;
} ) ;

jQuery removeClass() 方法

下面的例子演示如何在不同的元素中删除指定的 class 属性:    

范例

$ ( " button " ) . click ( function ( ) {
  $ ( " h1,h2,p " ) . removeClass ( " blue " ) ;
} ) ;

jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:    

范例

$ ( " button " ) . click ( function ( ) {
  $ ( " h1,h2,p " ) . toggleClass ( " blue " ) ;
} ) ;

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-03 21:28:33 重新编辑]
  Java面向对象编程-->接口
  JavaWeb开发-->使用过滤器
  JSP与Hibernate开发-->立即检索和延迟检索策略
  Java网络编程-->RMI框架
  精通Spring-->Vue Router路由管理器
  Vue3开发-->虚拟DOM和render()函数
  最新的Vue面试题大全含源码级回答,吊打面试官系列
  Vue3.0 ref、reactive、toRef、toRefs、customRef的区别
  在Typescript脚本中使用axios
  Vue路由开启keep-alive时的注意点
  理解前后端分离的概念
  jQuery 遍历过滤:缩小搜索元素的范围
  jQuery 遍历DOM 树中的同胞元素
  jQuery 选择器
  JavaScript中的HTML DOM Button 对象
  jQuery UI 范例:show()方法
  CSS 盒子模型
  HTML标签的全局属性
  JavaScript 的代码规范
  JavaScript prototype(原型对象)
  jQuery Mobile 事件
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。