jquery_jquery를 기반으로 한 쿼리 작업을 위한 구현 코드

1. 이 문서의 내용:
쿼리와 같은 특정 기능을 달성하기 위해 URL 매개변수를 변경하는 사용자 작업을 자바스크립트로 가져옵니다(특정 쿼리는 URL의 매개변수를 가져오기 위해 서버측 코드로 구현됩니다). 쿼리 문을 형성하기 위해).
2. 준비 작업:
JQuery 클래스 라이브러리(제가 사용하는 버전은 1.3.2), 툴 클래스 라이브러리(Tool.js, 기본적으로 모든 코드는 온라인에서 검색), 쿼리 라이브러리(Search.js, 직접 작성), HTML 페이지(연습에 사용), 이러한 js 코드를 페이지의 HTML 페이지에 추가합니다.
htm 페이지

코드 복사 코드는 다음과 같습니다.

;
.initCss{color:#666666}

🎜>< ;script type="text/javascript" src="JS/Tool.js">

body>

시간:

시작 시간:

종료 시간:

;쿼리 1 ：

모두
1부< / 옵션>
<옵션 값="2">파트 2

쿼리 2:

기타
기타1 ;옵션 값="2">기타2

쿼리:

기타 쿼리:

쿼리만 자신의 데이터:

3.Search.js 소개

a. JQuery 및 Tool 2 js 스크립트 지원이 필요합니다.
b. 기본적으로 조작해야 할 몇 가지 id 및 url 매개변수가 있습니다. 이들은 각각 _UrlHtmlIdAry 및 _UrlParmAry에 저장됩니다. 물론 이 두 매개변수를 하나로 결합할 수도 있습니다. #으로 시작하고 해당 URL 매개변수 이름을 추가하세요.
c. 텍스트 ID에는 txt가 포함되어야 합니다(쿼리 상자에는 특별한 주의가 필요하며 쿼리를 포함해야 함). 시간 ID에는 날짜가 포함됩니다(텍스트의 시작 시간에는 시작 시간이 포함되고 종료 시간에는 끝이 포함됨). 다중 선택 상자 ID에는 cb가 포함되어 있으며 드롭다운 상자 ID에는 drop이 포함되어 있습니다. 이것들은 모두 JavaScript가 중앙에서 관리하기 위한 것입니다.
d. 검색 개체를 생성할 때 CSS 매개변수가 전달됩니다. 이 CSS는 주로 드롭다운 상자를 선택하지 않았을 때 드롭다운 상자의 글꼴 색상과 같은 효과를 구현합니다.
e. 시간 쿼리 상자에 내용이 채워지지 않은 경우 기본값은 "xxxx-xx-xx"이고, 쿼리 상자(쿼리)의 기본값은 "키워드..."입니다. 모두 들어오는 CSS의 효과를 추가하며, 내용을 변경하는 경우 CSS 효과가 제거됩니다.

4. Search.js에 전화하세요

a. 먼저 htm 페이지를 실행하세요. 아래 사진을 받으세요:

b. 이전 htm 페이지의 js 코드에서 var search = new Search('initCss');를 var search = new Search();로 변경하면 "keyword. .."가 표시됩니다. "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 매개변수 콘텐츠를 페이지에 바인딩했습니다.

지금 제거하세요

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

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

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

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

페이지를 새로고침해 보면 쿼리 2와 기타 바인딩된 쿼리 내용이 나오지 않는 것을 확인할 수 있는데 이는 _UrlHtmlIdAry와 _UrlParmAry에 현재 해당 값이 없어 해당 데이터가 동작하지 않기 때문입니다. 사진과 같이

코드를 복원합니다.

e. 이제 search.InitBind(Other);를 search.InitBind();로 변경하면 그림과 같이 다른 쿼리의 글꼴 색상이 이전 빨간색이 아닌 검은색으로 표시됩니다.

InitBind() 메서드에는 메서드 매개변수가 추가되지 않았기 때문입니다. 이 매개변수를 사용하면 InitBind() 메서드를 변경하지 않고도 작업 내용을 확장할 수 있습니다. 코드를 복원하세요.

f.SearchApply 메소드의 첫 번째 매개변수는 '#'에 작업 버튼의 ID를 더한 것입니다(검색 클래스는 이 버튼에 대한 캐리지 리턴 이벤트를 추가합니다). 두 번째 매개변수는 페이지 방향의 URL 주소입니다. .

다섯 개의 코드
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) == "undefine " || str == null || str == '' || str == '정의되지 않음') {
false 반환
}
else {
true 반환;
//URL 매개변수 가져오기
this.GetUrlParms = function() {
var args = new Object()
var query = location.search.substring(1)
var pair = query.split("&");
for (var i = 0; i < pair.length; i ) {
var pos = pair[i].indexOf('=')
if (pos == -1) continue;
var argname = pair[i].substring(0, pos);
var value = pair[i].substring(pos 1); [argname] = unescape(value);
}
return args;
}
//문자열에서 필요한 문자의 위치를 ​​찾습니다. isCase = true는 대소문자를 무시한다는 뜻입니다
. 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 ?
}
}
//문자열을 검색하여 해당 문자가 있는지 확인합니다. isCase = true는 대소문자 무시를 의미합니다.
this.IsFindStr = function(str, findStr, isCase) {
이것을 반환합니다. (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 = 거짓;
}
}
//处理关键字
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 = 거짓;
}
}
//处理下拉框
else if (this._Tool.IsFindStr(htmlId, 'drop', true)) {
if (this._Tool.IsNoNullOrEmpty(htmlVal) )) {
if (isFirst != true) parms = "&";
parms = parm '=' htmlVal; isFirst = 거짓;
}
}
//处리 체크박스
else if (this._Tool.IsFindStr(htmlId, 'cb', true)) {
if ($(htmlId).attr(' 확인됨')) {
if (isFirst != true) parms = "&";
parms = parm '=t'; isFirst = 거짓;
}
}
//如果关键查询 放在 其它文本查询之前
else if (this._Tool.IsFindStr(htmlId, 'txt', true)) {
if (this ._Tool.IsNoNullOrEmpty(htmlVal)) {
if (isFirst != true) parms = "&";
parms = parm '=' htmlVal; isFirst = 거짓;
}
}
}
if (parms == '?') 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( '색상', '검은색')
}
개수
})
}
}

6. 요약:
이 검색 클래스는 작업에 많은 편의를 제공합니다. 물론, 제가 배우는 js와 JQuery는 아직 초기 단계입니다. 버그가 있으면 신고해 주시면 수정하겠습니다. 시간에.

7. 다운로드
코드 패키지 다운로드