写静态页面的一些技巧

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')