如何用JavaScript和jQuery获取URL参数并控制HTML元素显隐

当然可行！这是前端开发里很常见的需求，我给你准备了两种实现方案——原生JavaScript和jQuery，你可以根据项目情况灵活选择：

1. 原生JavaScript方案 #

首先我们需要一个工具函数来提取URL里的指定参数：

function getUrlParam(paramName) {
    // 获取URL中的查询字符串部分
    const queryString = window.location.search;
    // 用现代浏览器支持的URLSearchParams解析参数
    const urlParams = new URLSearchParams(queryString);
    // 返回参数值，不存在则返回空字符串
    return urlParams.get(paramName) || '';
}

接着在页面加载完成后执行判断逻辑：

window.addEventListener('load', function() {
    // 获取name和category的参数值并去除前后空格
    const name = getUrlParam('name').trim();
    const category = getUrlParam('category').trim();
    
    // 获取目标div元素
    const resultsDiv = document.querySelector('.Search-results');
    const paramsDiv = document.querySelector('.Search-params');
    
    // 判断是否有非空参数
    if (name !== '' || category !== '') {
        // 显示结果区，隐藏参数区
        resultsDiv.style.display = 'block';
        paramsDiv.style.display = 'none';
    } else {
        // 反之显示参数区，隐藏结果区
        resultsDiv.style.display = 'none';
        paramsDiv.style.display = 'block';
    }
});

2. jQuery方案 #

如果你的项目已经引入了jQuery，可以用更简洁的写法：

// 封装jQuery版的参数获取方法
$.getUrlParam = function(paramName) {
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    return urlParams.get(paramName) || '';
};

$(document).ready(function() {
    const name = $.getUrlParam('name').trim();
    const category = $.getUrlParam('category').trim();
    
    if (name || category) {
        $('.Search-results').show();
        $('.Search-params').hide();
    } else {
        $('.Search-results').hide();
        $('.Search-params').show();
    }
});

兼容性补充 #

如果需要兼容IE这类极老浏览器，可以把参数提取函数换成正则匹配的方式：

function getUrlParam(paramName) {
    const regex = new RegExp(`[?&]${paramName}(=([^&#]*)|&|#|$)`);
    const results = regex.exec(window.location.href);
    if (!results) return '';
    if (!results[2]) return '';
    // 解码URL编码的特殊字符
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

这样就能完美实现你想要的页面加载时的动态显示/隐藏逻辑啦！

内容的提问来源于stack exchange，提问作者detinu20