需求说明

根据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. 【CentOS】LNMP

    本文为博主JerryChan所有,如需转载,请联系博主747618706@qq.com,并附上博客链接/////////////////目录//////////////////一.LNMP的安装 1. ...

  2. ibatis order by 防止sql注入

    (1) 排序控制 select TABLE_NAME, TABLESPACE_NAME from user_tables order by TABLE_NAME $ordertype$ Where t ...

  3. 求单链表L各结点的阶乘之和（c语言）

    链表需要用到指针 阶乘需要用到递归 链表中的注意事项: 1.链表L是否等于NULL ----------是循环结束的条件 2.链表L->Data ---------取链表L中各个结点的值 3.L ...

  4. liaoliao的四连做第二弹

    liaoliao四连做第一弹 1.bzoj3211: 花神游历各国 由于$10^9$以内的数最多只会被开方$10$次,所以我们可以用线段树维护然后剪枝.. #include <cstdio> ...

  5. CodeForces 618A Slime Combining

    http://www.codeforces.com/contest/618/problem/A 明明觉得是水题,而我却做了一个小时. 明明觉得代码没有错,而我却错了好几次. 因为我的名字不叫明明,也不 ...

  6. js基础2

    什么是DOM? DOM:文档对象模型(Document Object Model),又称为文档树模型.是一套操作HTML文档的API. 什么是文档对象模型? DOM将html文档看成了一个对象,htm ...

  7. lua 时间戳和时间互转

    1.时间戳转换成时间 local t = 1412753621000 function getTimeStamp(t)     return os.date("%Y%m%d%H", ...

  8. Artifact Project3:war exploded: Error during artifact deployment. See server log for details.

    第一次建Struts2 idea遇到了这个问题,很莫名其妙,搞了几天没解决,几乎要放弃idea了.最后解决的时候也很突然.回想解决的过程,大致如下. 第一种情况:File->Project St ...

  9. shell命令获取最新文件的名称

    最近有一个需求,在部署游戏战场服时,从程序包到部署需要做一些本地化的操作,手工操作费时费力,故写一个shell脚本,一键部署. 遇到的问题是每次要部署最新的程序包,因此需要shell命令获取最新的文件 ...

  10. thrift 服务端linux C ++ 与客户端 windows python 环境配置（thrift 自带tutorial为例)

    关于Thrift文档化的确是做的不好.摸索了很久才终于把跨linux与windows跨C++与python语言的配置成功完成.以下是步骤: 1)                 Linux下环境配置 ...