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 常用方法及函数的文章留存备 ...
随机推荐
- Dart介绍和环境搭建
/* Dart介绍: Dart是由谷歌开发的计算机编程语言,它可以被用于web.服务器.移动应用 和物联网等领域的开发. Dart诞生于2011年,号称要取代JavaScript.但是过去的几年中一直 ...
- android 应用签名的作用
来源:https://www.jianshu.com/p/61206c96471a 1..应用程序升级:如果你希望用户无缝升级到新的版本,那么你必须用同一个证书进行签名.这是由于只有以同一个证书签名, ...
- 123457123456#5#----com.MC.HuaHuaGame866----前拼后广--babyDrawGame-mc555
com.MC.HuaHuaGame866----前拼后广--babyDrawGame-mc
- ABAP语法篇2 内表操作语法
VALUE MOVE-CORRESPONDING CORRESPOING FOR REDUCE GROUP BY FILTER VALUE语法: 结构赋值 ... VALUE dtype | #( ...
- Python - Django - ORM 聚合查询和分组查询
models.py: from django.db import models # 出版社 class Publisher(models.Model): id = models.AutoField(p ...
- Vue + ElementUI的电商管理系统实例01 登录表单
效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div cl ...
- 基于libuv的TCP设计（一）
本人一直在寻找一个跨平台的网络库,boost与ACE比较庞大,不考虑.对比了libevent,libev,libuv后,最终选择了libuv.可libuv文档少,例子也简单,对于tcp只有个echo- ...
- 软件素材---linux C语言：拼接字符串函数 strcat的用例(与char数组联合使用挺好)
[头文件]#include <string.h> [原型] 1 char *strcat(char *dest, const char *src); [参数]: dest 为目标字符串指针 ...
- 032 Android智能下拉刷新框架-SmartRefreshLayout+RecyclerView的使用
1.SmartRefreshLayout介绍 SmartRefreshLayout的目标是打造一个强大,稳定,成熟的下拉刷新框架,并集成各种的炫酷.多样.实用.美观的Header和Footer. 正如 ...
- [转帖]ORM框架的前世今生
ORM框架的前世今生 https://www.cnblogs.com/7tiny/p/9551754.html 目录 一.ORM简介二.ORM的工作原理三.ORM的优缺点四.常见的ORM框架 一.OR ...