JS获取地址栏参数&jquery
第一种:字符串拆分法
window.location.href 或者 location.href 或者 window.location 获得地址栏中的所有内容
decodeURI()可以解码地址栏中的数据 恢复中文数据
window.search 获得地址栏中问号及问号之后的数据
//获取地址栏里(URL)传递的参数
function GetRequest(value) {
//url例子:www.bicycle.com?id="123456"&Name="bicycle";
var url = decodeURI(location.search); //?id="123456"&Name="bicycle";
var object = {};
if(url.indexOf("?") != -1)//url中存在问号,也就说有参数。
{
var str = url.substr(1); //得到?后面的字符串
var strs = str.split("&"); //将得到的参数分隔成数组[id="123456",Name="bicycle"];
for(var i = 0; i < strs.length; i ++)
{
object[strs[i].split("=")[0]]=strs[i].split("=")[1]
}
}
return object[value];
}
第二种:正则匹配法
这种方法其实原理和上一种方法类似,都是从URL中提取,只是提取的方法不同而已。
其中 RegExp("(^|&)" 这里的& 指的就是用于隔开参数的 字符,随意改成自己需要的即可
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
思维拓展:
有一个select标签
获取地址栏参数,把选中option内容加到地址栏后面
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script src="jquery.min.js"></script>
<script>
function func() {
var vs = $('select option:selected').val();
alert(vs)
}
</script>
</head> <body>
<select onchange="func()">
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
</select>
</div>
</body> </html>
这一步的目的是获取选中option的值(各位在引用jquery包的之后要记住别忘了再加script标签, 刚写了好几种版本一顿报错。。。。最后发现是标签。。。。。)
在后面就好写了 照着上面获取url参数,自己造一个参数,怼进去就完事了
接下来复习下jquery
首先就是初始化方法 ,我脑子不太灵光,每隔一段时间肯定会忘掉,然后百度搜,记住,在忘掉。。。。
第一种:
$(document).ready(function(){
xxxxxxxxx
}); 第二种:
$(function(){
xxxxxxxxx
}); 第三种:
jQuery(function($){
xxxxxxxxx
});
再就是最基本的选择器
class用"." id用“#”
jquery极大地提高了编码效率,替代了js中document.getElementByxxx之类的笨重方法
不过在使用jquery的时候要记住不要出现重复的class或者id(除非你是故意的)
还有 一个标签可以定义多个class
就像这样:
<div class="a b c"></div>
中间用空格隔开。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
jquery的应用:如何根据一个值来动态让对应的option选中
$("#select_id option[value='1']").removeAttr("selected"); 根据值去除选中状态
$("#select_id option[value='"+msg.data.categoryId+"']").attr("selected","selected"); 根据值让option选中
<select id="select_id" >
<option value="" >请选择</option>
<option value="">苏宁易购</option>
<option value="">天猫旗舰店</option>
<option value="">国美商城</option>
<option value="">华为商城</option>
<option value="">1号店</option>
</select>
写个js/jquery方法:
上来先将获取到的url+“&type=all”
然后选择下拉框内容(all,a,b三个),选完之后将&type=all替换为&type=a这样
然后页面跳转到 &type=a结尾的url
注意:js中判断是否为空要写作 ===null 或者 !==null 这个我是真的没印象,彻底记住!!!
<script>
var url = window.location.href;
if(getUrlParams("type") == null) {
window.location.href = url + "&type=ALL";
}
$(document).ready(function(){
$(".planChoose").find("option[value ='"+getUrlParams("type")+"']").attr("selected","selected");
});
function getUrlParams(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(){
$('.planChoose').change(function(){
var newurl = url.replace(getUrlParams("type"),$('.planChoose option:selected').val());
window.location.href = newurl;
})
});
</script>
--------------------------------------------------------------------------------------------------------------------------------------
<select class="planChoose" onchange="addPlan()">
<option value="all" >全て</option>
<option value="a">Aプラン</option>
<option value="b">Bプラン</option>
</select>
--------------------------------------------------------------------------------------------------------------------------------------
关于window.location:
var a = window.location.href; 获取当前url
window.location.href="www.xxxxxxxxxxxxxxx.com"; 跳转到www.xxxxxxxxxxxxxxx.com
--------------------------------------------------------------------------------------------------------------------------------------
js中replace的用法
replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),
reExp可以是正则表达式对象(RegExp)也可以是字符串(string),
replaceText是替代查找到的字符串。
为了帮助大家更好的理解,下面举个简单例子说明一下
<script language="javascript">
var stringObj="终古人民共和国,终古人民";
//替换错别字“终古”为“中国”
//并返回替换后的新字符
//原字符串stringObj的值没有改变
var newstr=stringObj.replace("终古","中国");
alert(newstr);
</script>
前端因为有段时间没研究 md退化了!!好气
学就完了!
在就没啥可说的了,md写困了,等有力气了再把我个人用的不太熟练的jquery方法记录下来
那今天就到这里了 下期再见!

JS获取地址栏参数&jquery的更多相关文章
- 【功能代码】---4用JS获取地址栏参数方法
用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...
- (转)用JS获取地址栏参数的方法(超级简单)
转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...
- 【JS】---4用JS获取地址栏参数方法
用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...
- 用JS获取地址栏参数的方法
采用正则表达式获取地址栏参数: function GetQueryString(name) { var reg = new RegExp("(^|&)"+ nam ...
- 用JS获取地址栏参数的方法(超级简单)
方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("( ...
- JS获取地址栏参数
获取地址栏参数(其中name为你所需要的参数值) function GetQueryString(name) { var reg = new RegExp("(^|&)" ...
- JS 获取 地址栏 参数
法一:正则表达式 /** * 采用正则表达式获取地址栏参数: **/ var GetQueryString = function (name) { var reg = new RegExp(" ...
- 转:用JS获取地址栏参数的方法(超级简单)
转载链接: http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实 ...
- [转]用JS获取地址栏参数的方法(超级简单)
本文转自:http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用 ...
随机推荐
- JAVA并发编程学习笔记------结构化并发应用程序
1. Executor基于生产者-消费者模式,提交任务的操作相当于生产者,执行任务的线程相当于消费者,如果要在程序中实现一个生产者-消费者的设计,最简单的方式通常就是使用Executor 2. Exe ...
- iOS 枚举讲解
枚举增强程序的可读性,用法上还是需要注意的 1.C语言的写法 enum XMPPReconnectFlags { kShouldReconnect = 1 << 0, // If set, ...
- POJ 2363
#include<iostream> #include<stdio.h> using namespace std; int main() { //freopen("a ...
- c# Xml反序列化示例
Xml 示例 <?xml version="1.0" encoding="utf-8"?> <CarCollection> <Ca ...
- 4、xamarin forms 设置安卓的toolbar的高度
降低学习成本是每个.NET传教士义务与责任. 建立生态,保护生态,见者有份. 今天有群友说 如何调整 toolbar 的 高度. 最初遇到这个问题第一反映就是CustomRender 设置高度借助la ...
- (转)解锁MySQL备份恢复的4种正确姿势
本文根据DBAplus社群第104期线上分享整理而成. 原文:http://dbaplus.cn/news-11-1267-1.html 讲师介绍 冯帅 点融网高级DBA 获有Oracle OCM ...
- 快捷键&小技巧
shift+鼠标滚轮:实现左右移动 alt+鼠标左键双击:打开属性 chrome中在F12下的Element中,可以先选中某一项,可以直接按住F2进行编辑 chrome中element的右下方我们可以 ...
- linux内核模块的安全
linux可以动态的加载内核模块,在很多场合可能需要确保加载内核的安全性.如果被攻击者加载恶意内核模块,将会使得内核变得极其危险. 当然,稳妥的做法就是给内核模块进行签名,内核只加载能正确验证的签名. ...
- Oracle 数据库实例
Oracle- 数据库的实例,表空间,用户,表之间的关系 一.完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例 1.数据库是一些列物理文件的集合(数据文件,控制文件,联机文件, ...
- Chapter 3 Phenomenon——13
"Bella, I'm so sorry!""I'm fine, Tyler — you look awful, are you all right?" “Be ...