Posted by Ana Claudia on jul 13, 2009 in
HTML,
Javascript “Writre Less, do more”, em tradução livre:”Escreva menos, faça mais”, esse é o lema do jQuery. Esse poderoso e largamente utilizado frameworrk de Javascript pode realmente reduzir um código gigante de JS em apenas poucas linhas de uma forma extremamente simples, tudo o que você precisa é um pouco de conhecimento de Javascript. Se o assunto começou a lhe interessar , então continue lendo porquê vai ficar mais interessante.
O Jquery surgiu em janeiro de 2006, e embora seja razoalvelmente novo, possui funções que vem atraindo cada vez mais desenvolvedores do mundo inteiro. Além do framework padrão do jQuery, é possível extender suas funcionalidades através de plugins disponíveis no site oficial do Jquery. A atual versão é a 1.3 e já possui muitas melhorias em relação a versão anterior, dentre uma delas a de funcionalidades de plugins intríseca no framework.
Escrevendo as primeiras linhas
A primeira coisa a ser feita é baixar o framework jQuery para seu computador e em seguida devemos refereciar esse framework através de um include JS:
1
| <script src="jquery-1.3.min.js" type="text/javascript"></script> |
Agora já podemos utilizar o JQuery. Todos os comandos JQuery devem começar com “jQuery” ou com “$” que é uma espécie de atalho.
EX:
1
2
3
4
5
| <script type="text/javascript">
$.(document).ready(function() {
}
</script> |
A função acima é utilizada para carregar tudo que estiver dentro dela antes do carregamento do HTML.
Seletores
OS seletores são utilizados para referenciar objetos HTML de uma maneira mais simples que o Javascript convencional, como por exemplo objetos HTML com atributos id.
1
| <div id="div1">Qualquer Texto</div> |
Para manipular o exemplo acima com JS convencional ficaria da seguinte forma:
1
| document.getelementById("div1"); |
Com o jQuery ficaria assim:
Para exibir o texto dessa div num alert poderia ser feito da seguinte forma:
1
| alert($("#div1).html()); |
E para classes seria da seguinte forma:
E para objetos:
Quem utliza o CSS vai perceber que a sintaxe para refereciar objetos e atributos id e class é bem semelhante, e na verdade é exatemente essa ideia do jQuery, padronizar atributos e objetos.
Confiltos do jQuery com outras biobliotecas
Algums frameworks JS, quando utlizados em conjunto com jQuery, como prototype, podem criar confiltos com jQuery devido ao uso de “$” nos framework utilizados. Existem algumas medidas que podem evitar esse conflito como o uso da palavra “jQuery” ao invés de “$” no inicio de funções ou a expressão noConflict() no final das funções.
Ex:
1
2
3
4
5
| <script type="text/javascript">
$.(document).ready(function() {
}.noConflict();
</script> |
Com esses exemplos já vimos que o jQuery pode simplificar muito o código, e isso é só o começo. Para saber mais, acesse a documentação (em inglês) do jquery.
Site Oficail:
http://docs.jquery.com
Leitura Recomendada:
jQuery In action, de Bear Bibeault e Yehuda Katz
Posted by Ana Claudia on ago 19, 2007 in
HTML,
Javascript,
dhtml,
dom Nesta última parte do mini tutorial sobre DOM vamos ver algumas funções do DOM para acessar, criar e excluir linhas e células de uma tabela.
rows[]
Retorna um array de cada linha de uma tabela.
Sintaxe: tabela.rows[]
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<title>rows[]</title>
<script type='text/javascript'>
window.onload = fucntion() {
alert(document.getElementById("tabela").rows[0].innerHTML);
}
</script>
</head>
<body>
<table id="tabela" border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
</body>
</html> |
cells[]
Retorna um array de cada célula da tabela.
Sintaxe: Tabela.rows.cells[]
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<title>cells[]</title>
<script type='text/javascript'>
window.onload = fucntion() {
alert(document.getElementById("tabela").rows[0].cells[0].innerHTML);
}
</script>
</head>
<body>
<table id="tabela" border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
</body>
</html> |
insertRow()
Insere linhas em uma tabela.
Sintaxe: tabela.insertRow(índice);
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<title>insertRow</title>
<script type='text/javascript'>
window.onload = fucntion() {
document.getElementById("tabela").insertRow(0);
}
</script>
</head>
<body>
<table id="tabela" border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
</body>
</html> |
insertCell()
Insere células em uma tabela.
Sintaxe: linha.insertCell(índice)
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<title>insertCell</title>
<script type='text/javascript'>
window.onload = fucntion() {
linha = document.getElementById("linha");
linha.insertCell(0);
}
</script>
</head>
<body>
<table border="1">
<tr id="linha">
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
</table>
</body>
</html> |
deleteRow()
Apaga linhas de uma tabela.
Sintaxe: tabela.deleteRow(índice);
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <html>
<head>
<title>deleteRow</title>
<script type='text/javascript'>
window.onload = fucntion() {
document.getElementById("tabela").deleteRow(0);
}
</script>
</head>
<body>
<table id="tabela" border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
</body>
</html> |
deleteCell()
Apaga células de uma tabela.
Sintaxe: linha.deleteCell(índice)
Exemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<title>deleteCell</title>
<script type='text/javascript'>
window.onload = fucntion() {
linha = document.getElementById("linha");
linha.deleteCell(0);
}
</script>
</head>
<body>
<table border="1">
<tr id="linha">
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
</table>
</body>
</html> |
Aqui termino meu mini-tutorial sobre DOM, espero que ele tenha sido útil pra o entendimento do assunto assim como o funcionamento de suas principais funções.
Tags:dhtml, dom, HTML, Javascript
Posted by Ana Claudia on ago 12, 2007 in
HTML,
Javascript,
dhtml,
dom Nos artigos anteriores, mostrei como acessar, criar e manipular objetos HTML do documento. Nesta terceira parte irei demonstrar como apagar nós filhos, atributos e textos de um elemento.
RemoveChild
Este método é utilizado para remover nós filhos de um elemento.
Sintaxe: removeChild(elemento);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<title>removeChild</title>
<script type='text/javascript'>
window.onload = fucntion() {
para = document.getElementById("para");
noPai = para.parentNode;
noPai.removeChild(para);
}
</script>
</head>
<body>
<p id="para">Parágrafo</p>
</body>
</html> |
No exemplo acima, o parágrafo foi removido por completo do documento.
deleteData
Remove o conteúdo total ou parcial do texto do nó, a partir de um inicio e fim selecionado.
Sintaxe: deleteData(inicio,fim);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<title>deleteData</title>
<script type='text/javascript'>
window.onload = fucntion() {
para = document.getElementById("para").firstChild;
para.deleteData(0,4);
}
</script>
</head>
<body>
<p id="para">Parágrafo</p>
</body>
</html> |
No exemplo, parte do texto dentro do parágrafo foi removido ficando apenas a palavra “grafo”.
removeAttribute
Remove um atributo de um elemento selecionado.
Sintaxe: removeAttribute(atributo);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<title>removeAttribute</title>
<script type='text/javascript'>
window.onload = fucntion() {
para = document.getElementById("para");
para.removeAttribute("class");
}
</script>
</head>
<body>
<p id="para" class="data">Parágrafo</p>
</body>
</html> |
O script acima removeu o atributo “class” presente no parágrafo.
Por hoje é só pessoal, espero que tenham gostado desse artigo. Na última parte deste tutorial irei falar sobre como manipular tabelas, criar e excluir linhas e células e um pouco mais.
Tags:dhtml, dom, HTML, Javascript
