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

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

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

🎜>

時刻:

開始時刻:

終了時刻:

;クエリ 1 :

すべて
/ オプション>
<オプション値="2">

>
その他
その他1 ;option value="2">Other2

クエリ:

クエリその他:

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

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 ページを実行します。以下の写真を入手してください:

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 クラスはこのボタンにキャリッジ リターン イベントを追加します)、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. ダウンロード
コードパッケージのダウンロード

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。