需求说明

根据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. UVA 12300 Smallest Regular Polygon（正多边形）

    题意:给出两点,求经过这两点的正n边形的最小面积 题解:这两点一定是最长的弦,我们设正多边形中点c,找到c到每个点的距离(都相同) 我们知道那个等腰三角形的底与每个角度就使用余弦定理 #include ...

  2. web 前端- 表格字段(文件大小)单位格式化算法

                     if (value === 0) return '0 B';   var k = 1024, // or 1000   sizes = ['B', 'KB', 'MB ...

  3. Python爬虫学习（9）：Selenium的使用

    1 简介以及安装 Selenium 是什么?一句话,自动化测试工具.它支持各种浏览器,包括 Chrome,Safari,Firefox 等主流界面式浏览器,如果你在这些浏览器里面安装一个 Seleni ...

  4. java-并发-活性

    浏览以下内容前,请点击并阅读 声明 一个并发程序以适时方式执行的能力叫活性.以下部分介绍最常见的一种活性问题,死锁,并简单介绍其他两种活性问题,饥饿和活锁. 死锁 死锁描述了一种情况:两个或两个以上的 ...

  5. Asia Hong Kong Regional Contest 2016

    A. Colourful Graph 可以在$2n$步之内实现交换任意两个点的颜色,然后就可以构造出方案. #include <bits/stdc++.h> using namespace ...

  6. storm学习好文链接

    大圆的那些事:http://www.cnblogs.com/panfeng412/tag/Storm/ xcc的博客:http://blog.csdn.net/damacheng/article/ca ...

  7. CATransition（os开发之画面切换） 的简单用法

    CATransition 的简单用法 //引进CATransition 时要添加包“QuartzCore.framework”,然后引进“#import <QuartzCore/QuartzCo ...

  8. ACM: Gym 101047K Training with Phuket's larvae - 思维题

     Gym 101047K Training with Phuket's larvae Time Limit:2000MS     Memory Limit:65536KB     64bit IO F ...

  9. javascript运行机制

    太久没更新博客了,Javascript运行机制 Record it 1.代码块 JavaScript中的代码块是指由<script>标签分割的代码段.例如: <script type ...

  10. Data对象

    var myDate = new Date(); Date()返回当日的日期 例如今天是2016/8/19 getFullYear()返回当前日期的年 myDate.getFullYear() 201 ...