js/jq常用的案例
1、js引用。
document.addEventListener("DOMContentLoaded", function() {
document.querySelector灵活选择器使用，如下
var secondSliderComponent = document.querySelector('.grid__item.product__media-wrapper slider-component:nth-of-type(2)');
}）
2、jQuery 选择器获取页面的 element 时，无论 element 是否存在，都会返回一个对象。
<script>
if($('div a').length > 0){
$('div').show();
} else {
$('div').hide();
}
</script>
写好一个 div 元素，当元素下存在 a 元素时显示，否则隐藏。
2、经过学习我发现，判断元素是否隐藏的方式有很多，我觉得越简单越好。
使用 css 属性值
if($('div').css('display') == 'none'){
$('div').show()
} else {
$('div').hide()
}
使用 jQuery 选择器
if($('div').is(':hidden')){
$('div').show()
} else {
$('div').hide()
}
使用 toggle() 函数
$('div').toggle();
3、js底部返回到顶部。
document.addEventListener("DOMContentLoaded", function () {
var scrollToTopBtn = document.querySelector(".toTop333");
window.addEventListener("scroll", function () {
// 检查页面滚动位置
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
scrollToTopBtn.style.display = "block";
} else {
scrollToTopBtn.style.display = "none";
}
});
scrollToTopBtn.addEventListener("click", function () {
// 平滑滚动到页面顶部
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
});
4、js怎样实现网站加载前的样式修改。
<script>
// 在页面加载前添加样式
document.addEventListener("DOMContentLoaded", function() {
// 创建一个样式标签
var style = document.createElement('style');
// 添加样式内容
style.textContent = `
body {
overflow: hidden; /* 隐藏滚动条 */
}
.loading-overlay {
position: fixed;
}
`;
// 将样式标签添加到 head 标签中
document.head.appendChild(style);
});
</script>
