jq-css、class、属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aa{
background-color: pink;
}
.bb{
font-size: 30px;
}
.cr{
color: red;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<input type="button" value="添加类">
<input type="button" value="移除类">
<input type="button" value="判断cr类">
<input type="button" value="切换类">
<input type="button" value="修改属性">
<input type="text">
<ul>
<li class="aa bb">周二珂</li>
<li class="aa bb">周二珂</li>
<li class="aa bb">周二珂</li>
<li class="aa bb">周二珂</li>
</ul>
<input type="button" value="选中" id="ck1">
<input type="button" value="不选中" id="ck2">
<input type="checkbox" id="ck">
<!--css操作-->
<script>
//css操作
//第一种---操作单个样式
/**
* css("name","value")---修改单个样式
* $("li").css("background","pink")
* .css("fontSize","30px")
* .css("color","#fff");
*/
//第二种---操作多个样式
/**
* css(obj)---修改多个样式
* $("li").css({
* background:"pink",
* color:"red",
* fontSize:"30px"
* })
*/
//第三种---获取样式
/**
* css(name)---获取样式
* $("li").css("fontSize")---获取字体的大小
*
* 隐式迭代:
* 设置操作的时候:会给jq内部的所有对象都设置上相同的值。
* 获取的时候:只会返回第一个元素对应的值。
*
* 如果给每个li标签设置不同的字体大小,当获取时,获取的是第一个li标签的字体大小
*/
</script>
<!--class操作-->
<script>
// 添加类---addClass("类名");
$("input").eq(0).click(function(){
$("li").addClass("cr");
});
// 移除类---removeClass("类名");
$("input").eq(1).click(function(){
$("li").removeClass("cr");
});
// 判断类---hasClass("类名");
$("input").eq(2).click(function(){
console.log($("li").hasClass("cr"));
});
// 切换类---toggleClass("类名");----判断有没有这个类,有则移除,没有则添加
// toggle--切换
$("input").eq(3).click(function(){
$("li").toggleClass("cr");
});
</script>
<!--属性操作-->
<script>
// 设置属性---attr
$("input").eq(4).click(function () {
$("input").eq(5).attr("value","++++++");
$("input").eq(5).attr({
// 通过对象的方法设置多个属性
// 可以添加自定义属性
aa:"bb",
bb:"cc"
});
});
// 获取属性值---attr
// 对于布尔类型的属性,不要用attr,用prop,用法与attr一样
// 若是用attr则只会执行一次
$("#ck1").click(function () {
$("#ck").prop("checked",true);
});
$("#ck2").click(function () {
$("#ck").prop("checked",false);
});
</script>
<!--return false--阻止跳转-->
</body>
</html>
jq-css、class、属性操作的更多相关文章
- 前端之CSS:属性操作2
css样式之属性操作 一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.te ...
- 前端之CSS:属性操作1
css之操作属性 1.文本 1.文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0, ...
- CSS之属性操作
(1)css text 文本 文本颜色:color 颜色属性被用来设置文字的颜色 颜色是通过css最经常的指定: *十六进制值—如:#FF0000 *一个RGB值---如:RGB(255,0,0) * ...
- 修改css样式+jq中的效果+属性操作+元素操作
:checked 选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color '); //300px 2.参数是属性名,属性值,逗号分隔,是 ...
- 2018-06-27 jq文档处理与jq对象属性操作
jQ文档处理: 内部插入 A.append(B) ->把B后追加到A内部中 B.appendTo(A) ->把B后追加到A内部中 A.prepend(B) ->把B后追加到A内部中 ...
- jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点
css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...
- jQuery 属性操作和CSS 操作
如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...
- CSS属性操作/下
CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...
- CSS属性操作
CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...
- JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器
今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom 想用jquery 必须先引入(顺序问题) 先css 再js: ...
随机推荐
- Linux(Ubuntu 16) 下Java开发环境的配置(三)------Mysql配置
前言 吐槽一句,如果在Ubuntu在默认情况下是只有最新的MySQL源的,即如果使用"sudo apt-get install mysql-server mysql-client " ...
- vue 使用微信JSSDK,在IOS端会授权出错
原因: vue-router切换的时候操作的都是浏览器的历史记录,iOS会把第一次刚进入时的URL作为真实URL,安卓会把当前URL作为真实URL. 所以导致后端在配置好的授权参数获得的config参 ...
- Win10 + Ubuntu双系统,删除Ubuntu系统
之前在电脑上装了win10 + ubuntu的双系统,偶尔会出问题,所以还是选择将ubuntu系统删掉. 正所谓“请神容易送神难”,安装ubuntu的时候,过程还算顺利,但是在删除Ubuntu的过程中 ...
- [SimplePlayer] 3. 视频帧同步
Frame Rate 帧率代表的是每一秒所播放的视频图像数目.通常,视频都会有固定的帧率,具体点地说是每一帧的时间间隔都是一样的,这种情况简称为CFR(Constant Frame Rate);另外一 ...
- P2613 有理数取余
原题链接 https://www.luogu.org/problemnew/show/P2613 在这里虽然是讲洛谷的题解,但用到的数论知识,归并到数论里也不为过! 进入正题: 首先看到题面:给出一个 ...
- Flask websocket
websocket 概念 是一套协议,协议规定了: - 连接时需要握手 - 发送数据进行加密 - 连接之后不断开 意义 实现长轮询等操作 框架支持 - flask,gevent-websocket - ...
- 欧拉筛法模板and 洛谷 P3383 【模板】线性筛素数(包括清北的一些方法)
题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入格式 第一行包含两个正整数N.M,分别表示查询的范围和查询的个数. 接下来M行每行包含一个不小于1 ...
- 题解-洛谷P1601 A+B Problem(高精)
https://www.luogu.org/problemnew/show/P1601(题目传送) 显然数据范围超过了long long类型,故不能简单的用两个长整型存起来相加.这里用到大数据的高精度 ...
- c++三种继承方式public,protect,private
C++中的三种继承public,protected,private 三种访问权限 public:可以被任意实体访问 protected:只允许子类及本类的成员函数访问 private:只允许本类的成员 ...
- 数据库导出excel,前后端分离
主要参考了这篇博文:https://www.cnblogs.com/jerehedu/p/4343509.html 2.3和2.4 采用xssf,依赖:compile group: 'org.apa ...