jQuery基础--CSS操作、class操作、attr操作、prop操作
1.1.1 css操作
功能：设置或者修改样式，操作的是style属性。
- 设置单个样式
//name：需要设置的样式名称
//value：对应的样式值
css(name, value);
//使用案例
$("#one").css("background","gray");//将背景色修改为灰色
- 设置多个样式
//参数是一个对象，对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
"background":"gray",
"width":"400px",
"height":"200px"
});
- 获取样式
//name:需要获取的样式名称
css(name);
//案例
$("div").css("background-color");
注意：获取样式操作只会返回第一个元素对应的样式值。
隐式迭代：
- 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
- 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。
1.1.1 class操作
- 添加样式类
//name：需要添加的样式类名，注意参数不要带点. addClass(name); //例子,给所有的div添加one的样式。 $(“div”).addClass(“one”);
- 移除样式类
//name:需要移除的样式类名 removeClass(“name”); //例子，移除div中one的样式类名 $(“div”).removeClass(“one”);
- 判断是否有样式类
//name:用于判断的样式类名，返回值为true false hasClass(name) //例子，判断第一个div是否有one的样式类 $(“div”).hasClass(“one”);
- 切换样式类
//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。 toggleClass(name); //例子 $(“div”).toggleClass(“one”);
【案例：tab栏切换案例】
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
} .tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
} .tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
} .tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
} .products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
} .products .main {
float: left;
display: none;
} .products .main.selected {
display: block;
} .tab li.active {
border-color: red;
border-bottom: 0;
} </style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () { $(".tab-item").mouseenter(function () {
//两件事件
$(this).addClass("active").siblings().removeClass("active");
var idx = $(this).index();
$(".main").eq(idx).addClass("selected").siblings().removeClass("selected");
}); });
</script> </head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div> </body>
</html>
属性attr操作
设置属性
//用法和css一样
//设置单个属性
//attr(name, value)
//$("img").attr("alt", "图破了");
//$("img").attr("title", "错错错错"); //设置多个属性
/*$("img").attr({
alt:"图破了",
title:"错错错",
aa:"bb"
})*/
获取属性简单
prop操作
//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
$(function () {
$("input").eq(0).click(function () {
$("#ck").prop("checked", true);
}); $("input").eq(1).click(function () {
$("#ck").prop("checked", false);
});
});
案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} .wrap {
width: 300px;
margin: 100px auto 0;
} table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
} th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
} th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
} td {
font: 14px "微软雅黑";
} tbody tr {
background-color: #f0f0f0;
text-align: center;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧狮子头</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>日式肥牛</td>
<td>田老师</td>
</tr> </tbody>
</table>
</div> <script src="jquery-1.12.4.js"></script>
<script>
$(function () { $("#j_cbAll").click(function () {
//修改下面的哪些checkbox
$("#j_tb input").prop("checked", $(this).prop("checked"));
}); $("#j_tb input").click(function () { if($("#j_tb input:checked").length == $("#j_tb input").length){
$("#j_cbAll").prop("checked", true)
}else {
$("#j_cbAll").prop("checked", false)
} }); });
</script> </body>
</html>
jQuery基础--CSS操作、class操作、attr操作、prop操作的更多相关文章
- Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]
1:属性.attr(name|pro|key,val|key,fn)与removeAttr(name) 1.1 .attr(name) 参数name为属性名称 <a id="my_hr ...
- 第四篇 前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
- jQuery中attr()、prop()、data()用法及区别
.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...
- 查找索引/ie滤镜/动态背景/属性attr和prop
1. 查找索引 查找当前元素在指定范围内的索引序号,示例: $('.right_newestState_con').find('em').index($(this)); 2. ie滤镜 利用ie的私有 ...
- jQuery基础DOM和CSS操作
$('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...
- jQuery(基础dom及css操作)
设置元素内容 元素属性操作 ---------- 元素样式操作 ---------------- 对象数组的遍历 测试代码: $(function () { var v=$('div').css([' ...
- jQuery基础知识点（DOM操作）
1.样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性值 $(selector).css(“color”, ...
- jQuery attr removeAttr 属性操作
jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...
- jQuery基础操作
1.jQuery的介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...
随机推荐
- hadoop编程小技巧（1）---map端聚合
測试hadoop版本号:2.4 Map端聚合的应用场景:当我们仅仅关心全部数据中的部分数据时,而且数据能够放入内存中. 使用的优点:能够大大减小网络数据的传输量,提高效率: 一般编程思路:在Mapp ...
- Cannot change column 'id': used in a foreign key constraint
原因:为表添加自增长,但由于该表有外键而报错 发现是因为外键的影响,不能随便的更改表结构. 要想更改表结构,首先要把基层的表修改了. A表 作为B表的外键,A表不能随便修改. B表 有A表的外键,必须 ...
- ubuntu下载地址
http://mirrors.aliyun.com/ubuntu-releases/16.04/
- xargs 将标准输入转换成命令行参数
1. 命令功能 xargs 命令过滤器,接收管道或者标准输入传递的数据转换成xargs命令. 2. 语法格式 xargs [option] xargs 选项 参数 参数说明 -n 指定每行的最大参数 ...
- tpcc-mysql测试mysql5.6 （EXT4文件系统）
操作系统版本:CentOS release 6.5 (Final) 2.6.32-431.el6.x86_64 #1 内存:32G CPU:Intel(R) Xeon(R) CPU E5-2450 ...
- JVM加载class文件原理
装载的概念 所谓装载就是寻找一个类或是一个接口的二进制形式并用该二进制形式来构造代表这个类或是这个接口的class对象的过程. Java中类装载器装载类到虚拟机 在Java中,类装载器把一个类装入Ja ...
- 利用docker制作一个带有redis软件的镜像,供其他人使用
1. 宿主机在etc/apt/下创建一个haha的文件夹 2.宿主机将haha文件夹映射到容器的虚拟系统中etc/apt/ 3. 此时,可以在宿主机和容器虚拟机中同步创建和删除文件 4. 将宿主机中的 ...
- 自定义日志注解 + AOP实现记录操作日志
需求:系统中经常需要记录员工的操作日志和用户的活动日志,简单的做法在每个需要的方法中进行日志保存操作, 但这样对业务代码入侵性太大,下面就结合AOP和自定义日志注解实现更方便的日志记录 首先看 ...
- Selenium-三种等待方式
在UI自动化测试中,必然会遇到环境不稳定,网络慢的情况,这时如果不做任何处理的话,代码会由于没有找到元素而报错.这时我们就要用到wait,而在Selenium中,我们可以用到一共三种等待,每一种等待都 ...
- python内建模块——collections模块
在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict.namedtuple和Ord ...