JQuery restringe a caixa de texto para inserir apenas números
O jQuery restringe a caixa de texto para inserir apenas números, que são compatíveis com IE, Chrome e FF (o efeito de desempenho é diferente). O código de amostra é o seguinte:
A cópia do código é a seguinte:
$ ("input"). KeyUp (function () {// KeyUp Event Processing
$ (this) .val ($ (this) .val (). substitua (// d |^0/g, ''));
}).
$ (this) .val ($ (this) .val (). substitua (// d |^0/g, ''));
}). CSS ("Modo IME", "desativado"); // O método de entrada de configuração CSS não está disponível
O objetivo do código acima é: apenas números inteiros positivos maiores que 0 podem ser inseridos.
A cópia do código é a seguinte:
$ ("#rnumber"). KeyUp (function () {
$ (this) .val ($ (this) .val (). substitua (/[^0-9.]/g, ''));
}).
$ (this) .val ($ (this) .val (). substitua (/[^0-9.]/g, ''));
}). CSS ("Modo IME", "desativado"); // O método de entrada de configuração CSS não está disponível
O objetivo do código acima é: apenas 0-9 números e pontos decimais podem ser inseridos.
Encapsular o evento DomContentLoaded
A cópia do código é a seguinte:
// Salvar a fila de eventos de Domready
eventQueue = [];
// julga se o DOM foi carregado
isready = false;
// julga se Domready está vinculado
isbind = false;
/*Execute o DomReady ()
*
*@param {function}
*@Execute empurra o manipulador de eventos para a fila de eventos e liga o DOMContentLoaded
* Se o carregamento DOM tiver sido concluído, execute imediatamente
*@chamador
*/
função doméia (fn) {
if (isready) {
fn.call (janela);
}
outro{
eventQueue.push (fn);
};
bindReady ();
};
/*Domready Event Binding
*
*@param null
*@Execute os navegadores modernos se ligam ao DOMContentLoaded através do AddevListener, incluindo o IE9+
O IE6-8 determina se o DOM foi carregado por julgamento do Doscroll
*@chamador Domready ()
*/
function bindReady () {
se (nãoready) retornar;
se (isbind) retornar;
isbind = true;
if (window.addeventListener) {
document.addeventListener ('domcontentloaded', execfn, false);
}
else if (window.attachevent) {
Doscroll ();
};
};
/*Doscroll determina se o DOM do IE6-8 foi carregado.
*
*@param null
*@Execute Doscroll determina se o DOM está carregando
*@chamador BindReady ()
*/
function Doscroll () {
tentar{
document.documentElement.doscroll ('esquerda');
}
Catch (Error) {
retornar setTimeout (Doscroll, 20);
};
execfn ();
};
/*Fila de eventos de execução
*
*@param null
*@Execute Loop Execution Event Handler na fila
*@chamador BindReady ()
*/
função Execfn () {
if (! isready) {
isready = true;
for (var i = 0; i <eventQueue.length; i ++) {
eventQueue [i] .call (janela);
};
eventQueue = [];
};
};
// arquivo js 1
DOMRADE (function () {
});
// Arquivo JS 2
DOMRADE (function () {
});
// Observe que, se for carregado de forma assíncrona, não ligue o método DOMRADE, caso contrário, a função não será executada.
// porque antes do download de JS de carregamento assíncrono, o DOMCOntentLoaded foi demitido e o addEventListener não pode ser ouvido ao executar
Encapsulamento simples do AJAX usando JS nativo
Primeiro, precisamos do objeto XHR. Isso não é difícil para nós, encapsulando -o em uma função.
A cópia do código é a seguinte:
var createajax = function () {
var xhr = nulo;
tentar {
// IE Série navegador
xhr = new ActiveXObject ("Microsoft.xmlHttp");
} catch (e1) {
tentar {
// não é navegador
xhr = novo xmlHttPrequest ();
} catch (e2) {
window.alert ("Seu navegador não suporta Ajax, substitua -o!");
}
}
retornar xhr;
};
Então, vamos escrever a função principal.
A cópia do código é a seguinte:
var ajax = function (conf) {
// inicialização
// Tipo Parâmetro, opcional
var tipo = conf.Type;
// Parâmetros de URL, necessários
var url = conf.url;
// O parâmetro de dados é opcional, necessário apenas ao solicitar a postagem
var dados = conf.data;
// O parâmetro Datatype é opcional
var datatype = conf.datatype;
// A função de retorno de chamada é opcional
var success = conf.success;
if (type == null) {
// O parâmetro de tipo é opcional, o padrão é obter
type = "get";
}
if (datatype == null) {
// O parâmetro Datatype é opcional, padrão para texto
datatype = "text";
}
// Crie objeto de motor Ajax
var xhr = createajax ();
// Abrir
XHR.OPEN (TIPO, URL, TRUE);
// enviar
if (type == "get" || tipo == "get") {
xhr.send (nulo);
} else if (type == "post" || tipo == "post") {
xhr.setRequestHeader ("Tipo de conteúdo",
"Application/x-www-forma-urlncoded");
xhr.send (dados);
}
xhr.onreadyStateChange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (datatype == "text" || datatype == "text") {
if (sucesso! = null) {
// texto normal
sucesso (XHR.ResponseText);
}
} else if (datatype == "xml" || datatype == "xml") {
if (sucesso! = null) {
// Receba documentos XML
sucesso (XHR.Responsexml);
}
} else if (datatype == "json" || datatype == "json") {
if (sucesso! = null) {
// converte a string json em objeto JS
Sucesso (Eval ("("+XHR.SponseText+")"));
}
}
}
};
};
Por fim, vamos explicar o uso dessa função.
A cópia do código é a seguinte:
Ajax ({
Tipo: "post",
url: "test.jsp",
Dados: "Nome = DIPOO & INFO = BOM",
Datatype: "JSON",
Sucesso: função (dados) {
alerta (data.name);
}
});
Solicita o domínio cruzado JSONP
A cópia do código é a seguinte:
/**
* Javascript JSONP Library v0.3
* Copyright (C) 2011 Snandy
* Grupo QQ: 34580561
* Data: 2011-04-26
*
* Aumentar o manuseio das falhas de solicitação. Embora essa função não seja muito útil, as diferenças nos scripts em cada navegador foram estudadas.
* 1, IE6/7/8 ONREYSTATECHANGE Evento que suporta script
* 2, IE9/10 suporta script onload e eventos ONREADESTATECHANGE
* 3, Firefox/Safari/Chrome/Opera suporta eventos de Onload Script
* 4, IE6/7/8/Opera não suporta o evento Script OnError; IE9/10/Firefox/Safari/Chrome suporta
* 5. Embora a Opera não suportem o evento OnreadyStateChange, ele possui a propriedade ReadyState. Isso é muito mágico
* 6. Teste IE6/7/8 com IE9 e IETESTER, e seu Estado Ready está sempre carregando e carregado. Nenhuma completa apareceu.
*
* A ideia final de implementação:
* 1, IE9/Firefox/Safari/Chrome chamado com sucesso de volta para usar o evento Onload, e o retorno de chamada de erro usa o evento OnError
* 2, Opera com sucesso também usa o evento OnLoad (não suporta o OnReadyStatechange). Como não suporta o OnError, o processamento de atraso é usado aqui.
* Ou seja, aguarde o sucesso e o retorno de chamada com sucesso, e o bit de bandeira feito após o sucesso ser definido como TRUE. A falha não será executada, caso contrário, será executada.
* É muito habilidoso assumir o valor do tempo atrasado aqui. Demora 2 segundos antes e não há problema nos testes da empresa. Mas depois de voltar para casa para usar a rede sem fio 3G, descobri que, embora exista o arquivo JS referenciado, é
* A velocidade da Internet é muito lenta, a falha é executada primeiro e depois o sucesso. Portanto, é mais razoável levar 5 segundos aqui. Claro, não é absoluto.
* 3, IE6/7/8 Retornos de chamada bem -sucedidos usam o evento OnreadyStateChange, e os retornos de chamada de erro são quase difíceis de implementar. É também o mais técnico.
* Referência http://stackoverflow.com/questions/3483919/script-onload-onerror-with-iefor-lelazy-loading-problems
* Usando o próximo, verificou -se que não poderia ser implementado.
* O que é nojento é que, mesmo que o arquivo de recursos solicitado não exista. Seu Estado Ready também experimentará um estado "carregado". Dessa forma, você não pode dizer se a solicitação é bem -sucedida ou falha.
* Tenho medo disso, então finalmente uso o mecanismo de coordenação entre a frente e o back office para resolver o problema final. Faça a solicitação de retorno de chamada (verdadeira), independentemente do sucesso ou fracasso.
* Neste momento, a lógica que distingue o sucesso e a falha foi colocada no retorno de chamada. Se o plano de fundo não retornar JSONP, ligue para falhar, caso contrário, ligue para o sucesso.
*
*
* Interface
* Sjax.load (url, {
* Dados // Parâmetros de solicitação (String de pares de teclas ou objeto JS)
* Sucesso // Solicite função de retorno de chamada bem -sucedida
* falha // a função de retorno de chamada falhou
* Contexto de execução da função do escopo // de retorno de chamada
* Timestamp // se deve adicionar um carimbo de hora
*});
*
*/
Sjax =
função (win) {
var ie678 =!-[1,],
ópera = win.opera,
doc = win.document,
cabeça = doc.getElementsByTagName ('Head') [0],
Tempo limite = 3000,
feito = false;
função _serialize (obj) {
var a = [], chave, val;
para (chave em obj) {
val = obj [chave];
if (val.Constructor == Array) {
for (var i = 0, len = val.length; i <len; i ++) {
a.push (chave + '=' + codeuricomponent (val [i]));
}
}outro{
a.push (chave + '=' + codeuricomponent (val));
}
}
retornar A.Join ('&');
}
Solicitação de função (url, opt) {
função fn () {}
var opt = opt || {},
dados = opt.data,
sucesso = opt.success || fn,
Falha = opt.Failure || fn,
escopo = opt.scope || ganhar,
Timestamp = opt.timestamp;
if (data && typeof data == 'object') {
dados = _Serialize (dados);
}
var script = doc.createElement ('script');
Função de retorno de chamada (ISSUCC) {
if (ISSUCC) {
if (typeof jsonp! = 'indefinido') {// o jsonp à direita da tarefa deve ser retornado em segundo plano, e essa variável é uma variável global
feito = true;
succcess.call (SCOPE, JSONP);
}outro{
falha.call (escopo);
// alert ('Aviso: jsonp não retornou.');
}
}outro{
falha.call (escopo);
}
// manipula o vazamento de memória no ie
script.onload = script.onerror = script.onReadyStateChange = null;
jsonp = indefinido;
if (head && script.parentNode) {
Head.RemoVechild (Script);
}
}
function fixonerror () {
setTimeout (function () {
if (! feito) {
ligar de volta();
}
}, tempo esgotado);
}
if (ie678) {
script.onReadyStateChange = function () {
var ReadyState = this.readyState;
if (! done && (ReadyState == 'carregado' || ReadyState == 'Complete')) {
retorno de chamada (true);
}
}
// fixONerror ();
}outro{
script.onload = function () {
retorno de chamada (true);
}
script.onerror = function () {
ligar de volta();
}
if (Opera) {
FixONerror ();
}
}
if (dados) {
url += '?' + dados;
}
if (timestamp) {
if (dados) {
url += '& ts =';
}outro{
url += '? ts ='
}
url += (nova data) .gettime ();
}
script.src = url;
Head.InsertBefore (Script, Head.FirstChild);
}
return {load: request};
}(esse);
O método de chamada é o seguinte:
A cópia do código é a seguinte:
Sjax.load ('jsonp66.js', {
Sucesso: function () {alert (jsonp.name)},
Falha: function () {alert ('erro');}
});
Formatação do milômetro
A cópia do código é a seguinte:
função toth milhares (num) {
var num = (num || 0) .ToString (), resultado = '';
enquanto (num.length> 3) {
resultado = ',' + num.slice (-3) + resultado;
num = num.slice (0, num.length - 3);
}
if (num) {resultado = num + resultado; }
resultado de retorno;
}
Os acima são os scripts JavaScript comumente usados compartilhados por este artigo. Eu espero que você goste deles.