jQuery 的CSS方法、事件、CSS类、动画
jQuery 的CSS方法
css() 方法设置或返回被选元素的一个或多个样式属性
1、返回样式属性 对象.css(‘css属性名’)
获取颜色获取的是 rgb()
2、设置样式属性:对象.css(‘css属性名’,‘css属性值’)
事件:jQuery对象.事件类型(处理程序)
jQuery 的事件
事件:事件源.事件类型(事件的处理程序) 事件类型 不加 on
$('#box').click(function () {
console.log('测试');
})
$('#box').dblclick(function () {
console.log(this);
$(this).css('width', '300px')
})
$('#box').mousemove(function () {
$(this).css('background-color', 'green')
})
$('.input').blur(function () {
console.log($(this).value);
console.log($(this).val());
})
jQuery 的CSS类
1、addClass() 向被选元素添加一个或多个类
2、removeClass() 向被选元素删除一个或多个类
3、toggleClass 切换类名
<style>
.box {
height: 200px;
background-color: aquamarine;
}
.box_1 {
color: red;
}
.box_2 {
font-size: 30px;
}
.select {
background-color: black;
}
</style>
<body>
<div class="box">
我是盒子
</div>
<button id="add">添加</button>
<button id="remove">删除</button>
<button id="toggle">切换</button>
</body>
<script>
//1、addClass() 向被选元素添加一个或多个类
// document.getElementsByClassName('box')[0].className = 'box_1'
$('#add').click(function () {
$('.box').addClass('box_1 box_2')
})
// 2、removeClass() 向被选元素删除一个或多个类
$('#remove').click(function () {
$('.box').removeClass('box box_1')
})
// 3、toggleClass 切换类名
$('#toggle').click(function () {
$('body').toggleClass('select')
})
</script>
jQuery 的动画
1、可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
2、fadeIn() 用于淡入已隐藏的元素, fadeOut() 方法用于淡出可见元素。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
3、 slideDown() 方法用于向下滑动元素, slideUp() 方法用于向上滑动元素。
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
4、animate() 方法用于创建自定义动画。 不可以改变颜色 需要插件
jQuery stop() 方法用于停止动画或效果
回调函数 在当前动画 100% 完成之后执行
<style>
#box {
width: 400px;
height: 400px;
background-color: red;
}
#move {
position: relative;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<body>
<button id="hide">hide</button>
<button id="show">show</button>
<button id="toggle">toggle</button>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
<button id="slideDown">slideDown</button>
<button id="slideUp">slideUp</button>
<button id="slideToggle">slideToggle</button>
<button id="animate">animate</button>
<button id="STOP">STOP</button>
<div id="box"></div>
<div id="move">我是盒子会移动</div>
</body>
<script>
// 1、可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$('#hide').click(function () {
$('#box').hide()
})
$('#show').click(function () {
$('#box').show()
})
// 可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$('#toggle').click(function () {
$('#box').toggle()
})
// 2、fadeIn() 用于淡入已隐藏的元素, fadeOut() 方法用于淡出可见元素。
$('#fadeIn').click(function () {
$('#box').fadeIn(2000)
})
$('#fadeOut').click(function () {
$('#box').fadeOut(3000)
})
// fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
$('#fadeToggle').click(function () {
$('#box').fadeToggle(2000)
})
// 3、 slideDown() 方法用于向下滑动元素, slideUp() 方法用于向上滑动元素。
$('#slideDown').click(function () {
$('#box').slideDown(5000)
})
$('#slideUp').click(function () {
$('#box').slideUp(5000, function () {
$('#box').slideDown(5000)
})
})
// slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
$('#slideToggle').click(function () {
$('#box').slideToggle(5000)
})
// 4、animate() 方法用于创建自定义动画。 不可以改变颜色 需要插件
$('#animate').click(function () {
$('#move').animate({
left: '100px',
width: '300px',
fontSize: '30px',
'background-color': 'blue'
}, 3000, function () {
console.log('123123');
})
})
// jQuery stop() 方法用于停止动画或效果
$('#STOP').click(function () {
$('#move').stop()
})
// 回调函数 在当前动画 100% 完成之后执行
</script>