需求说明

根据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. TMS320F28027/26/23/22/21/20芯片解密单片机破解原理！

    TMS320F28027/26/23/22/21/20芯片解密单片机破解 TMS320F2802系列芯片解密型号: TMS320F28027F.TMS320F280270.TMS320F28027.T ...

  2. 进击的Python【第四章】：Python的高级应用（一）

    Python的高级应用(一) 本章内容: 内置函数 生成器 迭代器 装饰器 JSON和PICKLE的简单用法 软件目录结构规范 一.内置函数 1.数学运算类 abs(x) 求绝对值1.参数可以是整型, ...

  3. windows和linux之间“/”， "\\"的区别

    在windows下编程操作文件目录时,文件目录一般是如下的形式: C:\\folder1\\folder2\\folder3\\file.txt 而在Linux或者Mac系统下,文件目录则一般是这样子 ...

  4. jquery 回车事件

    简单地记下jquery实现回车事件,代码如下: 全局: $(document).keydown(function(e){ if(e.keyCode==13){ $(".login-li in ...

  5. Java EE之搭建论坛系统（使用JForum）

    1.下载JForum开源压缩包: 网址:http://jforum.net/  (或者直接使用百度云中的压缩包) 解压,修改解压后文件下的\WEB-INF\config\database\mysql目 ...

  6. webpack2新特性

    增加 import() 作为代码分割点:System.import已被弃用,在webpack3时会被完全移除: 内置了json加载器,不再需要单独配置了 当打包文件过大时会提示性能警告,可以用 per ...

  7. unity 协程

    StartCoroutine在unity3d的帮助中叫做协程,意思就是启动一个辅助的线程. 在C#中直接有Thread这个线程,但是在unity中有些元素是不能操作的.这个时候可以使用协程来完成. 使 ...

  8. mysql存不了中文的解决办法

    driver=com.mysql.jdbc.Driverurl=jdbc:mysql://127.0.0.1:3306/testdb?useUnicode=true&characterEnco ...

  9. Oracle OEM

    一.OEM是什么 Oracle Enterprise Manager(Oracle企业治理器,简称OEM)是通过一组Oracle程序,为治理分布式环境提供了治理服务. 二.配置OEM 三.启动OEM ...

  10. kindeditor-4.1.3工具使用技巧:如何在编辑区上传图片并保存绝对路径

    MVC项目开中用到了KindEditor图片上传工具,需要在编辑区内上传图片,并将图片的URL保存为符合如下格式地址,如http://192.168.0.111/uploadImg/imgName.j ...