jQuery จำกัด กล่องข้อความเพื่อป้อนหมายเลขเท่านั้น
JQuery จำกัด กล่องข้อความเพื่อป้อนตัวเลขเท่านั้นซึ่งเข้ากันได้กับ IE, Chrome และ FF (เอฟเฟกต์ประสิทธิภาพแตกต่างกัน) รหัสตัวอย่างมีดังนี้:
การคัดลอกรหัสมีดังนี้:
$ ("อินพุต"). keyup (function () {// การประมวลผลเหตุการณ์คีย์อัพ
$ (นี่) .val ($ (นี่) .val (). แทนที่ (// d |^0/g, ''));
}). bind ("paste", function () {// ctr+v การประมวลผลเหตุการณ์
$ (นี่) .val ($ (นี่) .val (). แทนที่ (// d |^0/g, ''));
}). CSS ("ime-mode", "ปิดใช้งาน"); // วิธีการตั้งค่าการตั้งค่า CSS ไม่พร้อมใช้งาน
วัตถุประสงค์ของรหัสข้างต้นคือ: จำนวนเต็มบวกที่มากกว่า 0 เท่านั้นที่สามารถป้อนได้
การคัดลอกรหัสมีดังนี้:
$ ("#rnumber"). keyup (function () {
$ (นี่) .val ($ (นี่) .val (). แทนที่ (/[^0-9.]/g, ''));
}). bind ("paste", function () {// ctr+v การประมวลผลเหตุการณ์
$ (นี่) .val ($ (นี่) .val (). แทนที่ (/[^0-9.]/g, ''));
}). CSS ("ime-mode", "ปิดใช้งาน"); // วิธีการตั้งค่าการตั้งค่า CSS ไม่พร้อมใช้งาน
วัตถุประสงค์ของรหัสข้างต้นคือ: เพียง 0-9 ตัวเลขและจุดทศนิยมเท่านั้นที่สามารถป้อนได้
จัดกิจกรรม Domcontentloaded
การคัดลอกรหัสมีดังนี้:
// บันทึกคิวเหตุการณ์ของ DomReady
Eventqueue = [];
// ตัดสินว่ามีการโหลด DOM หรือไม่
พร้อม = false;
// ตัดสินว่า domready ถูกผูกไว้หรือไม่
ISBIND = FALSE;
/*ดำเนินการ domready ()
-
*@param {function}
*@Execute ผลักดันตัวจัดการเหตุการณ์ไปยังคิวเหตุการณ์และผูก domcontentloaded
* หากการโหลด DOM เสร็จสมบูรณ์ให้ดำเนินการทันที
*@ผู้โทร
-
ฟังก์ชั่น domready (fn) {
ถ้า (พร้อม) {
fn.call (หน้าต่าง);
-
อื่น{
Eventqueue.push (FN);
-
bindready ();
-
/*การผูกเหตุการณ์ domready
-
*@param null
*@Execute Modern Browsers Bind DomcontentLoaded ผ่าน Addevlistener รวมถึง IE9+
IE6-8 กำหนดว่า DOM นั้นถูกโหลดโดยการตัดสิน Doscroll
*@caller domready ()
-
ฟังก์ชั่น bindready () {
ถ้า (พร้อม) กลับมา;
ถ้า (isbind) กลับ;
isBind = true;
if (window.addeventListener) {
document.addeventListener ('domcontentloaded', execfn, false);
-
อื่นถ้า (window.attachevent) {
Doscroll ();
-
-
/*Doscroll กำหนดว่า DOM ของ IE6-8 ได้รับการโหลดหรือไม่
-
*@param null
*@Execute Doscroll กำหนดว่า DOM กำลังโหลด
*@caller bindready ()
-
ฟังก์ชั่น doscroll () {
พยายาม{
document.documentelement.doscroll ('ซ้าย');
-
จับ (ข้อผิดพลาด) {
ส่งคืน setTimeout (Doscroll, 20);
-
execfn ();
-
/*คิวเหตุการณ์การดำเนินการ
-
*@param null
*@Execute Loop Execution Event Handler ในคิว
*@caller bindready ()
-
ฟังก์ชั่น execfn () {
ถ้า (! พร้อม) {
พร้อม = จริง;
สำหรับ (var i = 0; i <eventqueue.length; i ++) {
Eventqueue [i]. call (หน้าต่าง);
-
Eventqueue = [];
-
-
// JS ไฟล์ 1
domready (function () {
-
// JS File 2
domready (function () {
-
// โปรดทราบว่าหากมีการโหลดแบบอะซิงโครนัสอย่าผูกเมธอด DomeRady มิฉะนั้นฟังก์ชั่นจะไม่ถูกเรียกใช้งาน
// เพราะก่อนการดาวน์โหลด js แบบอะซิงโครนัสการดาวน์โหลด domcontentloaded ได้รับการยิงและ addeventListener ไม่สามารถฟังได้เมื่อดำเนินการ
การห่อหุ้ม AJAX อย่างง่ายโดยใช้ JS ดั้งเดิม
ก่อนอื่นเราต้องการวัตถุ XHR นี่ไม่ใช่เรื่องยากสำหรับเราห่อหุ้มมันลงในฟังก์ชั่น
การคัดลอกรหัสมีดังนี้:
var createAjax = function () {
var xhr = null;
พยายาม {
// คือเบราว์เซอร์ซีรี่ส์
XHR = ใหม่ ActiveXObject ("Microsoft.xmlhttp");
} catch (e1) {
พยายาม {
// ไม่ใช่เบราว์เซอร์
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;
// พารามิเตอร์ข้อมูลเป็นทางเลือก
var datatype = conf.datatype;
// ฟังก์ชั่นการโทรกลับเป็นทางเลือก
var success = conf.success;
if (type == null) {
// พารามิเตอร์ประเภทเป็นทางเลือกค่าเริ่มต้นคือรับ
type = "get";
-
if (dataType == null) {
// พารามิเตอร์ข้อมูลเป็นทางเลือกค่าเริ่มต้นเป็นข้อความ
datatype = "text";
-
// สร้างวัตถุเครื่องยนต์ Ajax
var xhr = createAjax ();
// เปิด
xhr.open (ประเภท, url, true);
// ส่ง
if (type == "get" || type == "get") {
XHR.Send (NULL);
} อื่นถ้า (type == "post" || type == "post") {
XHR.SetRequestheader ("ประเภทเนื้อหา"
"แอปพลิเคชัน/x-www-form-urlencoded");
XHR.Send (ข้อมูล);
-
xhr.onreadyStateChange = function () {
if (xhr.readystate == 4 && xhr.status == 200) {
if (dataType == "text" || dataType == "text") {
ถ้า (ประสบความสำเร็จ! = null) {
// ข้อความปกติ
ความสำเร็จ (XHR.ResponSetext);
-
} อื่นถ้า (dataType == "xml" || dataType == "xml") {
ถ้า (ประสบความสำเร็จ! = null) {
// รับเอกสาร XML
ความสำเร็จ (xhr.responsexml);
-
} อื่นถ้า (dataType == "JSON" || dataType == "JSON") {
ถ้า (ประสบความสำเร็จ! = null) {
// แปลงสตริง JSON เป็นวัตถุ JS
ความสำเร็จ (eval ("("+xhr.responsetext+")"));
-
-
-
-
-
สุดท้ายเรามาอธิบายการใช้งานฟังก์ชั่นนี้
การคัดลอกรหัสมีดังนี้:
ajax ({
ประเภท: "โพสต์",
URL: "test.jsp"
ข้อมูล: "name = dipoo & info = good",
ข้อมูล: "JSON",
ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {
การแจ้งเตือน (data.name);
-
-
คำขอข้ามโดเมน JSONP
การคัดลอกรหัสมีดังนี้:
-
* JavaScript JSONP Library v0.3
* ลิขสิทธิ์ (c) 2011 Snandy
* QQ Group: 34580561
* วันที่: 2011-04-26
-
* เพิ่มการจัดการความล้มเหลวของคำขอ แม้ว่าฟังก์ชั่นนี้ไม่ได้มีประโยชน์มาก แต่ก็มีการศึกษาความแตกต่างของสคริปต์ในแต่ละเบราว์เซอร์
* 1, เหตุการณ์ IE6/7/8 onreadreadystatechange ที่รองรับสคริปต์
* 2, IE9/10 สนับสนุนสคริปต์ OnLoad และ OnReadyStateChange Events
* 3, Firefox/Safari/Chrome/Opera รองรับสคริปต์เหตุการณ์ OnLoad
* 4, IE6/7/8/Opera ไม่สนับสนุนเหตุการณ์สคริปต์ onerror; สนับสนุน IE9/10/Firefox/Safari/Chrome
* 5. แม้ว่าโอเปร่าจะไม่รองรับเหตุการณ์ OnReadyStateChange แต่ก็มีคุณสมบัติ ReadyState นี่เป็นสิ่งมหัศจรรย์มาก
* 6. ทดสอบ IE6/7/8 ด้วย IE9 และ IETESTER และ ReadyState จะโหลดและโหลดอยู่เสมอ ไม่มีการปรากฏตัวเสร็จสมบูรณ์
-
* แนวคิดการใช้งานขั้นสุดท้าย:
* 1, IE9/Firefox/Safari/Chrome ประสบความสำเร็จในการเรียกใช้เหตุการณ์ OnLoad และข้อผิดพลาดการโทรกลับใช้งาน ONERROR
* 2, Opera ประสบความสำเร็จในการโทรกลับยังใช้เหตุการณ์ ONLOAD (ไม่รองรับ OnReadyStateChange เลย) เนื่องจากไม่สนับสนุน Onerror จึงใช้การประมวลผลล่าช้าที่นี่
* นั่นคือรอความสำเร็จและการโทรกลับสำเร็จและบิตธงหลังจากความสำเร็จถูกตั้งค่าเป็นจริง ความล้มเหลวจะไม่ถูกดำเนินการมิฉะนั้นจะถูกดำเนินการ
* มันช่างฝีมือดีมากที่จะใช้ค่าเวลาล่าช้าที่นี่ ใช้เวลา 2 วินาทีก่อนและไม่มีปัญหาในการทดสอบ บริษัท แต่หลังจากกลับบ้านเพื่อใช้เครือข่ายไร้สาย 3G ฉันพบว่าแม้ว่าไฟล์ js ที่อ้างอิงจะมีอยู่ แต่ก็คือ
* ความเร็วอินเทอร์เน็ตช้าเกินไปความล้มเหลวจะถูกดำเนินการก่อนแล้วจึงประสบความสำเร็จ ดังนั้นจึงมีเหตุผลมากกว่าที่จะใช้เวลา 5 วินาทีที่นี่ แน่นอนว่ามันไม่สมบูรณ์
* 3, IE6/7/8 การโทรกลับที่ประสบความสำเร็จใช้เหตุการณ์ OnReadyStateChange และการเรียกกลับข้อผิดพลาดเกือบจะยากที่จะนำไปใช้ นอกจากนี้ยังเป็นเทคนิคมากที่สุด
* อ้างอิง http://stackoverflow.com/questions/3483919/script-onload-onerror-with-iefor-lazy-loading-problems
* การใช้ Nextsibling พบว่าไม่สามารถนำไปใช้ได้
* สิ่งที่น่ารังเกียจคือแม้ว่าไฟล์ทรัพยากรที่ร้องขอจะไม่มีอยู่ ReadyState จะได้สัมผัสกับสถานะ "โหลด" วิธีนี้คุณไม่สามารถบอกได้ว่าคำขอสำเร็จหรือล้มเหลว
* ฉันกลัวมันดังนั้นในที่สุดฉันก็ใช้กลไกการประสานงานระหว่างสำนักงานด้านหน้าและด้านหลังเพื่อแก้ปัญหาสุดท้าย ทำการร้องขอการโทรกลับ (จริง) โดยไม่คำนึงถึงความสำเร็จหรือความล้มเหลว
* ในเวลานี้ตรรกะที่แยกความสำเร็จและความล้มเหลวได้ถูกนำไปใช้ในการโทรกลับ หากพื้นหลังไม่คืน JSONP ให้โทรล้มเหลวมิฉะนั้นโทรไปที่ความสำเร็จ
-
-
* อินเทอร์เฟซ
* sjax.load (url, {
* data // พารามิเตอร์การร้องขอ (สตริงคู่ค่าคีย์หรือวัตถุ JS)
* ความสำเร็จ // ขอฟังก์ชั่นการโทรกลับที่ประสบความสำเร็จ
* ความล้มเหลว // ฟังก์ชั่นการโทรกลับล้มเหลว
* ขอบเขตฟังก์ชันการเรียกใช้ฟังก์ชั่นการเรียกใช้ฟังก์ชั่น
* timestamp // ว่าจะเพิ่มการประทับเวลา
-
-
-
sjax =
ฟังก์ชั่น (ชนะ) {
var ie678 =!-[1,],
Opera = win.opera
doc = win.document
head = doc.getElementsByTagname ('head') [0],
หมดเวลา = 3000
เสร็จสิ้น = เท็จ;
ฟังก์ชั่น _serialize (obj) {
var a = [], key, val;
สำหรับ (คีย์ใน obj) {
val = obj [คีย์];
if (val.Constructor == array) {
สำหรับ (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,
SCOPE = OPT.SCOPE || ชนะ,
timestamp = opt.timestamp;
if (data && typeof data == 'Object') {
data = _serialize (ข้อมูล);
-
var script = doc.createElement ('script');
ฟังก์ชั่นโทรกลับ (issucc) {
ถ้า (issucc) {
if (typeof jsonp! = 'undefined') {// jsonp ทางด้านขวาของการมอบหมายจะต้องส่งคืนในพื้นหลังและตัวแปรนี้เป็นตัวแปรส่วนกลาง
เสร็จสิ้น = จริง;
Success.call (ขอบเขต, JSONP);
}อื่น{
Failure.call (ขอบเขต);
// Alert ('คำเตือน: JSONP ไม่กลับมา');
-
}อื่น{
Failure.call (ขอบเขต);
-
// จัดการการรั่วไหลของหน่วยความจำใน IE
script.onload = script.onerror = script.onreadyStateChange = null;
jsonp = ไม่ได้กำหนด;
if (head && script.parentNode) {
head.removeChild (สคริปต์);
-
-
ฟังก์ชั่น fixonerror () {
settimeout (function () {
ถ้า (เสร็จแล้ว) {
การโทรกลับ ();
-
}, หมดเวลา);
-
ถ้า (IE678) {
script.onreadyStateChange = function () {
var ReadyState = this.readyState;
if (! เสร็จแล้ว && (ReadyState == 'โหลด' || readyState == 'เสร็จสมบูรณ์')) {
การโทรกลับ (จริง);
-
-
// fixonerror ();
}อื่น{
script.onload = function () {
การโทรกลับ (จริง);
-
script.onerror = function () {
การโทรกลับ ();
-
ถ้า (โอเปร่า) {
fixonerror ();
-
-
ถ้า (ข้อมูล) {
url += '?' + ข้อมูล;
-
if (timestamp) {
ถ้า (ข้อมูล) {
url += '& ts =';
}อื่น{
url += '? ts ='
-
url += (วันที่ใหม่) .getTime ();
-
script.src = url;
head.insertbefore (สคริปต์, head.firstchild);
-
return {โหลด: คำขอ};
}(นี้);
วิธีการโทรมีดังนี้:
การคัดลอกรหัสมีดังนี้:
sjax.load ('jsonp66.js', {
ความสำเร็จ: function () {Alert (jsonp.name)},
ความล้มเหลว: function () {Alert ('ข้อผิดพลาด');}
-
การจัดรูปแบบ Millometer
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น tothings (num) {
var num = (num || 0) .toString (), result = '';
ในขณะที่ (num.length> 3) {
result = ',' + num.slice (-3) + ผลลัพธ์;
num = num.slice (0, num.length - 3);
-
if (num) {result = num + ผลลัพธ์; -
ผลการกลับมา;
-
ข้างต้นเป็นสคริปต์ JavaScript ที่ใช้กันทั่วไปโดยบทความนี้ ฉันหวังว่าคุณจะชอบพวกเขา