jquery 기반 검색 작업 구현 코드
3.Search.js 소개
a.JQuery 와 Tool 2 개의 js 스 크 립 트 지원 이 필요 합 니 다.b.기본적으로 조작 해 야 할 id 와 url 인 자 를 포함 하고 있 습 니 다.각각 에 저 장 됩 니 다.UrlHtmlIdAry 와UrlParmAry 에서 물론 이 두 개 는 완전히 하나 가 될 수 있 습 니 다.새로운 id 를 추가 하려 면\#로 시작 하고 해당 url 매개 변수 이름 을 추가 하 십시오.c.텍스트 id 는 txt 를 포함 하 는 것 이 좋 습 니 다.시간 id 는 date 를 포함 합 니 다(글 의 시작 시간 은 begin 을 포함 하고 종료 시간 은 end 를 포함 합 니 다).다 중 선택 상자 id 는 cb 를 포함 합 니 다.드 롭 다운 상자 id 는 drop 을 포함 합 니 다.이것들 은 모두 자 바스 크 립 트 가 집중 적 으로 관리 할 수 있 도록 하기 위 한 것 이다.d.Search 대상 을 만 들 때 css 인자 가 들 어 옵 니 다.이 css 는 주로 실 현 됩 니 다.예 를 들 어 드 롭 다운 상자 가 선택 되 지 않 았 을 때 드 롭 다운 상자 글꼴 색상 등 효과 가 있 습 니 다.e.시간 조회 상자 가 내용 을 채 우지 않 았 을 때 기본 값 은'xxxx-xx-xx'입 니 다.검색 상자(query),기본 값 은'키워드...'입 니 다.그들 은 모두 css 에 들 어 오 는 효 과 를 추가 하여 내용 을 바 꾼 상태 에서 css 효과 가 제거 되 었 다.
4.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 주소 입 니 다.5 코드 tools.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
.initCss{color:#666666}
</style>
<script type="text/javascript" src="JS/jquery.js"></script>
<script type="text/javascript" src="JS/Tool.js"></script>
<script type="text/javascript" src="JS/Search.js"></script>
<script type="text/javascript">
$(function() {
var search = new Search('initCss');
search._UrlHtmlIdAry['other'] = '#dropOther';
search._UrlParmAry['other'] = 'other';
search._UrlHtmlIdAry['otherTxt'] = '#txtOther';
search._UrlParmAry['otherTxt'] = 'otherTxt';
search.InitBind();
search.SearchApply('#searchBut', 'search.htm');
});
function Other() {
$('#txtOther').css('color', 'red');
}
</script>
</head>
<body>
<div> ：<input id="txtDate" type="text" /></div>
<div> ：<input id="txtDateBegin" type="text" /></div>
<div> ：<input id="txtDateEnd" type="text" /></div>
<div> 1：
<select id="dropWay">
<option value=""> </option>
<option value="1"> </option>
<option value="2"> </option>
</select>
</div>
<div> 2：
<select id="dropOther">
<option value="">Other</option>
<option value="1">Other1</option>
<option value="2">Other2</option>
</select>
</div>
<div> ：<input id="txtQuery" type="text" /></div>
<div> ：<input type="text" id="txtOther" /></div>
<div> ：<input type="checkbox" id="cbShowMe" /></div>
<div><input type="button" id="searchBut" value=" " /></div>
</body>
</html>
//
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 < pairs.length; 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]);
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
