jquery_jquery に基づくクエリ操作の実装コード-jsチュートリアル-php.cn

1. この記事の内容:
JavaScript を通じてユーザー操作を取得し、クエリなどの特定の機能を実行するために URL パラメーターを変更します (特定のクエリは、URL 内のパラメーターを取得するためにサーバー側のコードによって実装されます)クエリステートメントを形成します)。
2. 準備作業:
JQuery クラスライブラリ (私が使用するバージョン: 1.3.2)、ツールクラスライブラリ (Tool.js、基本的にすべてのコードはオンラインで検索)、クエリライブラリ (Search.js、自分で作成)、HTML ページ (演習に使用)、これらの JS コードをページの HTML ページに追加します。
htm ページ

コードをコピーコードは次のとおりです:

🎜>

時刻:

開始時刻:

終了時刻:

;クエリ 1 :

クエリ:

クエリその他:

クエリのみ独自のデータ:

3.Search.js の紹介

a. JQuery および Tool 2 js スクリプトのサポートが必要です。
b. デフォルトでは、操作する必要のある id パラメーターと URL パラメーターがそれぞれ _UrlHtmlIdAry と _UrlParmAry に保存されます。 # で始めて、対応する URL パラメーター名を追加してください。
c. テキスト ID には txt を含める必要があります (クエリボックスには特別な注意が必要であり、クエリを含める必要があります)。複数選択ボックス ID には cb が含まれ、ドロップダウンボックス ID には Drop が含まれます。これらはすべて JavaScript で一元管理するためのものです。
d. Search オブジェクトを作成するときに、CSS パラメーターが渡されます。この CSS は主に、ドロップダウンボックスが選択されていない場合のドロップダウンボックスのフォントの色などの効果を実装します。
e. 時間クエリボックスに内容が入力されていない場合、デフォルトは「xxxx-xx-xx」、クエリボックス (クエリ) はデフォルトで「キーワード...」になります。これらはすべて、受信 CSS の効果を追加しますが、コンテンツを変更する場合、CSS 効果は削除されます。

4. Search.js を呼び出す

a. まず、HTML ページを実行します。以下の写真を入手してください:

jquery_jquery に基づくクエリ操作の実装コード

b. 前の htm ページの js コードの var search = new Search('initCss'); を var search = new Search(); に変更します。「キーワード」が見つかります。「xxxx-xx-xx」、図に示すように、ドロップダウンボックスのフォントの色が変更されました:

jquery_jquery に基づくクエリ操作の実装コード

それがこのパラメータの役割です。コードを元に戻します。

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、次のような画像が表示されます:

jquery_jquery に基づくクエリ操作の実装コード

js コードは、url パラメーターのコンテンツをページにバインドしています。

d. 今すぐ削除します

search._UrlHtmlIdAry['other'] = '#dropOther';

search._UrlParmAry['other'] = 'other';

search._UrlHtmlIdAry['otherTxt'] = '#txtOther';

search._UrlParmAry['otherTxt'] = 'otherTxt';

ページを更新すると、クエリ 2 とその他のバインドされたクエリの内容が与えられていないことがわかります。これは、現時点では _UrlHtmlIdAry と _UrlParmAry に対応する値がなく、対応するデータが操作されていないためです。写真のように、

jquery_jquery に基づくクエリ操作の実装コード

コードを復元します。

e. search.InitBind(Other); を search.InitBind(); に変更すると、図に示すように、他のクエリのフォントの色が黒になっていることがわかります。

jquery_jquery に基づくクエリ操作の実装コード

これは、InitBind()メソッドにメソッドパラメータが追加されていないためであり、このパラメータによりInitBind()メソッドを変更することなく操作内容を拡張することができます。コードを元に戻します。

f.SearchApply メソッドの最初のパラメーターは「#」に操作ボタンの ID を加えたもの (Search クラスはこのボタンにキャリッジリターンイベントを追加します)、2 番目のパラメーターはページの向きの URL アドレスです。。

5 つのコード
tools.js

コードをコピーコードは次のとおりです:

//ツールクラス
function Tool() { 
//文字列置換フォーマット ('a{0}c{1}','b','d')= > 
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) == "unknown " || str == null || str == '' || str == '未定義') { 
return false; 
} 
} 
//URL パラメーターを取得します 
this.GetUrlParms = function() { 
var args = new Object(); 
var query = location.search.substring(1); = query.split("&"); 
for (var i = 0; i var pos =pairs[i].indexOf('=') ; >if (pos == -1) 続行; 
var argname =pairs[i].substring(0, pos); 
var value =pairs[i].substring(pos 1); [argname] = unescape(value); 
} 
return args; 
} 
//文字列内の必要な文字の位置を見つけます。 isCase = true は、case
 を無視することを意味します。 FindStr = function(str, findStr, isCase) { 
if (typeof (findStr) == 'number') { 
return str.indexOf(findStr) 
} 
else { 
 var re = new RegExp(findStr, isCase ? 'i' : ''); 
var r == null ? : r.index; } 
} 
//文字列を検索して、対応する文字があるかどうかを確認します。 isCase = true は大文字と小文字を無視することを意味します 
this.IsFindStr = function(str, findStr, isCase) { 
return this. (str, findStr, isCase) > 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.getFull Year() == r[1] && (d . getMonth() 1) == r[3] && d.getDate() == r[4]); 
} 
}


search.js




コードをコピー

コードは次のとおりです:

function Search(initCss) { 
this._Tool = new Tool(); 
this._UrlParmAry = { ウェイ: 'ウェイ'、クエリ: 'クエリ'、日付: '日付'、私: '私'、bdate: "bdate"、edate: "edate" }; 
this._UrlHtmlIdAry = { 方法: '#dropWay'、クエリ: '#txtQuery'、日付: '#txtDate'、私: '#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.that == 13) { 
$(searchId).focus().click(); 
} 
}); 
} 
this.GetUrlParms = function() { 
var parms = '?'; 
var isFirst = true; 
for (var parm in this._UrlParmAry) { 
htmlId = this._UrlHtmlIdAry[parm]; 
htmlVal = エスケープ($(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; 
} 
} 
//处理チェックボックス 
else if (this._Tool.IsFindStr(htmlId, 'cb', true)) { 
if ($(htmlId).attr('チェック済み')) { 
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) == '関数') { 
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); 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); 
}); //ブラウザの互換性のため、ブラウザごとに選択のフォントの色設定が異なります。 
function dropCss(htmlId) { 
if ($(htmlId).val() != '') { 
$( htmlId) .removeClass(initCss); 
var count = 0; 
$(htmlId 'option:first').addClass(initCss); 
} 
$(htmlId) .addClass (initCss); 
var count = 0; 
$(htmlId ' option').each(function() { 
if (count > 0) { 
$(this).css( '色', '黒'); 
} 
}) 
} 
} 



 > 6. 概要: 
 
この Search クラスは、作業に多くの利便性をもたらします。もちろん、私の js と JQuery の学習はまだ初期段階にあります。バグがある場合は報告してください。変更を加えます。間に合うように。 

7. ダウンロード
コードパッケージのダウンロード