jQuery 样式操作
时间:2022-07-26
本文章向大家介绍jQuery 样式操作,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jQuery中常用的样式操作有两种:css() 和 设置类样式方法
1. 方法1: 操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。
常用以下三种形式 :
// 1.参数只写属性名,则是返回属性值
var strColor = $(this).css('color');
// 2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css('color', red');
// 3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
注意:css() 多用于样式少时操作,多了则不太方便。
<script>
//操作样式之css方法
$(function() {
console .1og($("div").css("width"));
// $("div").css("width", "300px");
// $("div").css("width", 300); 值是数字则可以不用加引号
// $("div").css(height, "300px"); 属性名一定要加引号
$("div" ).css({
width: 400 ,
height: 400,
backgroundColor: "red"
// 如果是复合属性则必须采取驼峰命名法, 如果值不是数字,则需要加引号
})
})
</script>
2. 方法2: 设置类样式方法
作用等同于以前的 classList,可以操作类样式, 注意操作类里面的参数不要加点。
常用的三种设置类样式方法:
// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");
注意:
- 设置类样式方法比较适合样式多时操作,可以弥补css()的不足。
- 原生 JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。
3. 案例:tab 栏切换
思路分析: 1.点击上部的li,当前li 添加current类,其余兄弟移除类。 2.点击的同时,得到当前li 的索引号 3.让下部里面相应索引号的item显示,其余的item隐藏
<script>
$(function () {
$('.tab_list li').click(function () {
// 1.点击上面小li,当前小li添加current类,其余的li移除
$(this).addClass('current').siblings().removeClass();
// 2.得到点击的小li的索引号
var index = $(this).index();
// console.log(index);
// 3.让下面相应索引号的item显示,其余的item隐藏
$('.item').eq(index).show().siblings().hide();
});
})
</script>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 宏任务和微任务到底是什么?
- React中的setState是异步的吗?
- java安全编码指南之:堆污染Heap pollution
- ECMAScript6基础学习教程(五)对象
- React入门系列(三)创建组件
- prometheus学习笔记(2)-利用java client写入数据
- Vue入门系列(一)Vue技术栈
- Openwrt智能路由系统开发--内容总结
- 干爆红队-爆破CS Teamserver 密码
- 使用Golang免杀Tips
- centos7卸载自带jdk并安装新的jdk
- 即使不懂单元测试,会用这个工具也够了~
- 统计分布讲解
- 使用PyTorch Lightning自动训练你的深度神经网络
- linux防火墙相关配置命令及操作(centos和ubuntu)