Bom dia a todos,
Faz alguns dias que estou utilizando o JQuery em projetos, a partir dessas aventuras vou começar a colocar alguns exemplos de como utilizar esse framework fantástico.
Primeiramente, recomendo que deixe o JQuery sempre rodando em modo de compatibilidade, ou seja, que não conflite com outros frameworks Javascript como Prototype JS e MooTools.
Para deixar o JQuery rodando em modo de compatibilidade, é necessário colocar o seguinte comando no documento (usualmente na tag head).
<script type="text/javascript">
var jquery = jQuery.noConflict();
</script>
Dessa maneira, você pode concentrar o acesso ao JQuery através da variável 'jquery' e não pelo '$' que é o padrão do mesmo. Existem outras maneiras de executar o JQuery em modo compatível através de instrução a instrução, mas não é muito elegante logo porque você poderá usá-lo em muitas partes do seu site/sistema e irá acabar dificultando o entendimento do código Javascript.
Manipulando elementos de formulários (Inputs)
Comparado aos seletores do Prototype, gostei muito do modo de poder trabalhar com os seletores do JQuery pela flexibilidade da famosa função $ (dollar), ou no nosso caso a 'jquery'.
Para selecionar um input qualquer pelo seu ID, podemos fazer da seguinte maneira:
var input = jquery('#id-input');
Nesse caso, temos uma referência direta ao objeto JQuery para o elemento selecionado, assim podemos acessar, modificar e atribuir novas características a este elemento. Como por exemplo:
- input.attr('disabled', true'); // Desabilita o elemento selecionado;
- input.val(); // Retorna o valor (value) do elemento selecionado;
- input.attr('alguma_propriedade'); // Irá retornar o valor dessa propriedade caso existir;
- input.attr('alguma_propriedade', 'algum valor'); // Irá atribuir um valor para a propriedade especificada;
Para selecionar por exemplo todos os elementos de um determinado formulário, pode ser utilizado o seletor da seguinte maneira:
var inputs = jquery('#id-formulario:input'); // irá trazer apenas os elementos do tipo input.
var inputs = jquery('#id-formulario:select'); // irá trazer apenas os elementos do tipo select.
var inputs = jquery('#id-formulario:textarea'); // irá trazer apenas os elementos do tipo textarea.
var inputs = jquery('#id-formulario:radio'); // irá trazer apenas os elementos do tipo radio.
E por ai vai...
Quando é utilizado os seletores para buscar uma coleção de elementos, pode ser utilizada a função each para iterar os objetos, como no exemplo abaixo:
var inputs = jquery('input');
inpus.each (function (contador, input){
input.attr('style', 'backgrond : #c0c0c0');
input.attr('readOnly', true);
});
No exemplo acima, a função each recebe como parâmetro de iteração uma outra função, que irá no caso trazer para a iteração o contador da posição da coleção e uma referência para o objeto JQuery para o elemento DOM (inputs, div, etc.) da posição da coleção. Desta maneira é possível controlar a iteração tanto por elemento como por posição de índice.
Nos seletores, quaisquer tipos de elementos HTML (DOM) podem ser carregados, assim como também podem ser aplicados filtros na expressão do seletor, como por exemplo:
var divs = jquery('div');
var tds = jquery('td');
Ou aplicando uma expressão de filtragem por algum parâmetro, como pelo o exemplo abaixo que faz um filtro pelos elementos que comecem com um determinado ID.
var divs_com_filtro = jquery('div:[id=div-*-sabao]');
Neste caso, irão ser retornadas somente as divs que começarem com 'div' e terminarem com 'sabao'.
Espero que tenha sido útil e até a próxima. Qualquer dúvida deixe um comentário.
Abraços.
Comentarios (6)
RSS feed CommentsRe: posicionar a div conforme navegador
Olá, amigo estou com o seguinte problema:
ao posicionar uma com a seguite configuração:
#nt{position :absolute; width:150; height:600;}
quando visualizado no explorer normal, mas quando no firefox e chrome a div fica fora da posição 100px mais a direita;
como posso conseguir controlar este posicionamento com jquery?
Olá Rubens,
Pelo que compreendi, no Firefox e Chrome a DIV está com um posicionamento mais a direita do que no IE. Isto pode ser uma regra CSS que está sendo interpretada de maneira diferente de um browser para o outro.
Para forçar que os seus elementos fiquem posicionados em um determinado lugar, você deve escrever as regras para que todos os navegadore sigam essas regras (CSS). Por exemplo:
....coisas aqui dentro.....
# CSS
.conteudo
{
margin: 0 auto;
width: 600px; // se você quiser que utilize 100% da tela utilize a display: block;
height: 300px;
}
Nesse exemplo acima, a div ficaria posicionada no centro para o FF e Chrome, mas não para o IE. Mas tem um truque legal que você pode usar para simular a centralização de elementos, pelo menos eu utilizo no desenho de layouts para sistemas que é utilizar o atributo margin mesmo, só que de maneira diferente:
margin-left: 5%;
Assim a margem a esquerda vai ficar relativa para centralizar o elemento na sua página. Com a Jquery você pode fazer assim:
$('#id_div').attr('style', 'margin-left: 5%;');
-
- +0
-
-
posicionar a div conforme navegador
ao posicionar uma com a seguite configuração:
#nt{position :absolute; width:150; height:600;}
quando visualizado no explorer normal, mas quando no firefox e chrome a div fica fora da posição 100px mais a direita;
como posso conseguir controlar este posicionamento com jquery?
-
- +0
-
-
RE: Váriavel dentro do seletor
muito bom artigo!
eu tenho uma dúvida, preciso chamar um span que o id eu só descubro a partir do this. tem com chama-lo com uma variavel dentro do selector? por exemplo:
var variavel = "palavra1"; // que no caso é o id do elemento que eu busco
$(variavel).position();
Olá Ana,
Se no caso for um ID que você tem que procurar baseado numa váriavel qualquer você pode fazer da seguinte maneira utilizando uma concatenação de strings na chamada do seletor do JQuery:
var variavel = 'id-span';
$('#' + variavel).position();
// Para pegar pela classe
('.' + variavel).position();
-
- +0
-
-
Variável dentro do selector
eu tenho uma dúvida, preciso chamar um span que o id eu só descubro a partir do this. tem com chama-lo com uma variavel dentro do selector? por exemplo:
var variavel = "palavra1"; // que no caso é o id do elemento que eu busco
$(variavel).position();
-
- +0
-
-
