jQuery操作样式
css操作
功能：设置或者修改样式，操作的是style属性。
操作单个样式：这种方式一次只能设置一个样式
css(name, value);
//name：需要设置的样式名称
//value：对应的样式值
//使用案例：
$('li').css('color', 'red')
$('li').css('font-size', '30px')
设置多个样式
// obj:对象，每组都是键值对，代码一种样式
// $('li').css({})
/*
如果是有分号隔开的属性名，需要加''。
如css({'font-size':'24px'})
*/
$('li').css({
color: 'red',
'text-decoration': 'underline'
})
获取样式
只能获取满足条件的第一个元素的样式值
console.log($('li').css('color'))
//想要获取所有样式值必须遍历
let $lis = $('li')
for (let i = 0; i < $lis.length; i++) {
console.log($('li').eq(i).css('color'))
}
class操作
添加样式类 ⇒ addClass(name); 相当于js的 dom.classList.add()
name：需要添加的样式类名，注意参数不要带点.
//添加.bordercolor样式
$box.addClass('bordercolor')
移除样式类 ⇒ removeClass(“name”);
//移除.bordercolor样式
$box.removeClass('bordercolor')
判断是否有某个样式类 （查找）⇒ hasClass(name)
console.log($box.hasClass('one'));
//false表示没有 ，true表示有
切换样式类⇒ toggleClass(name);
如果有，移除该样式，如果没有，添加该样式。
$box.toggleClass('bordercolor');
【案例：tab栏切换案例.html】
$(function () {
let $divs = $('.products > div')
// 1.获取元素--导航项
// 2.为li绑定事件：mouseenter
// 3.在事件处理函数中
// 3.1 为当前li元素添加样式，同时将所有兄弟元素的样式移除
// 3.2 让对应的内容面板显示
$('.tab > li').mouseenter(function () {
$(this).addClass('active').siblings().removeClass('active')
// 获取当前li元素的索引
let index = $(this).index()
// show(): 显示
// hide()：隐藏
$divs.eq(index).show().siblings().hide()
})
})
jQuery操作属性
attr操作
设置单个属性、多个属性、获取属性、移除属性
相当于js: getAttribute() setAttribute()
1.一次只能设置一个属性
2.一次只可以获取一个属性
<body>
<img src="./images/06.jpg" alt="图片加载失败显示" title="鼠标移入上去显示内容" id="pic">
<script>
// 访问一个不存在的变量，则报错，访问对象的不存在的属性，返回undefined
console.log(this);
$(function () {
//设置属性 attr(name, value);
//第一个参数：需要设置的属性名
//第二个参数：对应的属性值
$('img').attr('name', 'jack');
//设置多个属性
$('img').attr({
name: 'jack',
age: 30
})
//获取属性
let res = $('img').attr('name');
console.log(res);
//属性移除
$('img').removeAttr('name');
})
</script>
</body>
prop操作
在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。
prop:property属性
<body>
<!-- checkbox 选中状态由checked属性来决定 -->
<!-- attr无法获取标签的状态值(checked,disabled,selected) -->
<input type="checkbox" value="你好">你好 <br>
<button>点我啊</button>
<script>
$(function () {
let $input = $('input')
$('button').click(function () {
//设置属性 为不选中状态
$input.prop('checked', false)
//获取属性 查看选中状态、查看value值
console.log($input.prop('checked'))
console.log($input.prop('value'))
})
})
</script>
</body>
【案例：表格全选案例.html】
<script>
$(function () {
// 1.单击全选复选框,让内容列表中的复选框的选中状态和全选复选框一样
// 1.1 获取全选复选框的状态:prop
// 1.2 获取内容列表中的复选框,设置它们的状态:prop
// 2.单击内容列表中的复选框
// 2.1 获取当前被选中的复选框的数量,与原始的复选框的数量进行比较
// 2.2 如果一致,则全选,否则取消全选
let $j_cbAll = $('#j_cbAll')
let $j_tbs = $('#j_tb input')
$j_cbAll.click(function () {
// 获取全选复选框的状态
let state = $(this).prop('checked')
console.log(state)
// 获取内容列表中的复选框,设置它们的状态
$j_tbs.prop('checked', state)
})
$j_tbs.click(function () {
// 获取当前被选中的复选框的数量
// :checked:可以标记当前复选框被选中
let checkNum = $('#j_tb input:checked').length
console.log(checkNum)
// 与原始的复选框的数量进行比较
if (checkNum == $j_tbs.length) {
$('#j_cbAll').prop('checked', true)
} else {
$('#j_cbAll').prop('checked', false)
}
})
})
</script>
jQuery动画
三组基本动画
jquery提供了三组基本动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。【演示动画例子】
1.显示(show)与隐藏(hide)是一组动画： display
2.滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似 height
3.淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle) opacity
show([speed], [easing], [callback]);
speed(可选)： 动画的执行时间 animationduration
1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
easing(可选)： 动画效果，默认是swing，秋千，提供了一个linear 匀速的效果 aniamtion-timing-function
callback(可选): 执行完动画后执行的回调函数
show
<body>
<button>展示元素</button>
<button>隐藏元素</button>
<button>切换元素的显示与隐藏</button>
<div id="box"></div>
<script>
$(function () {
let $box = $('#box')
$('button:eq(0)').click(function () {
//执行5秒 匀速
$box.show(5000, 'linear', function () {
console.log('动画做完了')
})
})
$('button:eq(1)').click(function () {
//隐藏
$box.hide()
})
$('button:eq(2)').click(function () {
//切换显示隐藏
$box.toggle()
})
})
</script>
</body>
slide
<body>
<button>垂直向下</button>
<button>垂直向上</button>
<button>上下切换</button>
<div id="box"></div>
<script>
$(function () {
let $box = $('#box')
$('button:eq(0)').click(function () {
//滑出
$box.slideDown(1000)
})
$('button:eq(1)').click(function () {
//滑入
$box.slideUp()
})
$('button:eq(2)').click(function () {
//切换
$box.slideToggle()
})
})
</script>
</body>
fade
<body>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出</button>
<button>注册</button>
<div class="tip"></div>
<div id="box"></div>
<script>
$(function () {
let $box = $('#box')
$('button:eq(0)').click(function () {
//淡入
$box.fadeIn(1000)
})
$('button:eq(1)').click(function () {
//淡出
$box.fadeOut()
})
$('button:eq(2)').click(function () {
//切换
$box.fadeToggle()
})
$('button:eq(3)').click(function () {
$('.tip').text('注册成功').fadeIn(300).delay(3000).fadeOut(300)
})
})
</script>
</body>
【案例：京东轮播图(呼吸灯).html】
<script>
$(function () {
let $arrow = $('.arrow')
let $lis = $('li')
let index = 0 // 图片的起始索引
// 1.鼠标上移的时候，让箭头出现，移出的时候让箭头隐藏
// 2.实现下一张效果
// 2.1 让索引 +1
// 2.2 让对应索引位置的图片显示，让其它的图片隐藏 --fade
$('.slider > ul').mouseenter(function () {
$arrow.show()
})
// .mouseleave(function () {
// $arrow.hide()
// })
$('.arrow-right').click(function () {
index++
console.log(index)
if (index > $lis.length - 1) {
index = 0
}
$lis.eq(index).fadeIn().siblings().fadeOut()
})
$('.arrow-left').click(function () {
index--
console.log(index)
if (index < 0) {
index = $lis.length - 1
}
$lis.eq(index).fadeIn().siblings().fadeOut()
})
})
</script>
自定义动画
animate: 自定义动画,支持用户自定义样式
注意：样式有一个限制：必须是数值动画
$(selector).animate({params},[speed],[easing],[callback]);
params： 要执行动画的CSS属性，带数字（必选）
speed： 执行动画时长（可选）
easing： 执行效果，默认为swing（缓动） 可以是linear（匀速）
callback： 动画执行完后立即执行的回调函数（可选）
<body>
<button>动第一个</button>
<button>动第二个</button>
<div>swing</div>
<div>linear</div>
<script>
//修改盒子的位置 宽高（必须有定位）
$(function () {
let $swing = $('div').eq(0)
let $linear = $('div').eq(1)
$('button:eq(0)').click(function () {
$swing.animate({
left: '500px',
top: 500,
'background-color': 'red',
width: 400
}, 2000, 'linear', function () {
$linear.animate({
left: '500px'
}, 2000, 'linear', function () {
})
})
})
})
</script>
</body>
动画队列与停止动画
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。
动画队列
<body>
<button>动起来</button>
<div id="box"></div>
<script>
$(function () {
let $div = $('div')
// jq的动画队列是指:将我们所设置的所有动画都添加到一个任务队列中,这个队列就称为动画队列
// jq会将这个队列中的所有动画都执行
// 所有动画都有动画队列的概念
$('button').click(function () {
$div
.fadeIn(3000) // 第一个动画
.animate({ // 第二个动画
left: 800
}, 2000, 'linear')
.animate({// 第三个动画
top: 400
}, 2000, 'linear')
.animate({
left: 0
}, 2000, 'linear')
.animate({
top: 0
}, 2000, 'linear')
})
})
</script>
</body>
停止动画
stop方法： 停止动画效果，停止动画队列中的一切动画
stop(clearQueue, jumpToEnd);
//第一个参数：是否清除队列
//第二个参数：是否跳转到最终效果
【案例：手风琴特效】
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
$(function () {
// 1.设置图片--背景
// 1.1 获取所有li元素
// 1.2 添加样式：循环遍历，因为li元素的样式设置是不一样的
let $lis = $('li')
for (let i = 0; i < $lis.length; i++) {
$lis.eq(i).css({
'background-image': `url(./images/${i + 1}.jpg)`,
'background-size': 'cover',
'background-position': 'center'
})
}
// 2.实现鼠标移入效果
// 2.1 让当前的li元素的宽度变成800 animate
// 2.2 让它的兄弟元素的宽度变成100
$lis.mouseenter(function () {
// 解决动画抖动的方式就是在动画之前添加stop
$(this).stop().animate({
width: 800
}, 1000)
$(this).siblings().stop().animate({
width: 100
}, 1000)
})
// 3.添加鼠标移出效果
// 3.1 让所有li的宽度恢复为240
$lis.mouseleave(function () {
$lis.stop().animate({
width: 240
}, 1000)
})
})
</script>
</body>
4156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
