3-1-jquery中css操作、class类操作、属性操作、效果
3-1-jquery中css操作、class类操作、属性操作、效果
jquery里面是 n多个方法，只要你去调用，它就起作用了。
调用方法 ---- 这个方法的方法名()
addClass('类名')
为每个匹配的元素添加指定的类名
removeClass('类名')
从所有匹配的元素中删除全部或者指定的类。
<style>
.item {
color: blue;
font-size: 20px;
height: 30px;
line-height: 30px;
width: 300px;
outline: 1px dashed red;
}
.item-0 {
color: orange;
}
.item-1 {
color: red;
}
.item-2 {
color: green;
}
.item-3 {
color: pink;
}
.item-4 {
color: lightblue;
}
.item-5 {
background-color: yellow;
}
</style>
</head>
<body>
<ul id="list">
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ul>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function() {
var r = $('#list li');
console.log(r);
// 给li加上不同的class
$('#list li').addClass('item');
$('#list li').hover(function() {
$(this).addClass('item-' + $(this).index());
}, function() {
$(this).removeClass('item-' + $(this).index());
});
})
</script>
hover(鼠标滑入做什么事情, 鼠标滑出做什么事情)
或
hover(鼠标移入做什么事情, 鼠标移出做什么事情)
$('#list li').hover(function() {}, function() {});
$(this) 当前这个元素（当前你触碰的这个元素）
$(this).index() 当前这个元素 所在位置的索引值（或者说 所在位置的下标）
toggleClass('类名')
如果存在（不存在）就删除（添加）一个类。
<style>
.box {
width: 300px;
height: 300px;
background-color: blue;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<div class="box">我是盒子</div>
<br>
<button id="btn">点击我看一看</button>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function() {
// 单击 按钮，我们给这个盒子 添加类 或者 删除类
$('#btn').click(function() {
// toggleClass('类名')如果存在（不存在）就删除（添加）一个类。
$('.box').toggleClass('red');
})
})
</script>
click() 鼠标单击事件
$('#btn').click(function(){}) 你只要 触碰了 鼠标 单击了这个对象，就会调用执行一个函数
children() 查找 一个集合中的子元素
$('#list').children();
children('li') 查找 一个集合中的某些你想要的子元素
find('p') 查找 一个集合中的子元素，你用这个方法，一定要告知计算机你去找“谁” 或者说 你找的是“谁”
自己的.siblings() 查找 自己的同辈元素 （找“我”的兄弟元素）
注意：
siblings()这个方法前面，修饰的对象一定是一个对象，不是一个集合！
animate() 用于创建自定义动画的函数
animate({你去描述的属性是哪些内容，逐一的罗列写清楚即可}, 1000)
还没有留言，还不快点抢沙发？