Web Modify The Html Elements According Url Parameters With Jquery
需求说明
根据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的更多相关文章
- Get URL parameters & values with jQuery
原文: http://jquery-howto.blogspot.jp/2009/09/get-url-parameters-values-with-jquery.html In this post, ...
- [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 ...
- Web Components之Custom Elements
什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...
- Web开发HTTP中URI和URL的情感纠葛
作者:郭无心链接:https://www.zhihu.com/question/21950864/answer/66779836来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- Python的Web编程[0] -> Web客户端[0] -> 统一资源定位符 URL
统一资源定位符 / URL 目录 URL 构成 URL 解析 URL 处理 1 URL构成 统一资源定位符(Uniform Resource Locator) 是对可以从互联网上得到的资源的位置和访问 ...
- 玩转web之ligerui(一)---ligerGrid重新指定url
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 在特定情况下,我们需要重新指定ligerGrid的url来获取不同的数据,在这里我说一下我用的方法: 首先先定义一个全局变量,然后定义liger ...
- [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 ...
- How to get URL parameters with Javascript?
function getURLParameter(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '( ...
- 尚未配置为Web项目.指定的本地IIS URL http://localhsst/..要打开项目，需要配置虚拟目录 。是否立即创建虚拟目录 解决
1.编辑.csproj文件 2.修改 UseIIS节点改为false,再次打开程序即可
随机推荐
- HRPlugin For Xcode发布（附源码地址）
今天给大家介绍的这个插件,是我在IOS平台上开发以来,一些想法的集合体.因为本人时常感觉在开发过程中无论从GOOGLE资料查找和SQL数据库查询,正则表达式测试,SVN等,这些经常要做的操作中,耽误了 ...
- Gym 100646 F Tanks a Lot RMQ
Problem F: Tanks a Lot Imagine you have a car with a very large gas tank - large enough to hold what ...
- NOIp 2016 总结
NOIp 2016 总结 -----YJSheep Day 0 对于考前的前一天,晚自习在复习图论的最短路和生成树,加深了图的理解.睡得比较早,养足精力明日再战. Day 1 拿到题目,先过一边,题目 ...
- C++-Qt【4】-CheckBox on QListView
引用:http://www.qtcentre.org/threads/47119-checkbox-on-QListView QListWidgetItem *item = new QListWidg ...
- HDU4417 Super Mario（主席树）
题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=4417 Description Mario is world-famous plumber. ...
- React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...
- Asp.net 配置web.Config 在出错时跳转到相应页面
<!--<customErrors mode="On" defaultRedirect="error.aspx"> <erro ...
- java 的各种实用类库（jar包）
总列表:# dom4j # org.json # pinyin4j # sqlite-jdbc # JavaMail # JLayer # dom4j 介绍:处理 xml 的类库.采用了 Java 集 ...
- 对JavaScript闭包和原型理解
最近在学js脚本的一些东西觉得里面有2个知识点比较难理解所以做了如下总结. 1.闭包 简单的理解:一个函数a ,内部有个函数b,那么这个函数b当被作为a函数的返回值得时候被外部的全局变量引用了,那么这 ...
- Hybrid App经验解读 一
郑昀编纂 关键词:Hybrid,Zepto,Fastclick,Backbone,sui,SPA,pushState,跨域,CORS click 事件还是 tap 事件? Zepto 的 show/h ...