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 常用方法及函数的文章留存备 ...
随机推荐
- 蒙特卡洛树搜索算法 —— github上的implement的原代码
首先在网上看到了关于蒙特卡洛搜索算法的介绍,如下: https://www.cnblogs.com/steven-yang/p/5993205.html 并从中发现了一个在GitHub上impleme ...
- Python3基础 str : 对字符串进行切片
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- 005-guava 集合-集合工具类-java.util.Collections中未包含的集合工具[Maps,Lists,Sets]，Iterables、Multisets、Multimaps、Tables
一.概述 工具类与特定集合接口的对应关系归纳如下: 集合接口 属于JDK还是Guava 对应的Guava工具类 Collection JDK Collections2:不要和java.util.Col ...
- 【Java】Spring快速入门（一）
Spring介绍 Spring可以轻松创建Java企业应用程序.它提供了在企业环境中使用Java语言所需的一切,支持Groovy和Kotlin作为JVM上的替代语言,并可根据应用程序的需要灵活地创建多 ...
- RabbitMQ 入门教程(PHP版) 第二部分:工作队列（Work queues）
工作队列 在第一篇教程中,我们已经写了一个从已知队列中发送和获取消息的程序.在这篇教程中,我们将创建一个工作队列(Work Queue),它会发送一些耗时的任务给多个工作者(Works ). 工作队列 ...
- C#DbHelperOleDb,Access数据库帮助类 （转）
/// <summary>/// 编 码 人:苏飞/// 联系方式:361983679 /// 更新网站:[url=http://www.sufeinet.com/thread-655- ...
- LeetCode_202. Happy Number
202. Happy Number Easy Write an algorithm to determine if a number is "happy". A happy num ...
- 【Leetcode_easy】840. Magic Squares In Grid
problem 840. Magic Squares In Grid solution: class Solution { public: int numMagicSquaresInside(vect ...
- vue 静态资源文件夹src下的assets 和static的区别
static下的静态资源在项目打包的时候,直接在dist文件夹下直接把static文件夹打包进去src下的assets,在打包时,vue是按照模块来引入里面的静态资源,一般使用这种方式
- Mysql sqlyog 错误1045
首先打开运行窗口输入cmd进入DOS界面或者打开MySQL Workbench Step1: cd C:\Program Files\MySQL\MySQL Server 5.6\bin Step2: ...