Usando jQuery na prática — Simples Ideias. Por Nando Vieira

download Usando jQuery na prática — Simples Ideias. Por Nando Vieira

of 13

Transcript of Usando jQuery na prática — Simples Ideias. Por Nando Vieira

Usando jQuery na prtica Simples Ideias. Por Nando Vieira.

http://simplesideias.com.br/usando-jquery-na-pratica/

Siga-me no Twitter

29/03/08 O jQuery, sem sombra de dvidas, revolucionou a maneira como escrevemos Javascript. Baseado no atalho $ para document.getElementById, o jQuery estendeu-o muito alm do que se podia imaginar, misturando-o com a funo document.getElementsBySelector. Alm do evidente aumento de produtividade, o tamanho da biblioteca impressiona: a verso 1.2.3 tem apenas 29kb para fazer tudo o que voc precisa: requisies AJAX, iterao e criao de elementos DOM, tratamento de eventos... resumindo, uma biblioteca completa, sem deixar a simplicidade de lado. Uma coisa que deve ficar muito clara quando voc comea a trabalhar com jQuery so os seletores disponveis, baseados em CSS 1-3 e alguns adicionados pelo prprio jQuery. Sem eles, voc no tem por onde comear. Ento, aqui vai uma lista super-detalhada dos seletores disponveis no jQuery.

SeletoresOs exemplos que mostrarei so baseados no seguinte markup: jQuery Selectors This is a visible H2 This is a hidden H2 This is just a dummy text. This is just a dummy text too.

  • Item 1

Item 2

Item 3 Sample: Visit our sample page! Inside a span Inside a paragraph

1 de 13

06/02/2012 23:15

Usando jQuery na prtica Simples Ideias. Por Nando Vieira.

http://simplesideias.com.br/usando-jquery-na-pratica/

Click me too! I'm checked Option 1 Option 2 Option 3 Colors Blue Shapes Circle Words Power

CSS 1-3*: qualquer elemento. $('p.comment-meta *'); // get all elements inside p.comment-meta E: pega qualquer elemento com o nome E. $('div'); // get all div tags E:nth-child(n): em um elemento E, pega o elemento n de seu pai. $('li:nth-child(2)'); // get

Item 2 E:first-child: em um elemento E, pega o primeiro filho de seu pai. $('li:first-child'); // get Item 1 E:empty: um elemento E que no possui filhos. $('div:empty'); // get E:enabled: um elemento E que est ativo. $('input:enabled'); // get E:disabled: um elemento E que est inativo. $('input:disabled'); // get