jQuery ограничивает текстовое поле для ввода только номеров
jQuery ограничивает текстовое поле для ввода только чисел, которые совместимы с IE, Chrome и FF (эффект производительности отличается). Пример кода заключается в следующем:
Кода -копия выглядит следующим образом:
$ ("input"). 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", "DISADADED"); // Настройка 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", "DISADADED"); // Настройка CSS Метод ввода недоступен
Цель приведенного выше кода состоит в том, чтобы ввести только 0-9 чисел и десятичные точки.
Инкапсулируйте Domcontentloaded событие
Кода -копия выглядит следующим образом:
// Сохранить очередь событий Domready
EventQueue = [];
// Судите, был ли DOM загружен
isReady = false;
// судить, связан ли Дом,
iSbind = false;
/*Выполнить domready ()
*
*@param {function}
*@execute подталкивает обработчик событий в очередь событий и связывает domcontentloaded
* Если загрузка DOM была завершена, немедленно выполните
*@Caller
*/
функция domready (fn) {
if (iSready) {
fn.call (окно);
}
еще{
EventQueue.push (fn);
};
BindEary ();
};
/*Domready Event Binding
*
*@param null
*@Execute Modern Browsers Bind Domcontentloaded через AddevListener, включая IE9+
IE6-8 определяет, был ли DOM загружен путем оценки Doscroll
*@Caller domready ()
*/
function bindudeReady () {
if (isready) return;
if (iSbind) возврат;
iSbind = true;
if (window.addeventListener) {
document.addeventlistener ('domcontentload', execfn, false);
}
иначе if (window.attachevent) {
doscroll ();
};
};
/*Doscroll определяет, был ли загружен DOM IE6-8.
*
*@param null
*@execute doscroll определяет, загружается ли DOM
*@caller bindready ()
*/
function doscroll () {
пытаться{
document.documentelement.doscroll ('left');
}
поймать (ошибка) {
return SetTimeout (doscroll, 20);
};
execfn ();
};
/*Очередь событий выполнения
*
*@param null
*@Обработчик событий Exepute Loop в очереди
*@caller bindready ()
*/
function execfn () {
if (! Isready) {
isReady = true;
for (var i = 0; i <evenqueue.length; i ++) {
EventQueue [i] .call (окно);
};
EventQueue = [];
};
};
// файл JS 1
domready (function () {
});
// файл JS 2
domready (function () {
});
// Обратите внимание, что если он загружается асинхронно, не связывайте метод Domready, в противном случае функция не будет выполнена.
// Поскольку до загрузки асинхронной загрузки JS Domcontentload был запущен, и AddeventListener нельзя выслушать при выполнении
Простая инкапсуляция AJAX с использованием Native JS
Во -первых, нам нужен объект XHR. Это не сложно для нас, инкапсулируя его в функцию.
Кода -копия выглядит следующим образом:
var createAjax = function () {
var xhr = null;
пытаться {
// IE серии браузер
xhr = new ActivexObject ("microsoft.xmlhttp");
} catch (e1) {
пытаться {
// не т.е. браузер
xhr = new xmlhttprequest ();
} catch (e2) {
window.alert («Ваш браузер не поддерживает Ajax, пожалуйста, замените его!»);
}
}
вернуть XHR;
};
Затем давайте напишем основную функцию.
Кода -копия выглядит следующим образом:
var ajax = function (conf) {
// инициализация
// Тип параметр, необязательный
var type = conf.type;
// параметры URL, требуются
var url = conf.url;
// параметр данных не является обязательным, требуется только при запросе post
var data = conf.data;
// Параметр DataType не является обязательным
var datatype = conf.datatype;
// Функция обратного вызова является необязательной
var success = conf.success;
if (type == null) {
// Параметр типа является необязательным, по умолчанию
type = "Get";
}
if (dataType == null) {
// Параметр DataType является необязательным, по умолчанию по тексту
datatype = "text";
}
// Создать объект двигателя 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 ("контент-тип",
«Приложение/X-WWW-FORM-URLENCODED»);
xhr.send (данные);
}
xhr.onreadystatechange = function () {
if (xhr.readystate == 4 && xhr.status == 200) {
if (dataType == "text" || datatype == "text") {
if (успех! = null) {
// нормальный текст
успех (xhr.responsetext);
}
} else if (datatype == "xml" || datatype == "xml") {
if (успех! = null) {
// Получать XML -документы
успех (xhr.responsexml);
}
} else if (datatype == "json" || datatype == "json") {
if (успех! = null) {
// преобразовать строку json в объект JS
успех (eval ("("+xhr.responsetext+")"));
}
}
}
};
};
Наконец, давайте объясним использование этой функции.
Кода -копия выглядит следующим образом:
ajax ({
Тип: "post",
URL: "test.jsp",
Данные: "name = dipoo & info = Good",
DataType: "json",
Успех: function (data) {
Alert (data.name);
}
});
Крест-домен просит jsonp
Кода -копия выглядит следующим образом:
/**
* JavaScript JSONP Библиотека v0.3
* Copyright (C) 2011 Snandy
* QQ Group: 34580561
* Дата: 2011-04-26
*
* Увеличьте обработку сбоев запроса. Хотя эта функция не очень полезна, были изучены различия в сценариях в каждом браузере.
* 1, IE6/7/8 OneReadyStateChange событие, которое поддерживает скрипт
* 2, IE9/10 поддерживает сценарий Onload и OneReadyStateChange Events
* 3, Firefox/Safari/Chrome/Opera поддерживает события нагрузки сценария
* 4, IE6/7/8/Opera не поддерживает сценарий Onerror Event; IE9/10/Firefox/Safari/Chrome
* 5. Хотя Opera не поддерживает событие OnreadyStateChange, у нее есть свойство готового штата. Это очень волшебно
* 6. Проверьте IE6/7/8 с IE9 и IETESTER, и его готовое положение всегда загружается и загружается. Никаких полных не появилось.
*
* Идея окончательной реализации:
* 1, IE9/Firefox/Safari/Chrom
* 2, Opera успешно Callback также использует событие Onload (оно вообще не поддерживает OneReadyStateChange). Поскольку здесь не поддерживает Onerror, здесь используется обработка задержки.
* То есть дождитесь успеха и успешного обратного вызова, и флаг, сделанный после успеха, установит True. Неудача не будет выполнена, в противном случае он будет выполнен.
* Очень умело взять задержку времени здесь. Это займет 2 секунды назад, и нет проблем в тестировании компании. Но после того, как вернулся домой, чтобы использовать беспроводную сеть 3G, я обнаружил, что, несмотря на указанный файл JS, он существует, он
* Скорость интернета слишком медленная, сначала выполняется сбой, а затем успех. Так что здесь более разумно занять 5 секунд. Конечно, это не абсолютно.
* 3, IE6/7/8 Успешные обратные вызовы используют событие onreadystateChange, и обратные вызовы ошибки практически трудно реализовать. Это также самый технический.
* Ссылка на http://stackoverflow.com/questions/3483919/Script-onload-onerror-with-iefor-lazy-loading-problems
* Используя Nextsibling, было обнаружено, что это не может быть реализовано.
* Что отвратительно, так это то, что даже если запрашиваемый файл ресурса не существует. Его готовый участок также испытает «загруженное» состояние. Таким образом, вы не можете сказать, преуспевает ли запрос или терпит неудачу.
* Я боюсь этого, поэтому я наконец использую механизм координации между передним и бэк -офисом, чтобы решить окончательную проблему. Сделайте обратный вызов запроса (правда) независимо от успеха или неудачи.
* В настоящее время логика, которая отличает успех и неудачу, была введена в обратный вызов. Если фон не возвращает JSONP, вызовите неудачу, в противном случае вызовуте успех.
*
*
* Интерфейс
* Sjax.load (url, {
* DATA // Параметры запроса (строка пары значений ключа или объект JS)
* Успех // Запросить успешную функцию обратного вызова
* Отказ // Функция обратного вызова не удалась
* Контекст выполнения функции вызовов // обратного вызова
* TimeStamp // Добавить ли марки времени
*});
*
*/
Sjax =
function (win) {
var ie678 =!-[1,],
Opera = win.opera,
doc = win.document,
Head = doc.GetElementsBytagName ('Head') [0],
тайм -аут = 3000,
выполнено = false;
функция _serialize (obj) {
var a = [], key, val;
для (ключ в obj) {
val = obj [Key];
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));
}
}
вернуть a.join ('&');
}
Функция запроса (url, opt) {
Функция fn () {}
var opt = opt || {},
data = opt.data,
Успех = Opt.Success || фн,
Неудача = Opt.Failure || фн,
Scope = Opt.Scope || победить,
TimeStamp = Opt.TimestAmp;
if (data && typeof Data == 'Object') {
data = _serialize (data);
}
var script = doc.createElement ('script');
Function обратный вызов (issucc) {
if (issucc) {
if (typeof jsonp! = 'undefined') {// jsonp справа от назначения должен быть возвращен в фоновом режиме, и эта переменная является глобальной переменной
выполнено = true;
Success.call (Scope, JSONP);
}еще{
affl.call (сфера);
// alert ('предупреждение: JSONP не вернулся.');
}
}еще{
affl.call (сфера);
}
// обрабатывать утечку памяти в т.е.
script.onload = script.onerror = script.onreadystatechange = null;
jsonp = не определен;
if (head && script.parentnode) {
Head.RemoveChild (Script);
}
}
function fixonerror () {
settimeout (function () {
if (! Готово) {
перезвонить();
}
}, тайм -аут);
}
if (ie678) {
script.onreadystatechange = function () {
var reateState = this.ReadyState;
if (! Dode && (readystate == 'загружено' || readystate == 'complete')) {
обратный вызов (правда);
}
}
// fixOnerRor ();
}еще{
script.onload = function () {
обратный вызов (правда);
}
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);
}
return {загрузка: запрос};
}(этот);
Метод вызова выглядит следующим образом:
Кода -копия выглядит следующим образом:
Sjax.load ('jsonp66.js', {
Успех: function () {alert (jsonp.name)},
Неудача: function () {alert ('error');}
});
Форматирование Millometer
Кода -копия выглядит следующим образом:
функция тысячи (num) {
var num = (num || 0) .toString (), result = '';
while (num.length> 3) {
result = ',' + num.slice (-3) + result;
num = num.slice (0, num.length - 3);
}
if (num) {result = num + result; }
результат возврата;
}
Выше приведены широко используемые сценарии JavaScript, разделяемые этой статьей. Надеюсь, они вам понравятся.