jQuery标签操作
样式操作
样式类操作
//添加指定的css类名
$('元素选择器')addClass('类名'); //移除指定的css类名
removeClass(); //判断样式存不存在
hasClass(); ////切换css类名,有则删除,无则增加
toggleClass();
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1{
width: 300px;
height: 300px;
background-color: pink;
} .c2{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body> <div class="c1"></div> <script src="jQuery.js"></script> <script>
// 添加指定CSS类名(指定CSS类名替换元素选择器指定的标签内容)
$('.c1').addClass('c2'); //移除指定CSS类名
$('.c1').removeClass('c2'); //判断指定CSS类名是否存在
$('.c1').hasClass('c2'); //查看指定CSS类名是否存在,有则删除,无则添加
$('.c1').toggleClass('c2');
</script> </body>
</html>
示例
CSS样式操作
原生js代码:
标签.style.属性 = '值'; jQuery代码:
单个css样式
$('元素选择器').css('属性','值');
设置多个css样式
$('元素选择器').css({'属性':'值',属性2:值2})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1"></div> <script src="jQuery.js"></script> <script>
// 设置单个css样式类
$('.c1').css('color','red'); // 设置多个css样式类
$('.c1').css({'width':'300px','height':'300px','background-color':'yellow'});
</script>
</body>
</html>
示例
jQuery标签操作的更多相关文章
- 前端09 /jQuery标签操作、事件、补充
前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...
- 前端08 /jQuery标签操作、事件
前端08 /jQuery标签操作.事件 目录 前端08 /jQuery标签操作.事件 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文档标签操作 ...
- 转：jQuery 常见操作实现方式
http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...
- jQuery 常见操作实现方式
一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...
- jQuery DOM操作之结点转移复制
jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...
- jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...
- 如何在js或者jquery中操作EL表达式的一个List集合
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...
- jQuery基础操作
1.jQuery的介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...
- JQuery常用操作实现方式
http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...
随机推荐
- shell编程系列26--大型脚本工具开发实战
shell编程系列26--大型脚本工具开发实战 大型脚本工具开发实战 拆分脚本功能,抽象函数 .function get_all_group 返回进程组列表字符串 .function get_all_ ...
- pytorch常用的padding函数
1)ReflectionPad2d CLASS torch.nn.ReflectionPad2d(padding) 使用输入边界的反射来填充输入tensor 对于N维的填充,使用torch.nn.fu ...
- ubuntu2 setting
luo@luo-ThinkPad-W540:research$ conda create -n tf2019 python=3.6Solving environment: done ==> WA ...
- 函数和宏实现打印的增强myprintf
函数和宏实现打印的增强
- Spring Cloud简介 4.1
什么是Spring Cloud Spring Cloud是在Spring Boot的基础上构建的,用于简化分布式系统构建的工具集.该工具集为微服务架构中所涉及的配置管理.服务发现.智能路由.断路器.微 ...
- idea使用快捷键ALT+/的时候，本来想在new后面创建对象，结果又出来一个new
我们知道eclipse的自动提示补齐new 后面的对象的快捷键是ALT+/,当我使用idea的时候,把idea的快捷键换成了eclipse的风格. 然而当我按下ALT+/的时候,就给我自动输入了一个n ...
- 02点睛Spring4.1-Java Config
转载:https://www.iteye.com/blog/wiselyman-2210376 2.1 java config spring的java config主要使用@Configuration ...
- bootstrap：时间日期日历控件（datetimepicker）
https://blog.csdn.net/qq_33368846/article/details/82223676 Bootstrap datetimepicker控件的使用 1.支持日期选择,格式 ...
- docker 在 centos7.* 上的部署及问题解决
最近尝试搭建docker 环境,其实个人是比较喜欢“菜鸟学习系列”的知识的,怎奈它的讲解是以Ubuntu为主的,最后找到一个搭建学习系列,感觉写的很好,主要是页面风格清晰明了,遂决定按照此教程学习搭建 ...
- 【嵌入式硬件Esp32】（1）例程Hello World Example 注释
/* Hello World Example This example code is in the Public Domain (or CC0 licensed, at your option.) ...