JQuery操作样式
- css操作
css()获取或设置样式，操作的是style属性。
- 获取样式：
css()方法，参数为要获取样式值的样式名。
- 样式名可以用驼峰写法，也可以用
-连接。例如，获取元素的width样式，既可以使用css('width')，也可以使用css('min - width')。若要获取border - left - width，驼峰写法为css('borderLeftWidth') 。这种灵活性使得开发者可根据编码习惯选择，同时也兼容CSS样式表中的写法。 - 获取包含多个
dom元素的jQuery对象的样式，只返回第一个元素对应的样式值。当使用$('div').css('height')时，无论页面上有多少个div元素，返回的是第一个匹配到的div的height样式值。若想获取所有div的height值，可结合each方法遍历$('div')来实现。如：
| var divHeights = []; |
| $('div').each(function() { |
| divHeights.push($(this).css('height')); |
| }); |
| console.log(divHeights); |
-
设置样式：css(样式名,样式值)
-
设置的是行内样式，直接修改元素的style属性。如$('#box').css('color','red')，会为id为box的元素添加行内的color样式。这种方式添加的样式优先级较高，会覆盖CSS样式表中相同属性的规则，但不会影响其他未被设置的样式属性。
-
可以设置单样式，每次设置一个样式属性。例如$('p').css('fontSize', '16px')，将所有p元素的字体大小设置为16px。在实际应用中，当需要单独调整某一类元素的某个样式属性时，这种方式非常实用，如在一个表单中，想统一所有input的border - color，就可使用$('input').css('borderColor', '#ccc')。
-
传入对象，可以设置多样式。通过$('div').css({ 'backgroundColor': 'blue', 'border': '1px solid black' })，能一次性为div元素设置背景颜色和边框样式。这种方式适用于需要同时改变元素多个样式属性的场景，减少代码量。例如，在创建一个模态框时，可一次性设置其背景、边框、内边距等样式：
| $('.modal').css({ |
| 'backgroundColor': 'rgba(0, 0, 0, 0.5)', |
| 'border': '2px solid white', |
| 'padding': '20px' |
| }); |
- 可以同时给多个
dom元素设置样式，有隐式迭代的身影。当使用$('li').css('textDecoration', 'underline')时，所有匹配到的li元素都会应用下划线样式，无需手动循环遍历每个li元素。在复杂的页面结构中，若要对某一类元素进行批量样式修改，隐式迭代极大地提高了开发效率。比如，在一个产品列表中，想将所有产品的价格文字颜色设为红色，只需$('.product - price').css('color','red')。
- class操作
- 添加类：
addClass('class1 class2···')，可以添加单个类，也可以添加多个类。
| $("#btn01").click(function () { |
| $("#box").addClass("active font"); |
| }); |
当按钮#btn01被点击时，id为box的元素会同时添加active和font两个类。这在实现元素状态切换或应用多种样式效果时非常有用。例如，在一个导航栏中，当用户点击某个菜单项时，为其添加active类以显示选中状态，同时添加highlight类以突出显示：
| $('.nav - item').click(function() { |
| $(this).addClass('active highlight'); |
| }); |
- 移除类：
removeClass('class1 class2···')，可以移除单个类，也可以移除多个类。如果不加参数，就会移除所有的类名 。
| $("#btn02").click(function () { |
| $("#box").removeClass("font"); |
| }); |
当按钮#btn02点击时，#box元素上的font类会被移除。若要移除多个类，如active和highlight，可使用$('.nav - item').removeClass('active highlight')。当元素状态改变，需要取消之前添加的某些样式类时，此方法很常用。例如，当用户离开某个导航菜单项时，移除其选中和突出显示的类：
| $('.nav - item').mouseleave(function() { |
| $(this).removeClass('active highlight'); |
| }); |
- 判断类：
hasClass() 判断一个元素有没有类，有返回true，没有返回false。
| $("#btn03").click(function () { |
| var flag = $("#box").hasClass("font"); |
| console.log(flag); |
| }); |
通过此方法，可根据元素是否具有某个类来执行不同的逻辑。比如，在一个图片切换效果中，判断当前图片是否具有active类，若有则执行特定操作：
| if ($('.current - image').hasClass('active')) { |
| |
| } |
- 切换类：
toggleClass() 如果元素有某个类就移除这个类，如果元素没有这个类，就添加这个类。
| $("#btn04").click(function () { |
| $("#box").toggleClass("font"); |
| }); |
在实现元素状态切换效果时，toggleClass非常便捷。例如，在一个折叠面板中，点击标题可切换面板的展开与收起状态，通过切换active类来控制面板的显示与隐藏样式：
| $('.panel - title').click(function() { |
| $(this).next('.panel - content').toggleClass('active'); |
| }); |
案例：tab栏切换
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <title>Tab点击切换</title> |
| <script src="./js/jQuery.js"></script> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| } |
| #tab li { |
| float: left; |
| list-style: none; |
| width: 80px; |
| height: 40px; |
| line-height: 40px; |
| cursor: pointer; |
| text-align: center; |
| } |
| #container { |
| position: relative; |
| } |
| #content1, |
| #content2, |
| #content3 { |
| width: 300px; |
| height: 100px; |
| padding: 30px; |
| position: absolute; |
| top: 40px; |
| left: 0; |
| } |
| #tab1, |
| #content1 { |
| background-color: #ffcc00; |
| } |
| #tab2, |
| #content2 { |
| background-color: #ff00cc; |
| } |
| #tab3, |
| #content3 { |
| background-color: #00ccff; |
| } |
| .selected { |
| display: block; |
| } |
| .active { |
| border - top: 5px solid red; |
| } |
| </style> |
| </head> |
| <body> |
| <h2>Tab点击切换</h2> |
| <ul id="tab"> |
| <li id="tab1">10元套餐</li> |
| <li id="tab2">30元套餐</li> |
| <li id="tab3">50元包月</li> |
| </ul> |
| <div id="container"> |
| <div id="content1">10元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟</div> |
| <div id="content2">30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟</div> |
| <div id="content3">50元包月详情：<br /> 每月无限量随心打</div> |
| </div> |
| <script> |
| $(function () { |
| $("#tab>li").click(function () { |
| |
| $(this).addClass("active").siblings("li").removeClass("active"); |
| var index = $(this).index(); |
| |
| $("#container>div").eq(index).show().siblings("div").hide(); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
在上述tab栏切换代码中，当用户点击#tab下的li元素时，利用addClass为当前点击的li添加active类，同时使用removeClass移除其他兄弟li的active类，实现选中状态的切换。通过$(this).index()获取当前点击li的索引，再依据索引使用eq方法显示对应的#container下的div内容，并隐藏其他兄弟div内容。这种实现方式利用了jQuery强大的选择器和样式操作方法，简洁高效地完成了tab栏切换功能。
还可进一步拓展，例如在切换时添加动画效果，通过fadeIn和fadeOut方法，使内容切换更加流畅自然。可在click事件处理函数中修改如下：
| $(function () { |
| $("#tab>li").click(function () { |
| $(this).addClass("active").siblings("li").removeClass("active"); |
| var index = $(this).index(); |
| $("#container>div").eq(index).fadeIn(300).siblings("div").fadeOut(300); |
| }); |
| }); |
另外，可增加键盘操作支持，比如按Tab键或方向键也能切换tab栏。通过监听keydown事件，判断按键并执行相应的切换逻辑：
| $(document).keydown(function(event) { |
| var tabItems = $('#tab li'); |
| var currentIndex = tabItems.index($('.active')); |
| if (event.key === 'Tab' || event.key === 'ArrowRight') { |
| if (currentIndex < tabItems.length - 1) { |
| tabItems.eq(currentIndex + 1).click(); |
| } |
| } else if (event.key === 'ArrowLeft') { |
| if (currentIndex > 0) { |
| tabItems.eq(currentIndex - 1).click(); |
| } |
| } |
| }); |
