1. 操作css方法
jQuery 可以使用css 方法来修改简单元素样式,也可以操作类,修改多个样式。
(1)参数只写属性名,则是返回属性值。
$(this).css("color"); // 得到的是这个元素的字体颜色
(2)参数是属性名,属性值,用逗号分隔,是设置样式,属性必须加引号,如果属性值是数字,可以不用跟单位和引号
$(this).css("color","red"); // 设置这个元素字体颜色为红色
$(this).css("width",400); // 属性值是数字,可以不加单位,也可以不加引号
(3) 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号,但是加上更好;属性值如果不是数字,则需要加引号
$(this).css({"color":"blue","font-size":"20px",backgroundColor: "red"});
// 给元素设置字体颜色同时设置字体大小和背景色,如果是复合属性必须采用驼峰命名法
2. 设置类样式方法
它的作用等同于原生JS中的className , 可以操作类样式,注意操作类里面的参数不要加点。
(1)添加类
$("div").addClass("current"); // 给div元素添加类名为current的类
(2)移除类
$("div").removeClass("current"); // 给div元素移除类名为current的类
(3)切换类
$("div").toggleClass("current"); // 给div元素添加 / 移除类名为current的类
<!-- css样式 --> <style> div { width: 200px; height: 200px; background-color: pink; } .current { margin: 100px; background-color: skyblue; } </style> <!-- html结构 --> <div class="current"></div> <!-- js代码 --> <script> $(function() { // 1. 添加类 addClass() 不要加· /* $('div').click(function() { $(this).addClass('current'); }) */ // 2. 删除类 removeClass() /* $('div').click(function() { $(this).removeClass('current') }) */ // 3. 切换类 toggleClass() 表示如果本身有类current,则点击移除,否则点击添加 $('div').click(function() { $(this).toggleClass('current'); }) }) </script>
jQuery 中给我们提供了切换类 toggleClass,这大大简化了我们的操作,不用像原生JS中还需要借助变量进行判断再切换内容。
2.1 类操作与className 的区别
原生JS 中的className 会覆盖原生原先里面的类名。
但是jQuery 里面的类操作只是对指定的类进行操作,不会影响原先的类名,其实通过名字也能感知到区别,一个是addClass,意为添加类,既然是添加,当然不会影响原先的,removeClass也是一样的,移除的也是指定的类,未指定的类是不会受影响的。
3. 案例:tab栏切换
<!-- css样式 --> <style> * { margin: 0; padding: 0; } .tab { margin: 100px auto; width: 1000px; } .tab-list { height: 44px; line-height: 44px; background-color: #EEF1EE; border: 1px solid #ccc; } .tab-list ul li { float: left; list-style: none; padding: 0 25px; /* cursor: pointer; */ cursor: pointer; } .tab-con { padding: 10px; } .current { color: #fff; background-color: #D6271F; } .item { display: none; } </style> <!-- html结构 --> <div class="tab"> <div class="tab-list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价(5000)</li> <li>手机社区</li> </ul> </div> <div class="tab-con"> <div class="item" style="display: block;"> 商品介绍模块内容 </div> <div class="item"> 规格与包装模块内容 </div> <div class="item"> 售后保障模块内容 </div> <div class="item"> 商品评价(5000)模块内容 </div> <div class="item"> 手机社区模块内容 </div> </div> </div> <!-- js代码 --> <script> $(function() { $('.tab-list ul li').click(function() { // 1. 利用隐式迭代,为每个小li绑定点击事件,点击后当前小li改变自身样式(添加类),其余兄弟不变(移除类)--排他思想 $(this).addClass('current').siblings().removeClass('current'); // 2. 点击的同时获得对应的索引号 var index = $(this).index(); // 3. 根据索引号将对应的模块找出显示,其余模块隐藏 $('.tab-con .item').eq(index).show().siblings().hide(); }) })
使用jQuery 实现tab栏切换效果,明显比原生JS简单很多,刚好契合jQuery的宗旨理念。