1,html中点击a标签使其不跳另一个页面的写法
<a href="javascript:void(0);">首页</a>
2,移动到某个元素
1,首先获取所有相同的dom元素 用document.querySelectorAll获取
2,for循环里面写 headerLi[i].onmouseover = function () {}可以获取到对应的this,也可以在for循环里面用 li[i].setAttribute(‘data-idx’,i),
获取用var idx = this.getAttribute(‘data-idx’)
var li = document.querySelectorAll('.star li')
for(var i = 0;i<li.length;i++){
li[i].setAttribute('data-idx',i)
//知道经过的元素
li[i].onmouseenter = function () {
//获取下标
var idx = this.getAttribute('data-idx')
show(idx)
}
li[i].onclick = function () {
var idx = this.getAttribute('data-idx')
curIndex = idx
console.log(idx)
show(curIndex)
}
}
3,jquery中弹框底下的滚动事件禁止
$('body').attr('style','overflow:hidden')
$('body').removeAttr('style')
4,给某一个元素加上类名其他兄弟节点移除节点
$('.li1').addClass('header-active').siblings().removeClass('header-active')
5,每个单词的首字母大写
text-transform: capitalize;
这是 CSS2 中的属性,参数有 capitalize | uppercase | lowercase | none
参数介绍:
none: 默认。定义带有小写字母和大写字母的标准的文本。
capitalize: 文本中的每个单词以大写字母开头。
uppercase: 定义仅有大写字母。
lowercase: 定义无大写字母,仅有小写字母。
6,css计算选中的个数
<form>
<input type="checkbox" id="one">
<label for="one">波霸奶茶</label>
<input type="checkbox" id="two">
<label for="two">烤奶</label>
<input type="checkbox" id="three">
<label for="three">咖啡</label>
<!-- 输入结果 -->
<div class="result">已选中:</div>
</form>
form{
counter-reset: count 0;
}
input[type=checkbox]:checked{
counter-increment: count 1;
}
.result:after{
content:counter(count);
}
7,很简单的使用css写动态进度条
<div class="progress" style="--percent:14;"></div>
<div class="progress" style="--percent:45;"></div>
<div class="progress" style="--percent:94;"></div>
<div class="progress" style="--percent:100;"></div>
.progress{
width: 200px;
height: 17px;
background-color: #f1f1f1;
margin: 5px;
color: #ffffff;
}
.progress::before{
counter-reset: precent var(--percent);
content:counter(precent) "%";
display: inline-block;
height: 100%;
text-align: right;
background-color: #2486ff;
animation: progress 1s ease forwards;
}
@keyframes progress {
from{
width: 0;
}
to{
width: calc(100% * var(--percent) / 100);
}
}
8,写动画的技巧
例如一个很简单的列子:当鼠标经过的时候一个图片消失
.business-introduction-ul-img .image1 {
display: block;
transition: display 1s ease-in-out 0s;
}
.business-introduction-ul li:hover .business-introduction-ul-img .image1 {
display: none;
}
一定要记得在鼠标没经过的代码里面写transition,在鼠标经过里面写是没有反应的
9,给ul中的某个li加上类名,移除其他兄弟的类名
$('.li1').addClass('header-active').siblings().removeClass('header-active')
10,setAttribute,getAttribute
例如:给ul中的li加一个标识
lis.forEach((item)=>{
item..setAttribute('data-idx',i)
})
var curr = this.getAttribute('data-idx')