>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 21220 个阅读者 刷新本主题
 * 贴子主题:  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开发-->Web运作原理(Ⅰ)
  JSP与Hibernate开发-->使用JPA和注解
  Java网络编程-->XML数据处理
  精通Spring-->计算属性和数据监听
  Vue3开发-->组合(Composition)API
  Promise对象的then()和catch()方法
  前端面试官指导前端面试攻略
  创建vue cli 插件
  总结:Vue的生命周期钩子函数的调用时机
  Vue+Vant中van-list请求数据(数据请求调用公用方法)
  js导出json文件
  jQuery 遍历DOM 树中的同胞元素
  CSS 盒子模型
  HTML 基础知识
  JavaScript的window.screen对象
  JavaScript HTML DOM EventListener
  JavaScript的 while 循环语句
  JavaScript 调试
  jQuery Mobile 简介
  应该掌握的几个HTML标记语言(个人总结)
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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