一.本文干些啥：
通过javascript得到用户操作改变url参数从而实现某些功能，如查询(具体的查询由服务器端代码得到url中的参数组成查询语句实现)。
二.准备工作：
一个jquery类库(我使用的版本为：1.3.2)，一个工具类库(tool.js，基本都是网上搜索来的代码)，一个查询类库(search.js，自己写的),一个htm页面（用来做练习），将这些js代码添加进页面htm页面。
htm页面
复制代码 代码如下:
时间：
开始时间：
结束时间：
查询1：
全部
部分一
部分二
查询2：
other
other1
other2
查询：
查询其它：
仅查询自己的数据：
三.search.js介绍
a.需要jquery和tool 2个js脚本的支持。
b.已经默认含有些需要操作的id和url参数，它们分别存放在_urlhtmlidary和_urlparmary中，当然这两个完全可以合二为一，如果要添加新的id，请以#开头，并添加相应的url参数名称。
c.文本id最好含有txt(查询框需要特别照顾，需要含有query)；时间id含有date(文中的开始时间含有begin,结束时间含有end)；多选框id含有cb;下拉框id含有drop。这些都是为了javascript能集中管理。
d.创建search对象时，会传入一个css参数，这个css主要实现，如，下拉框在未被选择时，下拉框字体颜色等效果。
e.时间查询框在未被填入内容时，默认为“xxxx-xx-xx”；查询框(query)，默认为“关键字...”。他们都添加传入css的效果，在改变了内容的情况下，css效果被移除。
四.调用search.js
a.首先，运行htm页面。得到下图：
b.将前面的htm页面中的js代码中的var search = new search('initcss');改为var search = new search();刷新页面，我们会发现页面中的“关键字...”，“xxxx-xx-xx”，和下拉框中的字体颜色改变了，如图：
这就是这个参数的作用。将代码还原。
c.随意操作页面，然后按查询按钮或直接输入:http://localhost:1406/search.htm?way=1&query=%u4f60%u597d&date=2010-4-20&me=t&bdate=2019-1-1&edate=2019-1-2&other=1&othertxt=helloworld，得到类似下图：
js代码已将url参数内容绑定到页面中。
d.现在去掉
search._urlhtmlidary['other'] = '#dropother';
search._urlparmary['other'] = 'other';
search._urlhtmlidary['othertxt'] = '#txtother';
search._urlparmary['othertxt'] = 'othertxt';
刷新页面，会发现未给查询2和查询其它绑定查询内容，这是因为此刻_urlhtmlidary和_urlparmary并没有对应的值，未操作相应的数据。如图，
还原代码。
e.现在将search.initbind(other);改为search.initbind();会发现查询其它的字体颜色为黑色，而非先前的红色，如图，
这是因为没有为initbind（）方法添加一个方法参数，这个参数能在不改变initbind（）方法的情况下进行一个操作内容的扩展。将代码还原。
f.searchapply方法第一个参数是‘#'加上一个操作按钮的id（search类会为该按钮添加回车事件），第二个参数是页面定向的url地址。
五 代码
tools.js
复制代码 代码如下:
//工具类
function tool() {
//字符串的替换格式化 ('a{0}c{1}','b','d')=> abcd
this.formatstr = function(str, ary) {
for (var a in ary) {
str = str.replace('{' + a + '}', ary[a]);
}
return str;
}
//字符串不为空
this.isnonullorempty = function(str) {
if (typeof (str) == undefined || str == null || str == '' || str == 'undefined') {
return false;
}
else {
return true;
}
}
//得到url参数
this.geturlparms = function() {
var args = new object();
var query = location.search.substring(1);
var pairs = query.split(&);
for (var i = 0; i var pos = pairs[i].indexof('=');
if (pos == -1) continue;
var argname = pairs[i].substring(0, pos);
var value = pairs[i].substring(pos + 1);
args[argname] = unescape(value);
}
return args;
}
//查找字符串中需要字符的位置,iscase = true 表示忽略大小写
this.findstr = function(str, findstr, iscase) {
if (typeof (findstr) == 'number') {
return str.indexof(findstr);
}
else {
var re = new regexp(findstr, iscase ? 'i' : '');
var r = str.match(re);
return r == null ? -1 : r.index;
}
}
//查找字符串找是否存在相应的字符 iscase = true 表示忽略大小写
this.isfindstr = function(str, findstr, iscase) {
return this.findstr(str, findstr, iscase) > 0 ? true : false;
}
//验证短日期2010-2-2
this.isshorttime = function(str) {
var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if (r == null) return false;
var d = new date(r[1], r[3] - 1, r[4]);
return (d.getfullyear() == r[1] && (d.getmonth() + 1) == r[3] && d.getdate() == r[4]);
}
}
search.js
复制代码 代码如下:
function search(initcss) {
this._tool = new tool();
this._urlparmary = { way: 'way', query: 'query', date: 'date', me: 'me', bdate: bdate, edate: edate };
this._urlhtmlidary = { way: '#dropway', query: '#txtquery', date: '#txtdate', me: '#cbshowme', bdate: #txtdatebegin, edate: #txtdateend };
this._dateinitstr = 'xxxx-xx-xx';
this._queryinitstr = '关键字...';
this._args = this._tool.geturlparms();
this.initbind = function(fnother) {
for (var arg in this._args) {
$(this._urlhtmlidary[arg]).attr('checked', true);
$(this._urlhtmlidary[arg]).val(unescape(this._args[arg]));
}
this.initcssinfo(fnother);
}
this.searchapply = function(searchid, gotourl) {
var searchobj = this;
$(searchid).click(function() {
window.location.href = gotourl + searchobj.geturlparms();
});
$(document).keydown(function(event) {
if (event.which == 13) {
$(searchid).focus().click();
}
});
}
this.geturlparms = function() {
var parms = '?';
var isfirst = true;
for (var parm in this._urlparmary) {
htmlid = this._urlhtmlidary[parm];
htmlval = escape($(htmlid).val());
//时间txt处理
if (this._tool.isfindstr(htmlid, 'date', true)) {//|| this._tool.isfindstr(htmlid, 'begin', true) || this._tool.isfindstr(htmlid, 'end', true)) {
if (this._tool.isnonullorempty(htmlval) && htmlval != this._dateinitstr && this._tool.isshorttime(htmlval)) {
if (isfirst != true) parms += &;
parms += parm + '=' + htmlval; isfirst = false;
}
}
//处理关键字
else if (this._tool.isfindstr(htmlid, 'query', true)) {
if (this._tool.isnonullorempty(htmlval) && unescape(htmlval) != this._queryinitstr) {
if (isfirst != true) parms += &;
parms += parm + '=' + htmlval; isfirst = false;
}
}
//处理下拉框
else if (this._tool.isfindstr(htmlid, 'drop', true)) {
if (this._tool.isnonullorempty(htmlval)) {
if (isfirst != true) parms += &;
parms += parm + '=' + htmlval; isfirst = false;
}
}
//处理checkbox
else if (this._tool.isfindstr(htmlid, 'cb', true)) {
if ($(htmlid).attr('checked')) {
if (isfirst != true) parms += &;
parms += parm + '=t'; isfirst = false;
}
}
//如果关键查询 放在 其它文本查询之前
else if (this._tool.isfindstr(htmlid, 'txt', true)) {
if (this._tool.isnonullorempty(htmlval)) {
if (isfirst != true) parms += &;
parms += parm + '=' + htmlval; isfirst = false;
}
}
}
if (parms == '?') parms = '';
return parms
}
this.initcssinfo = function(fnother) {
var htmlid;
var urlparm;
for (var arg in this._urlhtmlidary) {
urlparm = this._urlparmary[arg];
htmlid = this._urlhtmlidary[arg];
//时间
if (this._tool.isfindstr(htmlid, 'date', true)) {// || this._tool.isfindstr(htmlid, 'begin', true) || this._tool.isfindstr(htmlid, 'end', true)) {
if ($(htmlid).val() == this._dateinitstr) $(htmlid).val(''); //兼容ff的刷新，ff刷新后仍会将先前的值带到刷新后的页面
if ($(htmlid).val() == '') {
$(htmlid).val(this._dateinitstr);
$(htmlid).addclass(initcss);
}
this.timetxtevent(htmlid);
}
//查询
else if (this._tool.isfindstr(htmlid, 'query', true)) {
if ($(htmlid).val() == this._queryinitstr) $(htmlid).val(''); //兼容ff的刷新，ff刷新后仍会将先前的值带到刷新后的页面
if ($(htmlid).val() == '') {
$(htmlid).val(this._queryinitstr);
$(htmlid).addclass(initcss);
}
this.querytxtevent(htmlid);
}
else if (this._tool.isfindstr(htmlid, 'drop', true)) {
dropcss(htmlid);
this.dropevent(htmlid);
}
}
if (typeof (fnother) == 'function') {
settimeout(fnother, 0);
}
}
this.querytxtevent = function(htmlid) {
var searchobj = this;
$(htmlid).blur(function() {
$(this).removeclass(initcss);
if ($(this).val() == '') {
$(this).val(searchobj._queryinitstr);
$(this).addclass(initcss);
}
});
$(htmlid).focus(function() {
if ($(this).val() == searchobj._queryinitstr) {
$(this).val('');
$(this).removeclass(initcss);
}
});
}
this.timetxtevent = function(htmlid) {
var searchobj = this;
//离开事件
$(htmlid).blur(function() {
//为真确填写的日期
if (searchobj._tool.isshorttime($(this).val())) {
}
else if ($(this).val() != '') {
alert('请正确输入日期格式，如：2010-1-1');
}
if ($(this).val() == '') {
$(this).val(searchobj._dateinitstr);
$(this).addclass(initcss);
}
else {
$(this).removeclass(initcss);
}
});
$(htmlid).focus(function() {
if ($(this).val() == searchobj._dateinitstr) {
$(this).val('');
$(this).removeclass(initcss);
}
});
}
this.dropevent = function(htmlid) {
$(htmlid).change(function() {
dropcss(htmlid);
});
}
//为了浏览器兼容，不同游览器对select的字体颜色设置不同
function dropcss(htmlid) {
if ($(htmlid).val() != '') {
$(htmlid).removeclass(initcss);
var count = 0;
$(htmlid + ' option:first').addclass(initcss);
}
else {
$(htmlid).addclass(initcss);
var count = 0;
$(htmlid + ' option').each(function() {
if (count > 0) {
$(this).css('color', 'black');
}
count++;
});
}
}
}
六.总结：
这个search类为工作带来了许多便捷，当然自己对js及jquery的学习还是起步阶段，如果存在bug请大家提出，我会及时更改。
七.下载
代码打包下载