<!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、属性操作的更多相关文章

  1. 前端之CSS：属性操作2

    css样式之属性操作 一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.te ...

  2. 前端之CSS：属性操作1

    css之操作属性 1.文本 1.文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0, ...

  3. CSS之属性操作

    (1)css text 文本 文本颜色:color 颜色属性被用来设置文字的颜色 颜色是通过css最经常的指定: *十六进制值—如:#FF0000 *一个RGB值---如:RGB(255,0,0) * ...

  4. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

  5. 2018-06-27 jq文档处理与jq对象属性操作

    jQ文档处理: 内部插入 A.append(B) ->把B后追加到A内部中 B.appendTo(A) ->把B后追加到A内部中 A.prepend(B) ->把B后追加到A内部中 ...

  6. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  7. jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

  8. CSS属性操作/下

    CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...

  9. CSS属性操作

    CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...

  10. JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器

    今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom    想用jquery  必须先引入(顺序问题)        先css 再js:   ...

随机推荐

  1. mysql-笔记--增删改查

    查看数据库:可以使用 show databases; 命令查看已经创建了哪些数据库 指定数据库:在登录后使用 use 语句指定, 命令: use 数据库名;要对一个数据库进行操作, 必须先选择该数据库 ...

  2. BZOJ 3669 魔法森林

    LCT维护生成树 先按照a的权值把边排序,离线维护b的最小生成树. 将a排序后,依次动态加边,我们只需要关注b的值.要保证1-n花费最少,两点间的b值肯定是越小越好,所以我们可以考虑以b为关键字维护最 ...

  3. Django 模板系统

    Django模板系统 常用语法 {{}} 变量相关 {%%} 逻辑相关 变量 格式 {{ 变量名 }} 命名规则 包括任何字母数字以及下划线 ("_")的组合 变量名称中不能有空格 ...

  4. 【JVM】类加载机制

    原文:[深入Java虚拟机]之四:类加载机制 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载.验证.准备.解析.初始化.使用和卸载七个阶段.它们开始的顺序如下图所示: 类加 ...

  5. VirtualBox下安装linux虚拟机

    下载VirtualBox 下载地址:https://www.virtualbox.org/wiki/Downloads 安装VirtualBox 安装虚拟机 如果选择不到64位系统, 开机按 F1 进 ...

  6. poj 2955 Brackets (区间dp 括号匹配)

    Description We give the following inductive definition of a “regular brackets” sequence: the empty s ...

  7. Mysql注入小tips --持续更新中

    学习Web安全好几年了,接触最多的是Sql注入,一直最不熟悉的也是Sql注入.OWASP中,Sql注入危害绝对是Top1.花了一点时间研究了下Mysql类型的注入. 文章中的tips将会持续更新,先说 ...

  8. 关于进程、线程、应用程序域（AppDomain）

    什么是进程?什么是线程?什么是应用程序集?及三者之间的关系(以下做一些简单的概念性的理解) 三者共同的基础对象!!!——应用程序 1.进程是操作系统用于隔离众多正在运行的应用程序的机制,进程的缺点是降 ...

  9. Redux Todos Example

    此项目模板是使用Create React App构建的,它提供了一种简单的方法来启动React项目而无需构建配置. 使用Create-React-App构建的项目包括对ES6语法的支持,以及几种非官方 ...

  10. saltstack主机管理项目：动态调用插件解析-模块解析（五）

    一.动态调用插件解析 1.目录结构 1.base_module代码解析: def syntax_parser(self,section_name,mod_name,mod_data): print(& ...