jQuery는 텍스트 상자를 제한하여 숫자 만 입력합니다
jQuery는 텍스트 상자에 IE, Chrome 및 FF와 호환되는 숫자 만 입력하도록 제한합니다 (성능 효과는 다릅니다). 샘플 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
$ ( "입력"). keyup (function () {// keyup 이벤트 처리
$ (this) .val ($ (this) .val (). 교체 (// d |^0/g, '');
}). bind ( "paste", function () {// ctr+v 이벤트 처리
$ (this) .val ($ (this) .val (). 교체 (// d |^0/g, '');
}). CSS ( "ime-mode", "disabled"); // CSS 설정 입력 메소드를 사용할 수 없습니다
위의 코드의 목적은 0보다 큰 양의 정수 만 입력 할 수 있습니다.
코드 사본은 다음과 같습니다.
$ ( "#rnumber"). keyup (function () {
$ (this) .val ($ (this) .val (). 교체 (/[^0-9.]/g, '');
}). bind ( "paste", function () {// ctr+v 이벤트 처리
$ (this) .val ($ (this) .val (). 교체 (/[^0-9.]/g, '');
}). CSS ( "ime-mode", "disabled"); // CSS 설정 입력 메소드를 사용할 수 없습니다
위의 코드의 목적은 다음과 같습니다. 0-9 숫자와 소수점 만 입력 할 수 있습니다.
domcontentloaded 이벤트를 캡슐화하십시오
코드 사본은 다음과 같습니다.
// DOMREADY의 이벤트 큐를 저장합니다
eventqueue = [];
// DOM이로드되었는지 판단합니다
isready = false;
// DOMREADY가 바인딩되었는지 판단합니다
isbind = false;
/*DOMREADY () 실행
*
*@param {function}
*@execute 이벤트 핸들러를 이벤트 큐에 푸시하고 domcontentloaded를 바인딩합니다.
* DOM 로딩이 완료된 경우 즉시 실행하십시오.
*@방문객
*/
기능 domready (fn) {
if (isready) {
fn.call (창);
}
또 다른{
eventqueue.push (fn);
};
bindready ();
};
/*DOMREADY 이벤트 바인딩
*
*@param null
*@execute 최신 브라우저는 IE9+를 포함하여 addevlistener를 통해 domcontentload를 바인딩합니다
IE6-8 DOSCROLL을 판단하여 DOM이로드되었는지 여부를 결정합니다.
*@발신자 domready ()
*/
함수 bindready () {
IF (ISREADY) 반환;
if (isbind) 반환;
isbind = true;
if (window.addeventListener) {
document.addeventListener ( 'domcontentLoaded', execfn, false);
}
else if (window.attachevent) {
doscroll ();
};
};
/*Doscroll은 IE6-8의 DOM이로드되었는지 여부를 결정합니다.
*
*@param null
*@execute doscroll은 DOM이 로딩되는지 여부를 결정합니다
*@발신자 bindready ()
*/
함수 doscroll () {
노력하다{
document.documentElement.doscroll ( '왼쪽');
}
캐치 (오류) {
반환 설정 타임 아웃 (Doscroll, 20);
};
execfn ();
};
/*실행 이벤트 큐
*
*@param null
*@execute 루프 실행 이벤트 핸들러 큐에서
*@발신자 bindready ()
*/
함수 execfn () {
if (! isready) {
isready = true;
for (var i = 0; i <eventqueue.length; i ++) {
Eventqueue [i] .call (창);
};
eventqueue = [];
};
};
// js 파일 1
domready (function () {
});
// JS 파일 2
domready (function () {
});
// 비동기 적으로로드되면 DOMREADY 메소드를 바인딩하지 않으면 함수가 실행되지 않습니다.
// 비동기로드 JS 다운로드 전에 DOMCONTENTLOADED가 발사되었고 addeventListener를 실행할 때들을 수 없습니다.
기본 J를 사용한 Ajax의 간단한 캡슐화
먼저 XHR 객체가 필요합니다. 이것은 우리에게는 어렵지 않습니다. 함수에 캡슐화합니다.
코드 사본은 다음과 같습니다.
var createajax = function () {
var xhr = null;
노력하다 {
// 즉 시리즈 브라우저
xhr = new ActiveXobject ( "microsoft.xmlhttp");
} catch (e1) {
노력하다 {
// IE 브라우저가 아닙니다
xhr = 새로운 xmlhttprequest ();
} catch (e2) {
window.alert ( "브라우저는 Ajax를 지원하지 않으므로 교체하십시오!");
}
}
XHR 리턴;
};
그런 다음 핵심 기능을 작성해 봅시다.
코드 사본은 다음과 같습니다.
var ajax = function (conf) {
// 초기화
// 옵션 파라미터 유형
var type = conf.type;
// URL 매개 변수가 필요합니다
var url = conf.url;
// 데이터 매개 변수는 선택 사항이며 게시물을 요청할 때만 필요합니다
var data = conf.data;
// DataType 매개 변수는 선택 사항입니다
var datatype = conf.datatype;
// 콜백 함수는 선택 사항입니다
var 성공 = conf.success;
if (type == null) {
// 유형 매개 변수는 선택 사항이며 기본값은 가져옵니다
type = "get";
}
if (dataType == null) {
// DataType 매개 변수는 선택 사항이며 기본적으로 텍스트입니다
DataType = "텍스트";
}
// ajax 엔진 객체를 만듭니다
var xhr = createajax ();
// 열려 있는
xhr.open (type, url, true);
// 보내다
if (type == "get"|| type == "get") {
xhr.send (null);
} else if (type == "post"|| type == "post") {
XHR.SetRequestHeader ( "Content-Type",
"응용 프로그램/x-www- 형식 방향 코드");
xhr.send (데이터);
}
xhr.onreadystatechange = function () {
if (xhr.readystate == 4 && xhr.status == 200) {
if (DataType == "text"|| DataType == "text") {
if (success! = null) {
// 일반 텍스트
성공 (xhr.responsetext);
}
} else if (DataType == "XML"|| DataType == "XML") {
if (success! = null) {
// XML 문서를 수신합니다
성공 (xhr.responsexml);
}
} else if (DataType == "json"|| DataType == "json") {
if (success! = null) {
// JSON 문자열을 JS 객체로 변환합니다
성공 ( "("( "+xhr.responsetext+")));
}
}
}
};
};
마지막 으로이 기능의 사용법을 설명해 봅시다.
코드 사본은 다음과 같습니다.
ajax ({
유형 : "Post",
URL : "test.jsp",
데이터 : "name = dipoo & info = good",
데이터 유형 : "JSON",
성공 : 기능 (데이터) {
경고 (data.name);
}
});
크로스 도메인은 JSONP를 요청합니다
코드 사본은 다음과 같습니다.
/**
* JavaScript JSONP 라이브러리 v0.3
* 저작권 (C) 2011 Snandy
* QQ 그룹 : 34580561
* 날짜 : 2011-04-26
*
* 요청 실패의 처리를 늘립니다. 이 기능은 그다지 유용하지 않지만 각 브라우저의 스크립트 차이를 연구했습니다.
* 1, IE6/7/8 스크립트를 지원하는 OnreadyStateChange 이벤트
* 2, IE9/10은 스크립트 ONLOAD 및 ONREADYSTATECHANGE 이벤트를 지원합니다
* 3, Firefox/Safari/Chrome/Opera는 스크립트 온로드 이벤트를 지원합니다
* 4, IE6/7/8/Opera는 스크립트 OnError 이벤트를 지원하지 않습니다. IE9/10/Firefox/Safari/Chrome 지원
* 5. Opera는 OnreadyStateChange 이벤트를 지원하지 않지만 ReadyState 속성이 있습니다. 이것은 매우 마법입니다
* 6. IE9와 Ietester로 IE6/7/8을 테스트하면 ReadyState가 항상로드 및로드됩니다. 완전히 나타나지 않았습니다.
*
* 최종 구현 아이디어 :
* 1, IE9/Firefox/Safari/Chrome은 Onload 이벤트 사용을 위해 성공적으로 호출되었으며 Error Callback은 OnError 이벤트를 사용합니다.
* 2, Opera는 성공적으로 Callback도 Onload 이벤트를 사용합니다 (OnreadyStateChange를 전혀 지원하지 않음). OnError를 지원하지 않기 때문에 여기에서 지연 처리가 사용됩니다.
* 즉, 성공을 기다리고 성공적으로 콜백을 기다리며 성공 후 완료된 플래그 비트가 True로 설정됩니다. 실패는 실행되지 않으면 실행됩니다.
* 여기서 지연된 시간 값을 취하는 것은 매우 능숙합니다. 2 초가 걸리며 회사 테스트에 아무런 문제가 없습니다. 그러나 3G 무선 네트워크를 사용하기 위해 집에 가면 참조 된 JS 파일이 존재하더라도
* 인터넷 속도가 너무 느리고 실패가 먼저 실행 된 다음 성공합니다. 따라서 여기서 5 초가 걸리는 것이 더 합리적입니다. 물론, 그것은 절대적이지 않습니다.
* 3, IE6/7/8 성공적인 콜백은 OnreadyStateChange 이벤트를 사용하며 오류 콜백은 구현하기가 거의 어렵습니다. 또한 가장 기술적입니다.
* 참조 http://stackoverflow.com/questions/3483919/script-onload-onerror-with-lazy-loading-problems
* Nextibling을 사용하여 구현할 수없는 것으로 나타났습니다.
* 역겨운 것은 요청 된 리소스 파일이 존재하지 않더라도 역겨운 것입니다. ReadyState는 또한 "로드 된"상태를 경험할 것입니다. 이렇게하면 요청이 성공했는지 또는 실패하는지 알 수 없습니다.
* 나는 그것을 두려워하기 때문에 마지막으로 프론트 오피스와 뒷방 사이의 조정 메커니즘을 사용하여 최종 문제를 해결합니다. 성공 또는 실패에 관계없이 요청 콜백 (true)을 만듭니다.
* 현재, 성공과 실패를 구별하는 논리가 콜백에 넣었습니다. 배경이 JSONP를 반환하지 않으면 호출 실패를 누르십시오. 그렇지 않으면 성공을 호출하십시오.
*
*
* 인터페이스
* sjax.load (url, {
* data // 요청 매개 변수 (키 값 쌍 스트링 또는 JS 객체)
* 성공 // 성공적인 콜백 함수를 요청합니다
* 실패 // 콜백 함수가 실패했습니다
* 범위 // 콜백 함수 실행 컨텍스트
* 타임 스탬프 // 타임 스탬프 추가 여부
*});
*
*/
sjax =
기능 (WIN) {
var IE678 =!-[1,],
Opera = Win.opera,
doc = win.document,
head = doc.getElementsByTagName ( 'head') [0],
시간 초과 = 3000,
완료 = 거짓;
함수 _serialize (obj) {
var a = [], 키, val;
for (obj in obj) {
val = obj [키];
if (val.constructor == array) {
for (var i = 0, len = val.length; i <len; i ++) {
A.push (key + '=' + encodeUricomponent (val [i]));
}
}또 다른{
A.push (key + '=' + encodeUricomponent (val));
}
}
return a.join ( '&');
}
함수 요청 (url, opt) {
함수 fn () {}
var opt = opt || {},
data = opt.data,
성공 = opt.success || FN,
실패 = opt.failure || FN,
범위 = opt.scope || 이기다,
타임 스탬프 = opt.timestamp;
if (data && typeof data == 'object') {
data = _serialize (data);
}
var script = doc.createElement ( 'script');
함수 콜백 (issucc) {
if (issucc) {
if (typeof jsonp! = 'undefined') {// 할당 오른쪽의 JSONP는 백그라운드에서 반환해야 하며이 변수는 전역 변수입니다.
완료 = 참으로;
성공 .call (SCOPE, JSONP);
}또 다른{
실패 .call (범위);
// ALERT ( '경고 : JSONP가 돌아 오지 않았습니다.');
}
}또 다른{
실패 .call (범위);
}
// IE의 메모리 누출 처리
script.onload = script.onerror = script.onreadyStateChange = null;
JSONP = 정의되지 않은;
if (head && script.parentNode) {
head.removechild (스크립트);
}
}
함수 fixOnerror () {
settimeout (function () {
if (! 완료) {
콜백 ();
}
}, 타임 아웃);
}
if (ie678) {
script.onreadyStateChange = function () {
var readystate = this.readystate;
if (! done && (readystate == 'loaded'|| readystate == 'complete')) {
콜백 (true);
}
}
// fixOnerror ();
}또 다른{
script.onload = function () {
콜백 (true);
}
script.onerror = function () {
콜백 ();
}
if (opera) {
fixOnerror ();
}
}
if (data) {
url += '?' + 데이터;
}
if (timeStamp) {
if (data) {
url += '& ts =';
}또 다른{
url += '? ts ='
}
url += (새 날짜) .gettime ();
}
script.src = url;
head.insertbefore (Script, Head.FirstChild);
}
반환 {load : request};
}(이것);
통화 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
sjax.load ( 'jsonp66.js', {
성공 : function () {alert (jsonp.name)},
실패 : function () {alert ( 'error');}
});
밀 미터 형식
코드 사본은 다음과 같습니다.
기능 tothens (num) {
var num = (num || 0) .toString (), result = '';
while (num.length> 3) {
결과 = ',' + num.slice (-3) + 결과;
num = num.slice (0, num.length -3);
}
if (num) {result = num + result; }
반환 결과;
}
위는이 기사에서 공유하는 일반적으로 사용되는 JavaScript 스크립트입니다. 나는 당신이 그들을 좋아하기를 바랍니다.