jquery写伪类样式、隐藏和显示、循环写法、点击事件等等项目中的事件方法

因为以前没写过jq 这是入行以来第一次写 所以记了些笔记 有些写法更接近与原生js 与vue写法还是有些差别的 

1.写伪类样式

//动态样式
$(obj).addClass('qh').siblings().removeClass('qh');
 .qh {
        color: #0099FF !important;
    } 
    .qh::before {
    display: inline-block !important;
    content: "";
    position: absolute;
    margin-top: 36px;
    width: 60px;
    height: 6px;
    background-color: #0099FF;
    border-radius: 8px;
    transform: translateX(28%)
    }

2.隐藏和显示 class是. id是#

 function courseswitch(obj) {
        $(obj).addClass('qh').siblings().removeClass('qh');
        var index = $(obj).index();
        $('.directory_details').empty();
        if (index == 0) {
            introduce();
            //显示和隐藏 class是. id是#
            $(".imgOne").show();
            $(".imgTwo").hide();
        } else {
            course();
            $(".imgOne").hide();
            $(".imgTwo").show();
        }
    }

3.滚动到指定位置

   <div class="aviation" style="width: 100%;" id="activeOne"></div>
   //滚动到指定位置
        function onEye(e) {
            if(e === 0) {
                var target = $("#activeOne");
            }
            if(e === 1){
                var target = $("#activeTwo");
            }
            if(e === 2 ){
                var target =$("#activeThree")
            }
            var offsetTop = target.offset().top;
                 $("html,body").animate({scrollTop:offsetTop}, 500);
        }

4.jq循环 以及动态变色

html：
<div class="box-tab" id="tabbut"></div>
​
js:
//底部tab点击
        function tabList() {
            var list = [
                { title: 'Jmis Cloud' },
                { title: 'Fast BI' },
                { title: 'Smart SCADA' },
                { title: 'Smart GIS' },
                { title: 'Smart Sim' },
            ]
            var str = ''
            list.map((item) => {
                str += `<div class="tab">
                    ${item.title}
                    </div>`
            })
            $('.box-tab').append(str)
            $('.box-tab div:first').addClass("active")
        }
        
        //底部tab点击
        function tabList() {
            var list = [
                { title: 'Jmis Cloud' },
                { title: 'Fast BI' },
                { title: 'Smart SCADA' },
                { title: 'Smart GIS' },
                { title: 'Smart Sim' },
            ]
            var str = ''
            list.map((item) => {
                str += `<div class="tab">
                    ${item.title}
                    </div>` 
            })
            $('.box-tab').append(str)
            $('.box-tab div:first').addClass("active")
        }
        //点击变色
        $(document).on("click", ".tab", function () {
            $(this).addClass("active",).siblings().removeClass("active",)
        })
        
css:
        .box-tab {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        font-size: 22px;
        color: #797979;
        cursor: pointer;
​
    }
​
    .tab {
        margin: 0px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 16px;
        padding: 4px 12px;
        border-radius: 4px;
    }
​
    .active {
        background: #0099FF;
        color: #fff;
​
    }
    .active::before {
        /* display: inline-block !important;
    content: "";
    position: absolute;
    margin-top: 52px;
    width: 40px;
    height: 3px;
    background-color: #0099FF;
    border-radius: 6px; */
    /* transform: translateX(9%); */
        }
        

5.获取id

    //底部tab点击
            function tabList(e) {
            var str = ''
            e.map((item) => {
                str += `<div class="tab" data-id="${item.id}">
                    ${item.name}
                    </div>`
            })
            $('.box-tab').append(str) 
            $('.box-tab div:first').addClass("active")
        }
        //点击变色
        $(document).on("click", ".tab", function () {
            $(this).addClass("active",).siblings().removeClass("active",)
            var id = $(this).data('id');
            // 执行点击事件的处理逻辑 
            ContentThreeApi(id)
        })

6.链接后截取href后面的传参

    $(document).ready(function () {
            let locations = window.location.href.split('id=')//获取我们刚才点击跳转后的链接，然后我在刚刚在链接那里用href做标记,方便我们用split去截取,截取出来是一个数组
            locatId = locations[1] ? locations[1] : '1559345112043532290'//我们将数组中需要的数据拿到
            list()
            textApi()
        })

最后

感谢阅读，如有不足之处，欢迎在评论区讨论！