目录
1.css()方法
2.show()和hide()方法
3.sildUp()和sildDown()方法
4.fadeIn()和addClass()方法
5.addClass()/removeClass()
6.attr()和html()方法
公共部分：
<div class="div1"></div>
<br/>
<div class="div2"></div><script src="js/jquery-1.12.3.min.js"></script>
<style>
.div1 {
width: 100px;
height: 100px;
border: 1px solid
}
.div2 {
width: 100px;
height: 100px;
border: 1px solid
}
</style>1.css()方法
描述：本方法是jq对象读写css样式的方法，相当于js中的style属性
语法：jq对象.css("key","value");
注意：
第一个参数是必要的，第二个参数是可选的
如果只有一个参数则代表读取属性的值，而写两个参数代表设置属性的值。
<script>
$('.div1').click(function() {
$(this).css('background-color', 'red');
});
$('.div2').click(function() {
console.log($('.div1').css('background-color'));
});
</script>
当鼠标单击div1区域和单击div2区域时：
(3)如果css()方法需要一次修改多个样式，则参数可以写成JSON格式
<script>
$('.div1').click(function() {
//$(this).css('border', '5px solid pink');
//$(this).css('width', '200px');
//$(this).css('height', '200px');
//等价于：
$(this).css({
"background-color": "red",
"border": "5px solid pink",
"width": "200px",
"height": "200px"
});
})
</script>
当鼠标单击div1区域时：
注意：
1.书写css属性名字可以用驼峰也可以用短横：
$("div").css("backgroundColor","red");
等价于
$("div").css("background-color","red");
2.当我们的css的值是px为单位的时候，那么此时可以不加px
$("div").css("width","500px");
等价于
$("div").css("width","500");
<script>
$('.div1').click(function() {
//读取，拿到div1原始的宽度并将其字符串格式转为整数类型
var oldWidth = parseInt($(this).css('width'));
oldWidth += 50;
//方式1
// $(this).css('width', oldWidth + 'px');
// 方式2
$(this).css('width', '+=50px');
})
</script>
当鼠标不停地单击div1区域时：
2.show()和hide()方法
描述：show()表示jq对象显示,hide()表示jq对象隐藏
语法：jq对象.show(动画时间)
注意：
a.方法内部的参数是可选的，表示动画执行的时间，单位毫秒，如果不写默认执行时间为0
b.方法的动画实际是宽高的渐变，透明的的渐变
<script src="js/jquery-1.12.3.min.js"></script>
<style>
.div1 {
width: 100px;
height: 100px;
border: 1px solid;
background-color: red
}
</style><div class="div1"></div>
<button>show()</button>
<button>hide()</button>
<button>show(2000)</button>
<button>hide(2000)</button><script>
//获得元素
var $div1 = $('.div1');
$('button:eq(0)').click(function() {
$div1.show();
});
$('button:eq(1)').click(function() {
$div1.hide();
});
$('button:eq(2)').click(function() {
$div1.show(2000);
});
$('button:eq(3)').click(function() {
$div1.hide(2000);
});
</script>
当鼠标单击hide()按钮时：
当鼠标单击show(2000)时，其最终结果为：
当鼠标单击hide(2000)时，其最终结果为：
当鼠标单击show()时：
3.sildUp()和sildDown()方法
描述：slideUp()表示jq对象上滑隐藏，slideDown()表示jq对象下拉显示。
注意：
- 这两个方法即使不写参数，也是默认有一定的动画时间，只不过时间短而已
- 同样的，这两个方法里面可以写数字，表示动画的时间
- 一个元素如果原本是显示的，才能够调用slideUp()方法；如果这个元素是display: none;的才能调用slideDown()方法
slideDown()的机理：
- 如果一个元素是display: none;的，先把高度height设置为0
- 然后瞬间变为display: block;
- 再进行定时器的动画，慢慢变为用户设置的那个height值
例子1：
<script src="js/jquery-1.12.3.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid;
background-color: orange
}
</style><div class="div1"></div>
<button>slideUp()</button>
<button>slideDown()</button>
<button>slideUp(5000)</button>
<button>slideDown(5000)</button><script>
var $div1 = $('.div1');
$('button:eq(0)').click(function() {
$div1.slideUp();
});
$('button:eq(1)').click(function() {
$div1.slideDown();
});
$('button:eq(2)').click(function() {
$div1.slideUp(5000);
});
$('button:eq(3)').click(function() {
$div1.slideDown(5000);
});
</script>
强调：
1.对于两个方法存在一个隐藏的属性，称为”边界“，默认是上边界。
边界时可以手动设置的，通过定位来设置jq对象的属性(边界)。
例子2：
<script src="js/jquery-1.12.3.min.js"></script>
<style>
.container {
width: 150px;
height: 300px;
border: 1px solid;
margin: 100px auto;
position: relative
}
.show {
width: 100%;
height: 150px;
background-color: skyblue;
position: absolute;
/*以下边界作为边界*/
bottom: 0;
display: none;
}
</style><div class="container">
这是div
<div class="show"></div>
</div><script>
var $show = $('.show');
$('.container').mouseenter(function() {
//鼠标进入，下拉出现
$show.stop(true).slideDown();
}).mouseleave(function() {
//鼠标离开，上滑隐藏
$show.stop(true).slideUp();
});
</script>
当鼠标进入到div区域时：
4.fadeIn()和addClass()方法
描述：fadeIn()表示淡入/fadeOut()表示淡出。
注意：
- 淡入和淡出的起始点和终止点分别为display：none和display：block而不是opacity 0---1
- 也就是说一个元素如果想淡入，一定要给这个元素加上display：none;属性，而不要给它加上opacity: 0;属性
- 同样的fadeIn()和fadeOut()的函数括号里面可以加数字，表示动画的时间
公共部分：
<script src="js/jquery-1.12.3.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid;
}
.bgRed {
background-color: red
}
</style>fadeIn()/fadeOut()：
<div class="div1"></div>
<button>fadeIn()</button>
<button>fadeOut()</button>
<button>fadeIn(5000)</button>
<button>fadeOut(5000)</button><script>
var $div1 = $('.div1');
$('button:eq(0)').click(function() {
$div1.fadeIn();
});
$('button:eq(1)').click(function() {
$div1.fadeOut();
});
$('button:eq(2)').click(function() {
$div1.fadeIn(5000);
});
$('button:eq(3)').click(function() {
$div1.fadeOut(5000);
});
</script>
5.addClass()/removeClass()
描述：
- addClass()追加类，在原来的基础上添加一个类的属性值
- removeClass()移除类，在原来的基础上移除一个类的属性值
语法：
jq对象.addcLass('类名')/jq对象.removeClass('类名')
注意：这两个方法的参数是类名，不是选择器。
<div class="div1"></div>
<button>addClass()</button>
<button>removeClass()</button><script>
var $div1 = $('.div1');
$('button:eq(0)').click(function() {
$div1.addClass('bgRed');
});
$('button:eq(1)').click(function() {
$div1.removeClass('bgRed');
});
</script>
6.attr()和html()方法
1.attr()方法
描述：用来修改jq对象的属性，这个方法会覆盖原来的属性值。
语法：jq对象.attr('属性名','属性值');
注意：
第二个参数时可选的。
如果不写第二个参数则代表读取这个属性的属性值。
如果有两个参数，则表示设置jq对象的属性。
<img src="img/longlong.jpg" alt="" /><script>
$('img').mouseenter(function() {
$(this).attr('src', 'img/shishi.jpg');
}).mouseleave(function() {
$(this).attr('src', 'img/longlong.jpg');
})
console.log($('img').attr('src'));
</script>
2.html()方法
描述：用来读取和更改元素内部的内容，作用和原生的innerHTML属性是一样的。
语法：jq对象.html(文本内容);
注意：如果本方法没有参数，代表读取内容。如果写了参数，代表设置内容。
<div style="width: 100px;height: 100px;border: 1px solid">北京</div><script>
var num = 0;
var timer = null;
timer = setInterval(function() {
$('div').html(++num);
}, 10);
console.log($('div').html());
</script>
