因为以前没写过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() })
最后
感谢阅读,如有不足之处,欢迎在评论区讨论!