需求说明

根据URL的参数, 来批量的对某些HTML元素做统一的修改.

解决思路

首先, 想办法获得这个URL的参数, 然后遍历对应的HTML元素, 做出对应的修改. 即可.

代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head> <body>
<ul>
<li><a href="https://baidu.com/index.html" target="_blank"> Link 1 </a></li>
<li><a href="https://baidu.com/index.html" target="_blank"> Link 1 </a></li>
<li><a href="https://baidu.com/index.html" target="_blank"> Link 1 </a></li>
<li><a href="https://baidu.com/index.html" target="_blank"> Link 1 </a></li>
</ul>
</body> </html>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function GetString(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
} $(document).ready(function()
{
$("a").each(function()
{
var link = $(this).prop("href");
link = link + "?id=" + GetString("id");
$(this).prop("href", link);
});
}); </script>

小结

网上,也有其他的原生js的实现,但是方法着实头疼,看懂都费劲儿. 通过利用一些库,可以把代码写的简洁,便于阅读. 这才是好的解决方法.


Web Modify The Html Elements According Url Parameters With Jquery的更多相关文章

  1. Get URL parameters & values with jQuery

    原文: http://jquery-howto.blogspot.jp/2009/09/get-url-parameters-values-with-jquery.html In this post, ...

  2. [React Router v4] Use URL Parameters

    URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use ...

  3. Web Components之Custom Elements

    什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...

  4. Web开发HTTP中URI和URL的情感纠葛

    作者:郭无心链接:https://www.zhihu.com/question/21950864/answer/66779836来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  5. Python的Web编程[0] -> Web客户端[0] -> 统一资源定位符 URL

    统一资源定位符 / URL 目录 URL 构成 URL 解析 URL 处理 1 URL构成 统一资源定位符(Uniform Resource Locator) 是对可以从互联网上得到的资源的位置和访问 ...

  6. 玩转web之ligerui(一)---ligerGrid重新指定url

    请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 在特定情况下,我们需要重新指定ligerGrid的url来获取不同的数据,在这里我说一下我用的方法: 首先先定义一个全局变量,然后定义liger ...

  7. [Angular 8] Take away: Web Components with Angular Elements: Beyond the Basics

    This post is based on the NG-CONF talk, check the talk by yourself. 1. Dynamiclly add Angular Elemen ...

  8. How to get URL parameters with Javascript?

    function getURLParameter(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '( ...

  9. 尚未配置为Web项目.指定的本地IIS URL http://localhsst/..要打开项目,需要配置虚拟目录 。是否立即创建虚拟目录 解决

    1.编辑.csproj文件 2.修改 UseIIS节点改为false,再次打开程序即可

随机推荐

  1. linux中redis的主从

    主从模式的概念请自行百度! 主服务器只执行写操作.从服务器执行读操作. 主服务器中的数据会同步到从服务器中. 在从服务器中打开redis目录中的redis.conf文件 vim /usr/local/ ...

  2. EXEC sp_executesql

    declare @sql nvarchar(max)declare @nu int set @sql='SELECT * FROM [FMTest].[dbo].[FM_Radio_Station]' ...

  3. adt_sdk_tools介绍

    draw9patch.bat hierarchyviewer.bat traceview.bat

  4. POJ 2774 Long Long Message ——后缀数组

    [题目分析] 用height数组RMQ的性质去求最长的公共子串. 要求sa[i]和sa[i-1]必须在两个串中,然后取height的MAX. 利用中间的字符来连接两个字符串的思想很巧妙,记得最后还需要 ...

  5. [转]Windows7文件夹转移清理臃肿的C盘

    当你使用Windows的时候,你会发现无论哪个版本的Windows,系统都会默认将用户文件夹和程序数据文件夹(xp下是Documents and Settings文件夹,而windows7和vista ...

  6. bzoj 3507: [Cqoi2014]通配符匹配

    Description 几乎所有操作系统的命令行界面(CLI)中都支持文件名的通配符匹配以方便用户.最常见的通配符有两个,一个是星号(“”’),可以匹配0个及以上的任意字符:另一个是问号(“?”),可 ...

  7. 从业十余年谈谈对dotnet看法与坚持

    前言 园子经常在讨论关于.Net发展的问题,我也这些年在工作乃至创业过程中使用.Net碰到的一些问题和看法.个人擅长的技术面,C/C++/MFC/STL.ASM.JAVA.VB.Javascript/ ...

  8. JAVA实现AES 解密报错Input length must be multiple of 16 when decrypting with padded cipher

    加密代码 /**解密 * @param content 待解密内容 * @param password 解密密钥 * @return */ public static byte[] decrypt(b ...

  9. jasmine入门

    本文来自http://blog.fens.me/nodejs-jasmine-bdd 粉丝日志 张丹   前言TDD(Test Driven Development)测试驱动开发,是敏捷开发中提出的最 ...

  10. 移动端图片上传base64编码

    $base64 = "/9j/4AAQSkZJRgABAQEAkACQAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAA ...