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 常用方法及函数的文章留存备 ...
随机推荐
- flutter中使用shared_preferences的存储
添加依赖 shared_preferences: ^+ 工具类 import 'dart:async'; import 'package:shared_preferences/shared_prefe ...
- Dart接口
/* 和Java一样,dart也有接口,但是和Java还是有区别的. 首先,dart的接口没有interface关键字定义接口,而是普通类或抽象类都可以作为接口被实现. 同样使用implements关 ...
- nginx奔溃自动重启Shell脚本
# vi /usr/local/nginx/sbin/nginx_restart.sh 贴入一下代码: #!/bin/bash #www.xmsolink.com #Monitor nginx ser ...
- Fragment already added问题的解决
问题 当快速点击切换不同的Fragment的时候部分手机的app竟然挂了,报出了下面的错误 Fragment already added java.lang.IllegalStateExcepti ...
- 使用Commons math做数值计算
使用Commons math做数值计算 觉得有用的话,欢迎一起讨论相互学习~Follow Me 最近使用jmetal做多目标的时候,想用一些简单的方法求最大值最小值方差和协方差矩阵,但是原生代码真的是 ...
- C#给图片加水印,可设置透明度
C#给图片加水印,可设置透明度,设置水印的位置可以看一下上一篇哈 /// <summary> /// Creating a Watermarked Photograph with GDI+ ...
- 04点睛Spring4.1-资源调用
转发:https://www.iteye.com/blog/wiselyman-2210666 4.1 Resource spring用来调用外部资源数据的方式 支持调用文件或者是网址 在系统中调用p ...
- 19-js策略模式
var PriceStrategy = function() { var stragtegy = { return30: function(price) { return +price + parse ...
- SQL优化——select
MYSQL优化实施方案:https://www.cnblogs.com/clsn/p/8214048.html 对查询时经常用到的字段建立索引,如包含多个也可以构建复合索引,建立索引之后需要注意的一点 ...
- TCP/IP学习笔记9--以太网之基本概念1： 分类，连接方式
时间是变化的财富.时钟模仿它,却只有变化而无财富. -- 泰戈尔 以太网(Ethernet)一词源于Ether(以太), 是介质的意思.在爱因斯坦哥们提出量子力学之前,人们普遍认为宇宙空间充满以太,并 ...