jQuery的属性与样式之增加样式.addClass()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left,.right {width: 300px;height: 120px;}
.left div,
.right div {width: 100px;height: 90px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}
.newClass{background: blue;}
.imoocClass{background: red;}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.addClss()方法</h2>
<div class="left">
<div class="vegeta">
<p>newClass</p>
</div>
<div class="vegeta">
<p>newClass</p>
</div>
</div>
<div class="right">
<div class="aa bb imooc">
<article>
<p>imoocClass</p>
</article>
</div>
<div class="bb cc imooc ">
<article>
<p>imoocClass</p>
</article>
</div>
</div>
<script type="text/javascript">
//class=left下div元素增加一个新的样式，增加背景颜色
$('.left div').addClass('newClass')
</script>
<script type="text/javascript">
//通过className(fucntion)方法
//这个函数返回一个或更多用空格隔开的要增加的样式名。
//接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容
//找到所有的div，然后通过addClass设置颜色，根据返回的className的判断，
$("div").addClass(function(index,className) {
//找到类名中包含了imooc的元素
if(-1 !== className.indexOf('imooc')){
//this指向匹配元素集合中的当前元素
$(this).addClass('imoocClass')
}
});
</script>
</body>
</html>
jQuery的属性与样式之删除样式.removeClass()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left,.right {width: 300px;height: 120px;}
.left div,.right div {width: 100px;height: 90px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}
.newClass{background: #bbffaa;}
.imoocClass{background: red;}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.removeClass()方法</h2>
<div class="left">
<div class="vegeta newClass">
<p>newClass</p>
</div>
<div class="vegeta newClass">
<p>newClass</p>
</div>
</div>
<div class="right">
<div class="aa bb imoocClass">
<article>
<p>imoocClass</p>
</article>
</div>
<div>
<article>
<p>imoocClass</p>
</article>
</div>
</div>
<script type="text/javascript">
//class=left下div元素删除newClass样式
$('.left div').removeClass('newClass')
//.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式
$('.right > div:first').removeClass(function(index,className){
//className = aa bb imoocClass
//把div的className赋给下一个兄弟元素div上作为它的class
$(this).next().addClass(className)
//删除自己本身的imoocClass
return 'imoocClass'
})
</script>
</body>
</html>
jQuery的属性与样式之切换样式.toggleClass()
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>隔行换色</title>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
.h {background: red;}
.c {color: blue;}
</style>
</head>
<body>
<h4>.toggleClass(className)和.toggleClass(className,switch)</h4>
<table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td>慕课jQuery入门</td>
<td>慕课jQuery入门</td>
</tr>
<tr>
<td>慕课jQuery入门</td>
<td>慕课jQuery入门</td>
</tr>
<tr>
<td>慕课jQuery入门</td>
<td>慕课jQuery入门</td>
</tr>
<tr>
<td>慕课jQuery入门</td>
<td>慕课jQuery入门</td>
</tr>
<tr>
<td>慕课jQuery入门</td>
<td>慕课jQuery入门</td>
</tr>
</table>
</div>
<script type="text/javascript">
//给所有的tr元素加一个class="c"的样式
$("#table tr").toggleClass("c");
//给所有的偶数tr元素切换class="c"的样式
//所有奇数的样式保留，偶数的被删除
$("#table tr:odd").toggleClass("c");
//第二个参数判断样式类是否应该被添加或删除
//true，那么这个样式类将被添加;
//false，那么这个样式类将被移除
//所有的奇数tr元素，应该都保留class="c"样式
$("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
</script>
</body>
</html>
jQuery的属性与样式之样式操作.css()
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>获取css属性</h3>
<div class="first" style="background-color: pink;">获取颜色</div>
<p></p>
<div class="second">获取文字尺寸</div>
<p></p>
<div class="third">获取宽高尺寸</div>
<p></p>
<script type="text/javascript">
//background-color:blue; => rgb(0, 0, 255)
//颜色都会转化成统一的rgb标示
$('p:eq(0)').text( $('.first').css("background-color") )
//字体大小都会转化成统px大小 em=>px
$('p:eq(1)').text( $('.first').css("font-size") )
//获取尺寸，传入CSS属性组成的一个数组
//{width: "60px", height: "60px"}
var value = $('.first').css(['width','height']);
//因为获取的是一个对象，取到对应的值
$('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height )
</script>
<h3>设置css属性</h3>
<div class="fourth">设置颜色设置文字尺寸</div>
<div class="fifth">设置颜色设置文字尺寸</div>
<div class="sixth">通过回调设置新的值</div>
<div class="seventh">同时设置多少个样式</div>
<script type="text/javascript">
//多种写法设置颜色
$('.fourth').css("background-color","red")
$('.fifth').css("backgroundColor","yellow")
//多种写法设置字体大小
$('.fourth').css("font-size","20px")
$('.fifth').css("fontSize","1em")
//获取到指定元素的宽度，在回调返回宽度值
//通过处理这个value，重新设置新的宽度
$('.sixth').css("width",function(index,value){
//value带单位，先分解
value = value.split('px');
//返回一个新的值，在原有的值上，增加50px
return (Number(value[0]) + 50) + value[1];
})
//合并设置,通过对象传设置多个样式
$('.seventh').css({
'font-size' :"20px",
"background-color" :"pink",
"border" :"1px dashed blue"
})
</script>
</body>
</html>
jQuery的属性与样式之.css()与.addClass()设置样式的区别
通过.css方法设置的样式属性优先级要高于.addClass方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left,.right {width: 300px;height: 120px;}
.left div,.right div {width: 200px;height: 90px;padding: 5px;margin: 5px;float: left;}
a{font-size: 14px;display:block;}
.newClass{background: yellow;}
.addBorder{border: 1px solid red;}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.addClass()与.css()方法区别</h2>
<div class="left">
<div class="vegeta">
<a>css优先级高于addClass</a>
<a>1：第一次addClss背景色</a>
<a>2：第二次css修改背景色</a>
</div>
</div>
<script type="text/javascript">
//给所有的div统一增加边框
$('div').addClass('addBorder')
</script>
<script type="text/javascript">
//class=left下div元素增加一个新的样式，增加背景颜色
$('.vegeta').addClass('newClass')
</script>
<script type="text/javascript">
//通过css覆盖addClass方式设置背景色
$('.vegeta').css({
'background':'pink'
})
</script>
</body>
</html>
jQuery的属性与样式之元素的数据存储
html5 dataset是新的HTML5标准，允许你在普通的元素标签里嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由JavaScript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。
Query提供的存储接口
jQuery.data( element, key, value ) //静态接口,存数据
jQuery.data( element, key ) //静态接口,取数据
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left,.right {width: 300px;height: 120px;}
.left div,.right div {width: 100px;height: 90px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}
.left div {background: #bbffaa;}
.right div {background: yellow;}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>jQuery.data()静态方法</h2>
<div class="left">
<div class="aaron">
<p>点击看结果</p>
<p>jQuery.data</p>
</div>
<div><span></span></div>
</div>
<h2>.data()实例方法</h2>
<div class="right">
<div class="aaron">
<p>点击看结果</p>
<p>.data</p>
</div>
<div><span></span></div>
</div>
<script type="text/javascript">
$('.left').click(function() {
var ele = $(this);
//通过$.data方式设置数据
$.data(ele, "a", "data test")
$.data(ele, "b", {
name : "慕课网"
})
//通过$.data方式取出数据
var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
ele.find('span').append(reset)
})
</script>
<script type="text/javascript">
$('.right').click(function() {
var ele = $(this);
//通过.data方式设置数据
ele.data("a", "data test")
ele.data("b", {
name: "慕课网"
})
//通过.data()方式取出数据
var reset = ele.data("a") + "</br>" + ele.data("b").name
ele.find('span').append(reset)
})
</script>
</body>
</html>
